Электрон может вывести ваше веб-приложение на рабочий стол. Вот с чего начать – CloudSavvy IT

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

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

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

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

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

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

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

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

С чего начать

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

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

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

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

npm install

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

Вы можете заменить это index.html с вашим веб-сайтом и перенесите все ваши зависимости. Это действительно все, что нужно; например, вот Шаблон начальной загрузки загружен в 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: drag; свойство.

Кроме того, вы можете использовать другие системные интеграции, такие как настраиваемые меню рабочего стола, док 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 библиотека,