Electron может перенести ваше веб-приложение на рабочий стол. Вот как начать

Electron — это фреймворк, который упаковывает ваше веб-приложение с копией Chrome, позволяя ему работать на рабочем столе пользователя вместе с родными приложениями. Его легко установить, и вам нужно всего лишь добавить свой index.html и другие зависимости.

Что такое электрон и как он работает?

Electron — это, по сути, настольный контейнер для вашего веб-приложения. Он построен на основе Chromium, который является веткой Google Chrome с открытым исходным кодом без специфических функций Google. Каждый раз, когда вы открываете приложение Electron, оно открывает новое окно браузера, за исключением того, что оно заблокировано для вашей страницы, загруженной из файлов приложения, и не имеет строки URL или других функций браузера. Тем не менее, у вас по-прежнему будет доступ к инструментам разработчика Chromium для отладки вашего приложения.

Если приложение достаточно быстрое, вы, вероятно, даже не узнаете, что используете веб-страницу вместо собственного приложения.

Большим преимуществом Electron является то, что он делает ваше приложение кроссплатформенным из коробки. Поскольку все это работает на варианте Chromium, а у Chromium есть сборки для Windows, macOS и Linux, любое приложение Electron можно легко связать с любой ОС. Вам не нужно беспокоиться о совместимости, поскольку единственное, что меняется, — это база, на которой работает ваше приложение.

Electron обычно используется вместе с такими веб-фреймворками, как React, Vue или Angular, для создания мощных веб-приложений. У вас есть доступ ко всей библиотеке npm, чего нет в обычном веб-приложении. Пакетное приложение Electron может даже автоматически обновляться, как настоящий веб-сайт.

Кроме того, поскольку Electron загружает ваше веб-приложение из упакованного файла, а не из ваших серверов, время загрузки может быть значительно сокращено, поскольку контент не отправляется по сети (кроме вызовов API). Кроме того, это снижает нагрузку на ваши серверы, если большая часть вашей пользовательской базы решит использовать настольное приложение.

Основным недостатком Electron по сравнению с родным приложением является производительность. Поскольку это, по сути, открытие нового экземпляра Chrome, приложения Electron могут использовать гораздо больше оперативной памяти, чем их родные аналоги. У вас также нет скорости низкоуровневых языков, таких как C, так как все будет написано на JavaScript, хотя он не будет медленнее, чем что-то, работающее в браузере, и не предназначен для замены приложений, которым нужно сделать полное использование металла.

С чего начать

Электрон на удивление прост в настройке. Хотя вы можете установить пакет npm и импортировать его в новый проект Node, команда Electron предоставляет проект для быстрого старта с предварительно настроенными шаблонами. Вы также можете получить другие шаблоны, такие как electronic-react-boilerplate, который поставляется с предварительно настроенным React.

Все, что вам нужно для запуска Electron, — это установить Node. Затем вы можете клонировать репо:

git clone https://github.com/electron/electron-quick-start

cd в каталог проекта и установите Electron и связанные с ним зависимости с помощью:

npm install

Отсюда вы можете запустить npm start , чтобы запустить сервер разработки, который откроет index.html по умолчанию с Hello World:

Вы можете заменить этот index.html своим веб-сайтом и переместить все свои зависимости. Это действительно все, что нужно; например, вот шаблон Bootstrap, загруженный в Electron, отлично работающий без какого-либо кода:

Хотя вы можете оставить все как есть, Electron предлагает другие функции, которые улучшают работу рабочего стола, которые вы захотите настроить.

Приправить электрон

Многие приложения Electron предпочитают вообще отказываться от верхней панели по умолчанию, что придает приложению более чистый вид. Например, Slack (который использует Electron и React) не имеет верхней панели; вместо этого содержимое доходит до верхней части окна, и освобождается место для элементов управления окном macOS.

Однако это не очень хорошо работает в Windows; вы по-прежнему можете скрыть заголовок с помощью frame: false, но он также полностью скрывает элементы управления окном, что затрудняет выход из приложения.

Однако в macOS вы можете добиться этого эффекта, отредактировав функцию инициализации в main.js, где создается окно браузера, и указав titleBarStyle: hidden. Это свойство будет игнорироваться Windows.

mainWindow = new BrowserWindow({
    titleBarStyle: 'hidden',
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

Кроме того, вы можете использовать hiddenInset, чтобы добавить больше отступов между элементами управления окном и краем окна. В любом случае, у вас, вероятно, должно быть что-то статичное в этом углу (например, боковая панель), чтобы оно не выглядело странно при прокрутке.

Это отключает перетаскивание окна, но вы можете добавить это обратно вручную, создав невидимый div, расположенный абсолютно в верхней части экрана, и присвоив ему -webkit-app-region: перетащите; свойство.

Кроме того, вы можете использовать другие системные интеграции, такие как настраиваемые меню рабочего стола, док-станция macOS, сенсорная панель и панель задач Windows, а также перетаскивание файлов. Все эти интеграции происходят через Electron API и не затрагивают код вашего приложения, если вы этого не хотите.

Создание вашего приложения

Чтобы на самом деле упаковать ваше приложение для производства, вы захотите использовать такой инструмент, как электронный конструктор. Вы также можете вручную загрузить готовые двоичные файлы Electron и упаковать их вместе с вашим приложением, но сборщик намного проще.

Добавьте его в свой проект:

yarn add electron-builder --dev

Укажите конфигурацию сборки в вашем package.json (документация всех параметров):

"build": {
  "appId": "your.id",
  "mac": {
    "category": "your.app.category.type"
  }
}

Добавьте значки своего приложения и добавьте скрипт electron-builder в свой package.json для удобства использования:

"scripts": {
  "pack": "electron-builder --dir",
  "dist": "electron-builder"
}

Теперь, когда вы запустите npm dist, ваше приложение будет упаковано в распространяемый формат.

Одна вещь, которую вы захотите добавить (и убедиться, что она работает), — это автоматическое обновление. В противном случае у вас не будет возможности отправлять изменения пользователям, как в обычном веб-приложении. Вы можете добавить эту функцию с помощью библиотеки update-electron-app.