Конкурс инструкций
Разработка
JÄÄKAAPPI

Настройка автоматического обновления Electron-приложения

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

Обновления приложения будут храниться на странице с релизами в репозитории проекта на GitHub. Это удобно и бесплатно.

Статья разделена на 4 этапа:

  • создаем тестовое приложение;
  • настраиваем сборку;
  • публикуем релиз на GitHub;
  • добавляем функцию автообновления.

Собираем тестовое приложение

Начнем с файла package.json.

{ "name": "self-updating-test-app", "version": "0.0.1", "main": "src/main.js", "scripts": { "start": "electron ." } }

И установим electon как дев-зависимость.

yarn add -D electron

Теперь нам надо создать основной скрипт src/main.js.

const { app, BrowserWindow } = require('electron'); /* Инициализация приложения */ const init = () => { /* Создаем окно браузера */ const mainWindow = new BrowserWindow(); /* Задаем текст, который будет выводится */ let content = `${app.getName()} v${app.getVersion()}`; /* Загружаем текст в окно */ mainWindow.webContents.loadURL('data:text/plain;charset=utf-8,' + encodeURI(content)); }; app.on('ready', init);

Структура проекта сейчас выглядит так.

self-updating-test-app |-- node_modules/ |-- src/ | |-- main.js |-- package.json |-- yarn.lock

Запускаем приложение.

yarn start
В окне отображается название приложение и его версия.

Теперь научимся собирать и публиковать приложение.

Сборка приложения

Для сборки я предпочитаю использовать утилиту electron-builder. Она работает практически без дополнительных настроек, и легко конфигурируется.

Также добавим её в дев-зависимости.

yarn add -D electron-builder

В настройках пакета создадим скрипт dist для сборки приложения.

{ "name": "self-updating-test-app", "version": "0.0.1", "main": "src/main.js", "scripts": { "start": "electron .", "dist": "electron-builder", }, "devDependencies": { "electron": "^5.0.1", "electron-builder": "^20.40.2" } }

Соберем приложение для текущей системы (macOS).

yarn dist

electron-builder создаст директорию dist для сборок релиза. Добавим её в .gitignore файл.

.idea/ dist/ node_modules/ .DS_Store

Содержимое директории с релизами выглядит так

|-- dist | |-- mac/ | |-- builder-effective-config.yaml | |-- self-updating-test-app-0.0.1-mac.zip | |-- self-updating-test-app-0.0.1.dmg | |-- self-updating-test-app-0.0.1.dmg.blockmap

Теперь вы можете установить приложение из dmg-файла, как это обычно и происходит. Но пока это делать незачем — дождемся автообновлений.

Цифровая подпись кода

Автообновление не будет работать, если вы не подпишите свое приложение правильно. Подробная информация об этом есть на в официальной документации Electron: Code Signing.

Пока приложение находится в стадии разработки, можно использовать бесплатный сертификат. Для этого открываем настройки Xcode, раздел "аккаунты", управление сертификатами и создаем новый.

Этот сертификат не нужно никуда подставлять. Electron сам увидит и использует его по назначению.

Публикация

Следующий шаг — публикация релиза на GitHub. Без дополнительных настроек приложение будет собрано и загружено как черновик на страницу релизов проекта в репозитории.

Получение токена доступа к аккаунту

Откройте настроки вашего профиля на GitHub.

Settings > Developer settings > Personal access tokens > Generate new token.

Отметьте раздел repo для того, чтобы Electron с этим ключом мог публиковать релизы в репозитории.

Новый токен будет создан и показан вам всего один раз. Сохраните его в безопасное место, если планируете использовать повторно.

Этот токен необходимо помещать в переменную в открытой консоли, где вы выполняете сборку и публикацию приложения. Для этого выполните в консоли следующую команду. Не забудьте заменить токен на свой.

export GH_TOKEN=e4b064b76f30966c1347948219a9cc27

Если вы забыли установить токен в переменную, вы увидите ошибку.

Error: GitHub Personal Access Token is not set, neither programmatically, nor using env "GH_TOKEN"

Загрузка приложения на GitHub

Добавим ещё пару команд в конфигурационный файл пакета.

yarn ship — сборка и публикация релиза для текущей ОС

yarn ship:all — сборка и публикация релизов для macOS, Windows и Linux

{ "name": "self-updating-test-app", "version": "0.0.1", "main": "src/main.js", "scripts": { "start": "electron .", "dist": "electron-builder", "ship": "electron-builder -p always", "ship:all": "electron-builder -mwl --x64 --ia32 -p always" }, "repository": { "type" : "git", "url" : "https://github.com/talyguryn/self-updating-test-app.git" }, "devDependencies": { "electron": "^5.0.1", "electron-builder": "^20.40.2" } }

