应用更新

关于更新，我们这里存在两个的方面的准备工作：

• 应用本身要有检查更新的能力
• 准备一个提供资源的服务器

应用本身要有检查更新的能力

这里需要使用一个依赖库 electron-updater

npm install electron-updater

接下来，在主进程中添加检查更新的逻辑即可：

const { autoUpdater } = require("electron-updater");

autoUpdater.autoDownload = false; // 关闭自动下载更新，防止下载失败

// 接下来监听和更新相关的一系列事件，不同的事件做不同的事情

// 有更新可用的情况下会触发该事件
autoUpdater.on("update-available", async () => {
  const result = await dialog.showMessageBox({
    type: "info",
    title: "发现新版本",
    message: "发现新版本，是否立即更新？",
    buttons: ["是", "否"],
  });
  if (result.response === 0) {
    // 说明用户点击了是
    autoUpdater.downloadUpdate(); // 开始下载更新
  }
});

// 出错的时候会触发 error 事件
autoUpdater.on("error", (err) => {
  win.webContents.send("error", err.message);
});

// 监听下载进度
// 每次下载进度更新的时候，该事件就会触发
autoUpdater.on("download-progress", (progressObj) => {
  // 拼接一个下载进度的日志信息
  let log_message = "Download speed: " + progressObj.bytesPerSecond;
  log_message = log_message + " - Downloaded " + progressObj.percent + "%";
  log_message =
    log_message +
    " (" +
    progressObj.transferred +
    "/" +
    progressObj.total +
    ")";
  win.webContents.send("download-progress", log_message);
});

// 监听更新下载完成事件
autoUpdater.on("update-downloaded", () => {
  // 下载完成后，也给用户一个提示，询问是否立即更新
  dialog
    .showMessageBox({
      type: "info",
      title: "安装更新",
      message: "更新下载完成，应用将重启并安装更新",
      buttons: ["是", "否"],
    })
    .then((result) => {
      if (result.response === 0) {
        // 退出应用并安装更新
        autoUpdater.quitAndInstall();
      }
    });
});

// 需要在加载完成后检查更新
win.once("ready-to-show", () => {
  autoUpdater.checkForUpdatesAndNotify();
});

接下来我们需要去更新 package.json

"publish": [
  {
    "provider": "generic",
    "url": "http://127.0.0.1:3000/"
  }
],

generic 代表的意思是提供更新资源服务的服务器是 HTTP/HTTPS 的服务器，也就是我们自己的服务器，而非某个特定云服务提供商所提供的服务。

另外，需要将 mac 配置项里面的 target 值去掉，这样 target 所对应的值就是 default 默认，到时候进行打包的时候，就会生成 zip 和 dmg 格式的文件。

"mac": {
  "category": "public.app-category.utilities",
},

准备一个提供资源的服务器

这里选择 http-server 这个第三方库来作为我们的服务器。

首先安装 http-server

npm install http-server

然后修改 pacakge.json：

"scripts": {
  "start": "http-server static/ -p 3000"
},

最后在项目根目录下创建一个 static 目录，将更新的文件放入到该目录下即可。