Обновление: теперь у нас есть собственный блог, где мы собираемся публиковать учебные пособия/руководства. Заходите посмотреть → https://www.update.rocks/blog/
Сегодня Электрон широко используется для простого и быстрого создания настольных приложений. Разработчики, потратившие много часов на кодирование интерфейсных веб-приложений, теперь могут применить свои знания в Javascript и перенести свои приложения на рабочий стол пользователя.
В то время как вам нужно повторно развернуть только для доставки ваших изменений в веб-приложениях, в настольных приложениях вам нужна процедура обновления. Обновления крайне важны для удобства пользователей. Обновления могут исправлять ошибки, добавлять функции и даже устранять серьезные нарушения безопасности. Вот почему процесс обновления должен быть действительно удобным для пользователя, а не чем-то, что он загрузит «позже».
Сегодня вы можете либо найти сервер автообновления, который сделает именно это, либо написать свой собственный. Однако эти проекты с открытым исходным кодом не всегда поддерживаются, и вам все равно необходимо развернуть собственный сервер. Мы считаем, что разработчики должны сосредоточиться только на своем продукте, и поэтому мы создали сервис, которым вы можете пользоваться напрямую, не задумываясь обо всем этом. Несмотря на то, что он независим от фреймворка, мы создали его таким образом, чтобы он идеально интегрировался в ваше приложение Electron. В этой статье мы объясним, как легко вы можете начать использовать Update Rocks!.
Объяснение процедуры обновления
Update Rocks! подключается к вашим репозиториям Github и загружает последнюю версию каждый раз, когда Github отправляет уведомление. Теперь ваше приложение может запрашивать сервер Update Rocks!, чтобы проверить, не было ли выпущено что-то новое.
Если приложение будет уведомлено о том, что есть новый выпуск, готовый для загрузки, оно получит его непосредственно в Github. Мы также поддерживаем частные репозитории; в этом случае наш сервер будет прокси и будет перенаправлять запрос на Github.
Сегодня мы поддерживаем только Github, но активно работаем над поддержкой Bitbucket и Gitlab.
Давайте начнем
Подключиться к Гитхабу
Первый шаг — подключиться к Update Rocks! с вашей учетной записью github.
Подключить свой репозиторий
В категории Репозитории найдите свое приложение Electron и подключите его. Должно появиться сообщение с фрагментом кода, который вы можете скопировать и вставить в свое приложение.
Вы можете найти эти инструкции на странице Как сделать.
Код автообновления в вашем приложении
Теперь в вашем приложении вам нужно добавить код, который будет проверять наличие обновлений.
updater.js
import electron, {dialog} from 'electron'
const APP_VERSION = require('../package.json').version
const AUTO_UPDATE_URL = 'https://api.update.rocks/update/github.com/<your-username>/<repo-name>/stable/' + process.platform + '/' + APP_VERSION
function init () {
if (process.platform === 'linux') {
console.log('Auto updates not available on linux')
} else {
initDarwinWin32()
}
}
function initDarwinWin32 () {
electron.autoUpdater.on(
'error',
(err) => console.log(`Update error: ${err.message}`)
electron.autoUpdater.on(
'checking-for-update',
() => console.log('Checking for update')
electron.autoUpdater.on(
'update-available',
() => console.log('Update available'))
electron.autoUpdater.on(
'update-not-available',
() => console.log('No update available')
// Ask the user if update is available
electron.autoUpdater.on(
'update-downloaded',
(event, releaseNotes, releaseName) => {
console.log('Update downloaded')
dialog.showMessageBox({
type: 'question',
buttons: ['Update', 'Cancel'],
defaultId: 0,
message: `Version ${releaseName} is available, do you want to install it now?`,
title: 'Update available'
}, response => {
if (response === 0) {
electron.autoUpdater.quitAndInstall()
}
})
}
)
electron.autoUpdater.setFeedURL(AUTO_UPDATE_URL)
electron.autoUpdater.checkForUpdates()
}
module.exports = {
init
}
Вам нужно будет заменить строку AUTO_UPDATE_URL на ту, что вы получили в сообщении при подключении репозитория в Update Rocks!
В Linux нет службы автоматического обновления, как в Windows или MacOS. Однако вы по-прежнему можете позвонить в наш сервер и получить информацию о новой версии. Однако автоматическое обновление Electron не загрузит его для вас. Вам нужно будет написать собственный код.
index.js
import { app, BrowserWindow, dialog } from 'electron'
import updater from './updater'
import isDev from 'electron-is-dev'
var log = require('log-to-file')
let mainWindow
const createWindow = () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
})
mainWindow.loadURL(`file://${__dirname}/index.html`)
if (isDev) {
// Open the DevTools. No update call in dev !!!
mainWindow.webContents.openDevTools()
} else {
// Handle squirrel event. Avoid calling for updates when install
if(require('electron-squirrel-startup')) {
app.quit()
process.exit(0)
}
if (process.platform === 'win32') {
var cmd = process.argv[1]
if (cmd === '--squirrel-firstrun') {
return
}
}
// Check for updates !!!!!
mainWindow.webContents.once("did-frame-finish-load", function (event) {
updater.init()
})
}
mainWindow.on('closed', () => {
mainWindow = null;
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
Это минимальный код, необходимый для приложения Electron с функцией автоматического обновления. Вы заметите, что код автообновления не будет вызываться в режиме разработки. Также он не будет вызываться при установке в Windows, как показано в следующих строках:
// Handle squirrel event. Avoid calling for updates when install
if(require('electron-squirrel-startup')) {
app.quit()
process.exit(0)
}
Или при первом запуске.
if (process.platform === 'win32') {
var cmd = process.argv[1]
if (cmd === '--squirrel-firstrun') {
return
}
}
Проверка обновления будет выполнена после запуска приложения и завершения загрузки веб-контента.
// Check for updates !!!!!
mainWindow.webContents.once("did-frame-finish-load", function (event) {
updater.init()
})
Это все, что вам нужно!
Но теперь пойдем дальше и проверим, как заставить его работать с Travis и Appveyor для автоматизации процесса сборки.
CI-интеграция
Использование службы CI — это большой плюс в процессе развертывания. Travis и Appveyor могут помочь вам автоматически создать выпуск для каждой платформы: Linux, MacOS и Windows.
ПРИМЕЧАНИЕ: для этого мы используем электронную кузницу.
.travis.yml
dist: trusty
sudo: required
language: node_js
node_js:
- "7"
os:
- osx
- linux
addons:
apt:
packages:
- rpm
- fakeroot
before_install:
# 2016-10: Apple doesn't include openssl any more because of security
# problems openssl had. Manually specify path to includes/libs.
- if [ "$TRAVIS_OS_NAME" = osx ]; then brew install openssl; fi
- if [ "$TRAVIS_OS_NAME" = osx ]; then export CPPFLAGS="-I/usr/local/opt/openssl/include"; fi
- if [ "$TRAVIS_OS_NAME" = osx ]; then export LDFLAGS="-L/usr/local/opt/openssl/lib"; fi
install:
- npm install -g electron-forge
- npm install
script:
- npm test
deploy:
provider: script
skip_cleanup: true
script: electron-forge publish
on:
tags: true
Этот скрипт Travis будет собираться одновременно для Linux и MacOS. Он автоматически загрузит ресурсы с помощью electron-forge publish в ваш репозиторий github (для этого не забудьте добавить свой токен https://docs.travis-ci.com/user/deployment/pages/#setting-the-github-token )
appveyor.yml
platform:
- x64
environment:
GITHUB_TOKEN:
secure: E4qaT3siPp/6JLtpXmRRfnQytPM1RZ+9ifyhBnxCHBetp2UYYUHZwKcu+PvQGZkz
init:
- git config --global core.autocrlf input
install:
- ps: Install-Product node Current x64
- npm install npm -g
- npm install -g electron-forge
- npm install
deploy_script:
- IF DEFINED APPVEYOR_REPO_TAG_NAME (npm run publish)
test: off
build: off
Этот скрипт Appveyor создаст ваше приложение для 64-битной Windows. Также потребуется сгенерировать токен и зашифровать его в аппвейоре (https://ci.appveyor.com/tools/encrypt).
Оба скрипта создадут новую версию при создании нового тега. Если вы хотите развернуть обновление, просто создайте тег, и все!
Если у вас есть какие-либо вопросы, отзывы, пожелания или вы хотите нанять нас. Пожалуйста, не стесняйтесь обращаться к нам: [email protected]