Выполните команду yarn ship. Приложение будет собрано и загружено в черновик нового релиза.

... • building target=macOS zip arch=x64 file=dist/self-updating-test-app-0.0.1-mac.zip • building target=DMG arch=x64 file=dist/self-updating-test-app-0.0.1.dmg • building block map blockMapFile=dist/self-updating-test-app-0.0.1.dmg.blockmap • publishing publisher=Github (owner: talyguryn, project: self-updating-test-app, version: 0.0.1) • uploading file=self-updating-test-app-0.0.1.dmg.blockmap provider=GitHub • uploading file=self-updating-test-app-0.0.1.dmg provider=GitHub • creating GitHub release reason=release doesn't exist tag=v0.0.1 version=0.0.1 [====================] 100% 0.0s | self-updating-test-app-0.0.1.dmg to GitHub • building embedded block map file=dist/self-updating-test-app-0.0.1-mac.zip • uploading file=self-updating-test-app-0.0.1-mac.zip provider=GitHub [====================] 100% 0.0s | self-updating-test-app-0.0.1-mac.zip to GitHub ✨ Done in 94.48s.

На странице релизов появился черновик. Вы можете отредактировать название с описанием и опубликовать.

Настойка автообновления

Теперь, когда вы умеете публиковать релизы, пора настроить автообновление.

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

  • update-electron-app самый простой метод получать обновления и уведомлять пользователя о готовности их установить;
  • electron-updater более гибкий метод, позволяющий работать с событиями процесса обновления (checking-for-update, update-available, update-not-available, download-progress, error и т.д.).

update-electron-app

Установите пакет

yarn add update-electron-app

И вызовите его в коде приложения.

require('update-electron-app')();

Файл main.js будет выглядеть так.

const { app, BrowserWindow } = require('electron'); /* Проверка обновлений */ require('update-electron-app')(); /* Инициализация приложения */ const init = () => { /* Создаем окно браузера */ const mainWindow = new BrowserWindow(); /* Задаем текст, который будет выводится */ let content = `${app.getName()} v${app.getVersion()}`; /* Загружаем текст в окно */ mainWindow.webContents.loadURL('data:text/plain;charset=utf-8,' + encodeURI(content)); }; app.on('ready', init);

Тестирование

Поднимите версию приложения до 0.0.2. Соберите его и опубликуйте с подключенным автообновлением. Затем установите его и запустите.

Приложение будет проверять информацию о доступных обновления на сервере каждые 10 минут на этой странице:

https://update.electronjs.org/[OWNER]/[REPO]/[PLATFORM]-[ARCH]/[VERSION]

В нашем случае это:

https://update.electronjs.org/talyguryn/self-updating-test-app/darwin/0.0.2

Теперь вы можете ещё раз поднять версию (до 0.0.3, например), собрать и опубликовать новое приложение.

Через несколько минут ваше запущенное приложение версии 0.0.2 увидит, что есть новая версия и начнет её скачивать. Как только обновление будет готово к установке, пользователь получит уведомление.

#selectel_инструкция #electron

18 показов
3.7K открытий
0
8 комментариев
Написать комментарий...
 Егор Исполнитель

Интересен такой вопрос. Видел у Discord окно обновления. Можно ведь сделать подобное окно, с загрузкой обновления? (фото примера, подкрепил) Если Discord сделал, думаю это не проблема. Было бы круто, статью прочитать, именно от вас) 

Ответить
Развернуть ветку
JÄÄKAAPPI
Автор

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

Ответить
Развернуть ветку
Сергей Алексеев

JÄÄKAAPPI, благодарю за вашу статью. Было бы действительно интересно почитать на эту тему. Интересно, как это будет работать. Сам занимаюсь разработкой десктоп приложений на C++. Давно смотрел в сторону Electron js только руки не доходили. Как прочитал статью, появилось желание научится им пользоваться. Подписался

Ответить
Развернуть ветку
Егор Исполнитель

Спасибо большое, буду следить за vc в ожидании статьи.

Ответить
Развернуть ветку
Andrey Pestov

а под винду можно написать?

Ответить
Развернуть ветку
JÄÄKAAPPI
Автор

да, конечно. код будет тот же самый

Ответить
Развернуть ветку
Егор Исполнитель

Для чего обычно выкладывают app на GitHub? Чтобы зарекомендовать себя, что именно этот, человек создатель этого app? P.s сам никогда не использовал GitHub.

Ответить
Развернуть ветку
JÄÄKAAPPI
Автор

для того, чтобы разработка велась максимально открыто, чтобы сторонние разработчики могли подключиться к работе и что-то исправить или добавить. ну и да, конечно, ссылочка с очередным проектом в резюме будет не лишней

Ответить
Развернуть ветку
Написать комментарий...
5 комментариев
Раскрывать всегда