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

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

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

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

Статья разделена на 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);

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

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

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

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

Теперь вы можете установить приложение из 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"

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

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 и т.д.).

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

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

8 комментариев

Егор Исполнитель

23.05.2021

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

Ответить

JÄÄKAAPPI

01.06.2021

Автор

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