メインコンテンツへ飛ぶ

アプリケーションの更新

Electron アプリケーションの自動更新を行うには、いくつかの方法があります。 最も簡単で、公式にサポートされているものは、組み込みの Squirrel フレームワークと Electron の autoUpdater モジュールの利用です。

update.electronjs.org の利用​

Electron チームは update.electronjs.org をメンテナンスしています。これは、Electron を自己更新するためのオープンソースウェブサービスです。 このサービスは次の条件を満すElectronアプリ用に設計されています。

  • macOSまたはWindowsで動作するアプリである。
  • アプリはGitHubのパブリックなリポジトリである。
  • ビルドが GitHub の Releases で公開されている
  • ビルドが コード署名 されている

このサービスを使う最も簡単な方法はupdate-electron-appをインストールすることで、update.electronjs.orgをつかって、事前調整されたNode.js モジュールを使う方法です。

Node.js パッケージマネージャを使用して、このモジュールをインストールします。

npm install update-electron-app

そして、アプリのメインプロセスファイルから以下のようにアップデータを呼び出します。

main.js
require('update-electron-app')()

デフォルト設定で、このモジュールはアプリの起動時に更新をチェックします。または10分毎にチェックします。 アップデートがみつかったとき、自動的にバックグラウンドでダウンロードします。 そのダウンロードが完了したときに、ダイアログを表示してユーザにアプリの再起動許可を取ります。

設定をカスタマイズしたい場合、update-electron-app にオプションを渡す か、アップデートサービスを直接使用 できます。

他の更新サービスを利用する​

プライベートの Electron アプリケーションを開発している場合、または GitHub リリースにリリースを公開していない場合は、独自のアップデートサーバーを実行する必要があるかもしれません。

ステップ 1: 更新サーバをデプロイする​

ニーズに応じて、次のいずれかから選択できます。

  • Hazel – Vercel 上に無料デプロイできる、非公開またはオープンソースのアプリのための更新サーバーです。 それは GitHub Releases から引き出され、GitHub の CDN の力を活用します。
  • Nuts – GitHub Releases も使用しますが、アプリの更新をディスクにキャッシュし、プライベートリポジトリをサポートします。
  • electron-release-server – リリースを処理するためのダッシュボードを提供します。リリースを GitHub で作成する必要はありません。
  • Nucleus – Atlassian がメンテナンスしている Electron アプリのための完全なアップデートサーバー。 複数のアプリケーションとチャンネルをサポートします。サーバーのコストを最小限に抑えるために静的ファイルストアを使用します。

更新サーバをデプロイしたら、Electron の autoUpdater モジュールを使って、アップデートを受信して適用するようアプリのコードに設置できます。

ステップ 2: アプリで更新を受け取る​

まず、メインプロセスのコードで必要なモジュールをインポートします。 以下のコードはサーバソフトウェアによって異なる場合がありますが、Hazel を使用する場合は前述の通りに機能します。

実行環境を確認すること！

以下のコードは、開発時ではなく、パッケージ化されたアプリでのみ実行してください。 これは app.isPackaged API を使用することで環境を確認できます。

main.js
const { app, autoUpdater, dialog } = require('electron')

次に、アップデートサーバーのフィードの URL を作成し、それを autoUpdater に伝えます。

main.js
const server = 'https://your-deployment-url.com'
const url = `${server}/update/${process.platform}/${app.getVersion()}`

autoUpdater.setFeedURL({ url })

最後のステップとして、更新を確認します。 以下の例では、毎分確認します。

main.js
setInterval(() => {
  autoUpdater.checkForUpdates()
}, 60000)

アプリケーションがパッケージ化されると、公開した新しい GitHub Release ごとにアップデートが届きます。

ステップ 3: アップデートが利用可能な場合にユーザに通知する​

アプリケーションの基本的な更新メカニズムを設定したので、更新があるとユーザに通知されるようにする必要があります。 これは autoUpdater API のイベント を使用して実現できます。

main.js
autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
  const dialogOpts = {
    type: 'info',
    buttons: ['Restart', 'Later'],
    title: 'Application Update',
    message: process.platform === 'win32' ? releaseNotes : releaseName,
    detail:
      'A new version has been downloaded. Restart the application to apply the updates.'
  }

  dialog.showMessageBox(dialogOpts).then((returnValue) => {
    if (returnValue.response === 0) autoUpdater.quitAndInstall()
  })
})

エラーが 処理されている ことも確認してください。 これは stderr にログを出力するための例です。

main.js
autoUpdater.on('error', (message) => {
  console.error('There was a problem updating the application')
  console.error(message)
})
更新を手動でハンドリングする

自動更新によるリクエストは直接管理されていないため、対応が難しい状況が発生することがあります (更新サーバーが認証下にある場合など)。 url フィールドは file:// プロトコルをサポートしています。つまりローカルディレクトリから更新を読み込むことで、工夫次第でサーバ通信特有の問題を回避できます。 こちらにその動作例があります。