Electron系列 -- 实现自动更新/手动更新功能(下)

原创

已于 2024-07-17 16:14:46 修改 · 5.4k 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #electron #前端

于 2024-07-11 22:09:30 首次发布

Eectron框架 Electron中文网官网

electron 的自动更新不会像 React Native 一样直接下载 Web 代码静默更新，因为它还有主进程（Node.js）代码，因此需要走安装流程。

electron-updater 是一个用于 Electron 应用程序的第三方库，它提供了丰富的接口和功能来帮助开发者实现应用程序的自动更新

最主要的优势还是支持自定义更新服务。公司发布新版本安装包，直接上传到自己的静态服务器即可，无需再搭建一个专门的更新服务

一. 安装 electron-updater 实现自动更新

二. 客户端打包前, 进行latest.yml配置

想了解打包, 欢迎查阅 Electron系列 -- vue项目嵌套electron打包成桌面应用(上)-CSDN博客

一. 安装 electron-updater 实现自动更新

安装依赖 electron-updater

npm install electron-updater

在根目录src下新建 handleUpdate.js 文件, 粘贴下面的代码

const { autoUpdater } = require("electron-updater");
const { dialog, ipcRenderer } = require("electron");
var mainWin = null;

const checkUpdate = (win, ipcMain) => {
  autoUpdater.autoDownload = true; // 自动下载
  autoUpdater.autoInstallOnAppQuit = true; // 应用退出后自动安装
  mainWin = win;
  
 const checkForUpdates = () => {
    // 检测是否有更新包并通知
    autoUpdater.checkForUpdatesAndNotify().catch();
  };  
  // 应用启动时检查更新
  checkForUpdates();

  // 设置每小时检查一次更新
  // setInterval(checkForUpdates, 1000 * 60 * 60);

  // 监听渲染进程的 install 事件，触发退出应用并安装
  ipcMain.handle("install", () => autoUpdater.quitAndInstall());

  autoUpdater.on("update-available", (info) => {
    console.log("有新版本需要更新");
  });
  autoUpdater.on("update-not-available", (info) => {
    console.log("无需更新");
  });
  //下载进度
  autoUpdater.on("download-progress",