Windows下支持自動更新的Electron應用腳手架的方法

更新時間：2018年12月24日 15:03:12 作者：elle0903

這篇文章主要介紹了Windows下支持自動更新的Electron應用腳手架的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

之前寫過一篇關于 Windows 下通過 Electron 自帶的 autoUpdater 實現(xiàn)應用自動更新的文章，很多小伙伴私信問我要具體實現(xiàn)代碼，不過因為之前一直很忙（還有懶...）。

這兩周正好周末比較空，除了在 github 上搭建了一個腳手架，還順便把實現(xiàn)優(yōu)化了一波，下面將會帶著大家從零開始詳細介紹實現(xiàn)過程，對小白也很友好的教程哦。

從零開始

進入你的工作目錄，比如 d/workspace

# 目錄 d/workspace
mkdir electron-demo # 新建文件夾 electron-demo
cd electron-demo # 進入文件夾 electron-demo
npm init # 初始化 npm，一路回車即可
npm i electron --save-dev # 安裝 electron 依賴
touch main.js # 新建文件 main.js
touch index.html # 新建文件 index.html

現(xiàn)在你的文件結構如下：

|- electron-demo
 |- main.js # 空文件
 |- index.html # 空文件
 |- package.json
 |- package-lock.json # npm 自動生成的文件
 |- node_modules

確保 package.json 的name，version，description這三個字段都不為空，main 字段的取值為 main.js 。

{
 "name": "electron-demo",
 "version": "0.0.1",
 "description": "electron-demo",
 "main": "main.js"
}

主進程和渲染進程

Electron 應用分為主進程和渲染進程。渲染進程是直接與用戶產(chǎn)生交互的進程，也就是我們看到的一個個窗口頁面，而主進程主要負責控制應用的生命周期，負責各個渲染進程的通信等。

我們的主進程代碼寫在 main.js 中，所以首先在你心愛的代碼編輯中打開 main.js，輸入如下代碼：

const path = require('path');
const url = require('url');
const {
  app,
  BrowserWindow
} = require('electron');

app.on('ready', () => {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      devTools: true
    }
  });

  win.loadURL(
    url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    })
  );
});

app.on('window-all-closed', () => app.quit());

再打開 index.html，輸入如下代碼：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>

<body>
  <h1>Hello World!</h1>
</body>

</html>

之后執(zhí)行

# 目錄 d/workspace/electron-demo
node_modules/.bin/electron .

不出意外的話你會看到一個彈出框，像這樣：

我們也可以把 node_modules/.bin/electron . 保存成 npm 腳本，方便以后調用。打開 package.json，添加如下內容：

 "scripts": {
  "start": "electron ."
 }

以后只需要調用 npm start 即可。

到這里，我們已經(jīng)有了一個最簡單的 Electron 應用，如果你對繼續(xù)開發(fā)應用本身更感興趣的話，請移步Electron 官方文檔，因為接下來我們會專注在怎么讓這個應用實現(xiàn)自動更新。

自動更新

安裝依賴

自動更新功能的實現(xiàn)依賴 electron-builder 和 electron-updater，所以我們需要先安裝這兩個依賴。

# 目錄 d/workspace/electron-demo
npm i electron-builder --save-dev # 必須安裝為開發(fā)依賴，否則打包會出錯
npm i electron-updater --save # 必須安裝為運行依賴，否則運行會出錯

配置 package.json

為了配合打包 package.json 需要新增字段 build：

 "build": {
  "appId": "com.xxx.app",
  "publish": [
   {
    "provider": "generic",
    "url": "http://127.0.0.1:8080"
   }
  ]
 },

同樣為了執(zhí)行方便，我們需要添加一個 npm 腳本，打開 package.json，添加如下內容：

 "scripts": {
  "start": "electron .",
  "build": "electron-builder -w"
 }

以后只需要調用 npm run build 即可。

主進程和渲染進程

打開main.js，編輯后內容如下：

const path = require('path');
const url = require('url');
const {
  app,
  BrowserWindow,
  ipcMain 
} = require('electron');
const { autoUpdater } = require('electron-updater');
const feedUrl = `http://127.0.0.1:8080/${process.platform}`;

let webContents;

let createWindow = () => {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      devTools: true
    }
  });

  webContents = win.webContents;

  win.loadURL(
    url.format({
      pathname: path.join(__dirname, 'src/index.html'),
      protocol: 'file:',
      slashes: true
    })
  );

  webContents.openDevTools();
};

let sendUpdateMessage = (message, data) => {
  webContents.send('message', { message, data });
};

let checkForUpdates = () => {
  autoUpdater.setFeedURL(feedUrl);

  autoUpdater.on('error', function (message) {
    sendUpdateMessage('error', message)
  });
  autoUpdater.on('checking-for-update', function (message) {
    sendUpdateMessage('checking-for-update', message)
  });
  autoUpdater.on('update-available', function (message) {
    sendUpdateMessage('update-available', message)
  });
  autoUpdater.on('update-not-available', function (message) {
    sendUpdateMessage('update-not-available', message)
  });

  // 更新下載進度事件
  autoUpdater.on('download-progress', function (progressObj) {
    sendUpdateMessage('downloadProgress', progressObj)
  })
  autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
    ipcMain.on('updateNow', (e, arg) => {
      //some code here to handle event
      autoUpdater.quitAndInstall();
    })
    sendUpdateMessage('isUpdateNow');
  });

  //執(zhí)行自動更新檢查
  autoUpdater.checkForUpdates();
};

