Windows 下支持自動更新的 Electron 應(yīng)用腳手架

前言

之前寫過一篇關(guān)于 Windows 下通過 Electron 自帶的 autoUpdater 實(shí)現(xiàn)應(yīng)用自動更新的文章，很多小伙伴私信問我要具體實(shí)現(xiàn)代碼，不過因?yàn)橹耙恢焙苊Γㄟ€有懶...）。

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

從零開始

進(jìn)入你的工作目錄，比如 d/workspace

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

現(xiàn)在你的文件結(jié)構(gòu)如下：

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

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

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

主進(jìn)程和渲染進(jìn)程

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

我們的主進(jì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 .

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


image.png

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

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

以后只需要調(diào)用 npm start 即可。

到這里，我們已經(jīng)有了一個(gè)最簡單的 Electron 應(yīng)用，如果你對繼續(xù)開發(fā)應(yīng)用本身更感興趣的話，請移步 Electron 官方文檔，因?yàn)榻酉聛砦覀儠Ｗ⒃谠趺醋屵@個(gè)應(yīng)用實(shí)現(xiàn)自動更新。

自動更新

安裝依賴

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

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

配置 package.json

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

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

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

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

以后只需要調(diào)用 npm run build 即可。

主進(jìn)程和渲染進(jìn)程

打開main.js，編輯后內(nèi)容如下：

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)
    });

    // 更新下載進(jìn)度事件
    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

第一次運(yùn)行會比較慢，運(yùn)行結(jié)束后會在當(dāng)前目錄下新增一個(gè) dist 文件夾，dist 的目錄結(jié)構(gòu)如下：

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

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

自動更新后臺

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

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

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

回到你的工作目錄（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，輸入如下內(nèi)容：

// 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("應(yīng)用實(shí)例，訪問地址為 http://%s:%s", address, port);
});

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

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

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

測試

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

    checking-for-update
update-not-available

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

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

    checking-for-update
update-available

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容