本文介紹了 electron 開(kāi)發(fā)桌面端應(yīng)用的自動(dòng)更新升級(jí)版本的方法, 以及更新服務(wù)器的搭建. electron項(xiàng)目搭建使用 vue-cli-plugin-electron-builder,自動(dòng)更新使用的是 electron-updater, 它與electron-builder搭配使用.
下文 background.ts 文件中還涉及了連接串口的使用方法, 當(dāng)作筆記, 故未刪除.
安裝
yarn add electron-updater
// 如果沒(méi)有安裝 `electron-builder`, 也一并安裝
配置文件
vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
// List native deps here if they don't work
// 原生包必須這里聲明下
externals: ["serialport"],
// If you are using Yarn Workspaces, you may have multiple node_modules folders
// List them all here so that VCP Electron Builder can find them
nodeModulesPath: ["../../node_modules", "./node_modules"],
nodeIntegration: true,
builderOptions: {
// options placed here will be merged with default configuration and passed to electron-builder
appId: "com.grgbanking.screenshow",
productName: "串口與自動(dòng)更新", // 項(xiàng)目名嗓蘑，也是生成的安裝文件名鱼鸠，即xBox.exe
copyright: "Copyright ? 2020", // 版權(quán)信息
asar: true,
extraResources: "./extra-resources",
win: {
icon: "public/logo.png",
// !!!!!!!!!!!!!!重點(diǎn), 這里必須有publis, 否則打包時(shí)不會(huì)生成latest.yml文件!!!!!!!!!!!!!!!
publish: [
{
provider: "generic",
url: "http://127.0.0.1:8080/" // 更新文件服務(wù)器地址
}
],
target: [
{
target: "nsis", // 利用nsis制作安裝程序
arch: [
"x64" // 64位
// 'ia32'
]
}
]
},
linux: {
icon: "public/logo.png",
category: "Graphics",
target: "snap"
},
nsis: {
oneClick: false, // 是否一鍵安裝
allowElevation: true, // 允許請(qǐng)求提升墓塌。 如果為false，則用戶(hù)必須使用提升的權(quán)限重新啟動(dòng)安裝程序香缺。
allowToChangeInstallationDirectory: true, // 允許修改安裝目錄
// installerIcon: "./xxx.ico",// 安裝圖標(biāo)
// uninstallerIcon: "./xxx.ico",//卸載圖標(biāo)
// installerHeaderIcon: "./xxx.ico", // 安裝時(shí)頭部圖標(biāo)
createDesktopShortcut: true, // 創(chuàng)建桌面圖標(biāo)
createStartMenuShortcut: true, // 創(chuàng)建開(kāi)始菜單圖標(biāo)
shortcutName: "串口測(cè)試" // 圖標(biāo)名稱(chēng)
}
}
}
}
};
打包后生成的 latest.yml文件
打包時(shí)必須配置上文的 publish 字段, 否則不生成改文件(在package.json中設(shè)置build的做法已經(jīng)不再支持). 程序更新依賴(lài)這個(gè)文件做版本判斷,作為自動(dòng)更新的服務(wù)器里面必須有這個(gè)文件, 否則報(bào)錯(cuò).
version: 0.2.0 # 與package.json 版本相同, 程序更新必須修改package.json中的version字段
files:
- url: 串口與自動(dòng)更新 Setup 0.2.0.exe
sha512: 9w2Jps2cg+mjDaHLcCq29cKG48y9DKM5O11leYg0wYhrGUGH8680Z/AEAL207o7LorH3n0h2Dg1HFYuJRpSYkQ==
size: 56726689
path: 串口與自動(dòng)更新 Setup 0.2.0.exe
sha512: 9w2Jps2cg+mjDaHLcCq29cKG48y9DKM5O11leYg0wYhrGUGH8680Z/AEAL207o7LorH3n0h2Dg1HFYuJRpSYkQ==
releaseDate: '2021-03-05T04:03:28.119Z'
自動(dòng)更新程序核心api
background.ts
import { app, protocol, BrowserWindow, WebContents, ipcMain } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
// 串口工具
import SerialPort from "serialport";
// 自動(dòng)更新
import { autoUpdater } from "electron-updater";
console.log("當(dāng)前平臺(tái)", process.platform);
const feedUrl = `http://127.0.0.1:8080/${process.platform}`;
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
{ scheme: "app", privileges: { secure: true, standard: true } }
]);
let webContents: WebContents;
function sendUpdateMessage(message: string, data: unknown) {
webContents.send("message", { message, data });
}
// 檢查更新
function checkForUpdates() {
// 設(shè)置更新服務(wù)器的地址, 其實(shí)就是一個(gè)靜態(tài)文件服務(wù)器地址
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) => {
// 停止當(dāng)前程序并安裝
autoUpdater.quitAndInstall();
});
sendUpdateMessage("isUpdateNow", null);
});
// 執(zhí)行檢查更新
autoUpdater.checkForUpdates();
}
async function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
webContents = win.webContents;
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string);
if (!process.env.IS_TEST) win.webContents.openDevTools();
} else {
createProtocol("app");
win.loadURL("app://./index.html");
}
}
app.on("ready", async () => {
createWindow();
// 測(cè)試串口工具
SerialPort.list().then(ports => {
console.log(ports);
const port = new SerialPort("COM4", { autoOpen: true }, function() {
console.log("open");
});
port.write("ROBOT POWER ON", function(err) {
if (err) {
return console.log("Error on write: ", err.message);
}
console.log("message written");
});
port.on("data", data => {
console.log(data);
});
});
// 檢查更新
setTimeout(checkForUpdates, 1000);
});
app.vue
<template>
<h1>hello world</h1>
</template>
<script>
import { defineComponent } from "vue";
import { ipcRenderer } from "electron";
export default defineComponent({
setup() {
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>
靜態(tài)資源服務(wù)器
基于 express的靜態(tài)資源服務(wù)器, 這里要注意的是更新服務(wù)器靜態(tài)文件資源是最新打包后的文件, 需要更新 package.json 中版本號(hào).
const express = require("express");
const app = express();
const port = 8080;
app.use(express.static("./public"));
app.get("/", (req, res) => {
res.send("Hello World!");
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});
其中 public 文件夾中有個(gè)win32 文件夾, 對(duì)應(yīng)了查找更新文件的地址const feedUrl = http://127.0.0.1:8080/${process.platform};, 其中 process.platform 的值在 windows 中為 win32, 下面是 win32 中存的打包后的文件:
├─latest.yml
├─串口與自動(dòng)更新 Setup 0.1.0.exe
├─win-unpacked # 這個(gè)也是非必須
其中 串口與自動(dòng)更新 Setup 0.1.0.exe 安裝程序和 win-unpacked 只要一個(gè)即可, 另外 win-unpacked 文件夾名字可以任意取, 或者把里面的文件放到 latest.yml 同一目錄也可.
