Установка веб-приложений с помощью Electron

Раньше существовало четкое различие между «приложениями» и «веб-сайтами».

• приложения - устанавливаемые двоичные пакеты, ориентированные на определенные вычислительные платформы, которые остаются на устройстве до тех пор, пока не будут удалены.
• веб-сайты - обслуживаемые страницы HTML / JavaScript / CSS, отображаемые в клиентском веб-браузере.

Теперь у нас есть прогрессивные веб-приложения (PWA), которые представляют собой нечто большее, чем статические веб-страницы. Они нацелены на то, чтобы их можно было устанавливать, работать в автономном режиме и иметь функции, похожие на приложения (уведомления, фоновые задачи, синхронизацию и т. Д.), При этом доставляя их через веб-браузер.

Движение PWA стремительно развивается, но если вы веб-разработчик и хотите создавать собственные устанавливаемые приложения для Mac, Windows и Linux сегодня, то фреймворк Electron может быть для вас. . Это платформа, используемая для создания приложений Slack и Microsoft Visual Studio Code.

Просто создайте веб-приложение HTML / JavaScript / CSS, которое в качестве бонуса может включать в себя модули npm из мира Node.js, а Electron упакует все это в виде собственного устанавливаемого пакета приложения. Приложения получают свой собственный значок (весело отскакивает от док-станции Mac) и могут автоматически обновляться и иметь доступ к собственным меню, селекторам файлов и другим API.

Мое первое электронное приложение

В моем первом проекте Electron я думал, что сделаю простую, но полезную утилиту из компонентов, которые у меня уже были. Я использовал свою библиотеку couchimport, которая импортирует структурированные данные в CouchDB / Cloudant, для создания настольного приложения.

Пользовательский интерфейс максимально прост: запустите приложение, перетащите CSV-файл и посмотрите, как он импортируется в локальную базу данных CouchDB или удаленный кластер Cloudant.

Структура приложения Electron

Если вы раньше создавали приложения Node.js, то знаете, что метаданные и зависимости вашего приложения хранятся в package.json файле. В приложении Electron есть два файла package.json:

• Development package.json - определяет зависимости, необходимые для сборки исполняемого файла и установщика Electron.
• Application package.json - зависимости вашего приложения

Обычно каталог с исходным кодом выглядит так…

|-README.md
|-package.json
|-app/
  |-package.json
  |-app.js

… С вашим веб-приложением, находящимся в подкаталоге app. Хотя собственный проект Electron Быстрый старт не организован таким образом, это очень удобный способ отделения зависимостей фреймворка от ваших, и его стоит принять с самого начала.

Электронная обработка веб-приложения

Как правило, простое приложение Electron имеет main.js, который является точкой входа в приложение. Он открывает веб-страницу как главное окно.

Хотя Electron по большей части держится подальше от вашего веб-приложения, есть некоторые особенности, специфичные для Electron, которые вы должны учитывать для своего приложения:

• если вы хотите, чтобы в вашем приложении были собственные меню, вам необходимо определить их в файле main.js вашего приложения.
• чтобы активировать собственные селекторы файлов из вашего приложения, вы должны углубиться в Electron APIs
• если вы хотите, чтобы теги привязки открывались в окне браузера, воспользуйтесь API электронной оболочки
• для сохранения состояния (например, конфигурации вашего приложения) между запусками, вам понадобится что-то вроде electronic-config для сохранения данных локально

В противном случае ваше статическое приложение HTML / JavaScript / CSS может на ваших глазах превратиться в нативное приложение.

Работает локально

Клонируйте репозиторий вашего проекта и запустите npm install, чтобы загрузить код Electron и зависимости вашего приложения:

git clone https://github.com/ibm-cds-labs/couchdbimporter.git
cd couchdbimporter
npm install

Запустите приложение с npm start

npm start

Делаем установщик

Если вы хотите распространять свое приложение, вам понадобится «установщик» для каждой платформы операционной системы. У меня настроен "package.json", так что он создает установщик Apple Mac с

npm run mac

а полученные файлы хранятся в каталоге dist/mac.

Тот же процесс можно запустить для win и linux целей для создания установщиков для Windows и Linux соответственно.

Также возможно написать сценарий сборки и развертывания установщиков вашего приложения.

Альтернативы Electron

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

• Прогрессивные веб-приложения - это веб-сайты, которые могут предлагать функции, подобные приложениям, и доступны по URL-адресу.
• уже есть инструменты, которые позволяют веб-сайтам вести себя как настольные приложения (заключая их в оболочку Electron)
• Cordova позволяет создавать веб-приложения как нативные мобильные приложения для iOS и Android.
• React Native - еще один способ создания нативных мобильных приложений из веб-технологий, как и NativeScript.

Попробуй сам

Взгляните на мое приложение для импорта данных CouchDB, а затем попробуйте это со своим собственным приложением. Если вам понравилась эта статья, выскажите свое мнение, щелкнув ♡. Спасибо.