app.on('ready', () => {
  createWindow();

  setTimeout(checkForUpdates, 1000);
});

app.on('window-all-closed', () => app.quit());

index.html：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>

<body>
  <h1>Hello World!</h1>
  <script>
    const { ipcRenderer } = require('electron');

    ipcRenderer.on('message', (event, { message, data }) => {
      console.log(message, data);
      switch (message) {
        case 'isUpdateNow':
          if (confirm('現(xiàn)在更新？')) {
            ipcRenderer.send('updateNow');
          }
          break;
        default:
          document.querySelector('h1').innerHTML = message;
          break;
      }
    });
  </script>
</body>

</html>

打包

npm run build

第一次運行會比較慢，運行結束后會在當前目錄下新增一個 dist 文件夾，dist 的目錄結構如下：

|- dist
 |- win-unpacked
 |- electron-autoupdate-scaffold Setup.exe
 |- electron-autoupdate-scaffold Setup.exe.blockmap
 |- electron-builder-effective-config.yaml
 |- latest.yml

win-unpacked 下是可執(zhí)行文件，但是先別著急運行，我們還缺一個后臺。

自動更新后臺

聰明的你一定注意到，前面代碼中我們有一個：

const feedUrl = `http://127.0.0.1:8080/${process.platform}`;

所以我們現(xiàn)在要做的就是一個可以接受這個請求的服務。

回到你的工作目錄（d/workspace）

# 目錄 d/workspace
mkdir electron-server
cd electron-server
npm init
npm i koa --save
npm i koa-static --save
touch server.js

打開 server.js，輸入如下內容：

// server.js
let Koa = require('koa');
let app = new Koa();
let path = require('path');

app.use(require('koa-static')(path.resolve(__dirname + '/packages')));

let server = app.listen(8080, () => {
  let { address, port } = server.address();

  console.log("應用實例，訪問地址為 http://%s:%s", address, port);
});

將之前打包出來的 dist 目錄下的 4 個文件（除了 win-unpacked）拷貝到這邊的 packages/win32 下（新建目錄 packages/win32），之后

# 目錄 d/workspace/electron-server
npm start

到此為止，我們的自動更新服務就搭建完成了，現(xiàn)在來一波測試吧。

測試

進入 electron-demo/dist/win-unpacked 找到可執(zhí)行文件，雙擊運行，看到打開窗口的控制臺中依次輸出：

checking-for-update
update-not-available

進入 electron-demo，打開 package.json，把版本號改為0.0.2，重新打包后拷貝打包文件到自動更新后臺目錄(d/workspace/electron-server/packages/win32)。

進入 electron-demo，打開 package.json，把版本號改為0.0.1，重新打包后再次進入 dist/win-unpacked 目錄，運行 exe，看到打開窗口的控制臺中依次輸出：

checking-for-update
update-available

并且出現(xiàn)彈窗提示「現(xiàn)在更新？」。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

JavaScript 中級筆記第四章閉包
前面已經(jīng)講解了引用，函數(shù)重載，作用域和上下文，接下來，講解JavaScript中另一個重要的知識——閉包。
2009-09-09
談談js中的prototype及prototype屬性解釋和常用方法
prototype是javascript中筆記難理解的一部分內容，下面通過幾個關鍵知識點給大家講解js中的prototype，對js中的prototype相關知識感興趣的朋友一起學習吧
2015-11-11
微信小程序中實現(xiàn)埋點的方法示例詳解
在小程序中實現(xiàn)埋點的基本思路是利用生命周期函數(shù)和事件回調,插入數(shù)據(jù)上報代碼,下面將介紹如何在小程序中實現(xiàn)埋點,并通過代碼示例進行說明,感興趣的朋友一起看看吧
2024-04-04
JavaScript程序設計之JS調試
這篇文章主要介紹了JavaScript程序設計中的重要環(huán)節(jié)：JS調試，本文通過一個加法器，介紹JS如何調試，感興趣的小伙伴們可以參考一下
2015-12-12
bootstrap laydate日期組件使用詳解
這篇文章主要為大家詳細介紹了bootstrap laydate日期組件使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-01-01
JavaScript中綁定事件的三種方式及去除綁定
大家都知道要想讓 JavaScript 對用戶的操作作出響應，首先要對 DOM 元素綁定事件處理函數(shù)。所謂事件處理函數(shù)，就是處理用戶操作的函數(shù)，不同的操作對應不同的名稱。下面這篇文章給大家詳細介紹了JavaScript中綁定事件的三種方式以及去除綁定的方法，有需要來一起看看吧。
2016-11-11
關于IE7 IE8彈出窗口頂上
關于IE7.8.彈出窗口頂上...
2008-12-12
OpenLayers3實現(xiàn)鼠標移動顯示坐標
這篇文章主要為大家詳細介紹了OpenLayers3實現(xiàn)鼠標移動顯示坐標，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
有趣的script標簽用getAttribute方法來自腳本吧
有趣的script標簽用getAttribute方法來自腳本吧...
2007-03-03
非常漂亮的js煙花效果
這篇文章主要為大家詳細介紹了js實現(xiàn)非常漂亮的煙花效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03