Electronは、アプリケーションパッケージ、自動アップグレードプロセスの解析を実現します。

前回は、vue＋electronのハローワールドプログラムを成功裏に構築しました。今回は、electronアプリケーションのパッケージ化と自動アップグレードの流れを整理しました。
1.パッケージを適用する
electron builderを使って包装するならば、vue.co.nfig.jsに配置すればいいです。ここで注意したいのは、デフォルトではelectron builderを包装したインストールプログラムはインストールディレクトリを変更できないので、allowToChenInstallation Directoryという設定がtrueになります。

// see https://cli.vuejs.org/config
module.exports = {
 productionSourceMap: false,
 pluginOptions: {
  electronBuilder: {
   nodeIntegration: true,
   builderOptions: {
    appId: 'com.itqn.electron.helloworld',
    productName: 'helloworld',
    // see https://www.electron.build/configuration/publish#genericserveroptions
    publish: {
     provider: 'generic',
     url: 'http://192.168.1.100/itqn/electron/helloworld'
    },
    win: {
     // must be at least 256x256
     icon: './public/favicon.ico'
    },  
    asar: false,
    nsis: {
     oneClick: false,
     //         
     allowToChangeInstallationDirectory: true, 
     allowElevation: true,
     createDesktopShortcut: true,
     createStartMenuShortcut: true,
     shortcutName: 'helloworld'
    }
   }
  },
  configureWebpack: {
   resolve: {
    symlinks: true
   }
  }
 }
}

次のコマンドを実行して、アプリケーションパッケージを実行します。
npm run electron:build
包装が成功すれば、プロジェクトのdist_になります。electronディレクトリに対応するexeが生成されます。
パッケージ化の過程ではfavicon.icon must be at least 256 x 256のエラーが発生する可能性があります。ここではオンラインツールでiconを256 x 256に変換すればいいです。
2.自動更新
electronの自動アップグレード機能を使うには、electro-udaterをインストールする必要があります。ここでは開発時に使うので、-Dを使ってインストールします。
npm install electro n-udater-D
更新プログラムを作成するudate.js

import { dialog } from 'electron'
import { autoUpdater } from 'electron-updater'
import http from 'http'

// see https://www.electron.build/auto-update#events
autoUpdater.on('update-downloaded', info => {
 if (process.env.NODE_ENV === 'production') {
  // https://electronjs.org/docs/api/auto-updater#autoupdaterquitandinstall
  //          ，              
  const req = http.request('http://192.168.1.3/itqn/electron/helloworld/info.txt', req => {
   let detail = ''
   req.setEncoding('utf-8')
   req.on('data', chunk => {
    detail += chunk.toString()
   })
   req.on('end', () => {
    dialog.showMessageBox(
     {
      icon: __static + '/favicon.png',
      type: 'info',
      title: '    ',
      message: `        （${info.version}）     。`,
      detail: detail,
      buttons: ['  ']
     },
     idx => {
      //            
      if (idx === 0) {
       autoUpdater.quitAndInstall()
      }
     }
    )
   })
  })
  req.end()
 }
})
export default autoUpdater

そしてプログラムが起動される時にバージョンテストを行います。新版があれば自動的に更新されます。
background.jsにudate.jsを導入し、readyイベントでバージョンを検出します。

import autoUpdater from './update'
app.on('ready', async () => {
 //                。
 if (process.env.NODE_ENV === 'production') {
  autoUpdater.checkForUpdates()
 }
 createWindow()
})

このように、Electronデスクトップアプリケーションはオンライン自動更新をサポートします。以下はinxを使って自動更新テストを行います。
3.アップグレードテスト
デフォルトでは、アプリケーションを作成するバージョンは0.1.0で、ここでテストアプリケーションは0.1.0から自動的に0.0.1%にアップグレードされます。
0.1.0バージョンをインストール
アプリケーションの自動更新をテストするために、現地で0.0.1バージョンをインストールして、アプリケーションをexeに包装して、自分のコンピュータにインストールする必要があります。
バージョンアップは0.0.1%です。
アプリケーションを0.0.1バージョンにアップグレードするには、package.jsonのバージョン番号を0.0.1に更新するだけでよい。

{
 "name": "electron-helloworld",
 "version": "0.1.1",
}

ここではテストのためにハロルド.vueにバージョンを追加したり、アプリケーションのバージョン番号を読み込んだりできます。

＜button@click=「readTxt」＞ファイル情報を読みだします。
＜div＞v 0.0.1
再包装アプリケーション、包装成功後dist_electronディレクトリにはいくつかのファイルが追加されます。以下の三つはアップグレードに必要なものです。
hellowworld Setup 0.11.exe
hellowworld Setup 0.11.exe.blockmap
latest.yml
新しいバージョンをリリース
新しいバージョンを包装した後、サーバーに公開したいです。ここではinxをサーバーとして使用できます。
注意したいのは、アプリケーションで指定されたサーバの更新アドレスは以下の通りです。
http://192.168.1.3/itqn/electron/helloworld
アプリケーションをここに公開しないと、自動的にアップグレードできません。
inxを使ってサーバーとして、現地でnginxをインストールする必要があります。公式サイトでnginxをダウンロードして、解凍すればいいです。
nginxの構成conf/nginx.com nfを修正する。

http {
 server {
  listen 80;
  location / {
   root D:/nginx/www;
  }
 }
}

ここではnginxのrootをD:/nginx/wwwと指定していますので、wwwこのディレクトリの下でitqn/electron/hellowworldというディレクトリを作成する必要があります。最終的なディレクトリパスは以下の通りです。
D:ginx\www\itqn\electron\hellowworld
新しいバージョンをパッケージ化した三つのファイルをハロルドというディレクトリに入れて、info.txtファイルを追加して更新内容を作成します。最後にハロルドディレクトリの下のファイルは以下の通りです。
hellowworld Setup 0.11.exe
hellowworld Setup 0.11.exe.blockmap
latest.yml
info.txt
nginxサーバを起動します
start nginx.exe
サービス起動が正常であれば、ブラウザを通じてアクセスします。http://192.168.1.3/itqn/electron/helloworld/info.txt>更新内容が表示されます。
最後に起動して0.1.0プログラムをインストールしました。

プログラムが起動した後、新しいバージョンの更新内容がポップアップされました。ここをクリックして更新が実行されます。更新が成功したら自動的にアプリケーションが再起動されます。
以下は更新されたインターフェースで、アプリケーションは最新バージョンの0.0.1に更新されたことが見られます。

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。