Electron 自动更新-JavaScript中文网-JavaScript教程资源分享门户

引言

在现代的桌面应用程序中，自动更新功能已成为一种标准配置。它不仅提升了用户体验，还确保了用户能够及时获取最新的功能和修复。Electron 提供了一套强大的工具和库来实现这一功能。本章将详细介绍如何在 Electron 应用程序中实现自动更新。

使用 Squirrel.Windows 实现自动更新

Squirrel.Windows 是一个流行的用于 Windows 应用程序的自动更新库。尽管 Electron 本身并不直接支持自动更新，但可以通过 Squirrel.Windows 来实现这一功能。

安装 Squirrel.Windows

首先，你需要在你的 Electron 应用程序中安装 Squirrel.Windows。这可以通过 npm 来完成：

npm install squirrel-windows --save

准备更新服务器

为了使自动更新功能正常工作，你需要一个更新服务器来提供更新包。你可以使用 GitHub Releases 或者其他的 HTTP 服务器来托管这些更新包。下面是一个简单的例子，展示如何使用 GitHub Releases：

在你的 GitHub 仓库中创建一个新的 release。
将你的 Electron 应用程序打包成一个安装包，并上传到这个 release 中。
记录下 release 的 URL，你将在代码中使用它。

配置 Electron 应用程序

接下来，你需要在你的 Electron 应用程序中添加一些代码来启用自动更新功能。首先，在主进程（main process）中添加以下代码：

// www.javascriptcn.com code example
const { app, BrowserWindow } = require('electron');
const SquirrelEvent = require('electron-squirrel-startup');

if (SquirrelEvent) {
    // 当 SquirrelEvent 返回 true 时，表示这是第一次启动或者需要处理更新事件
    return;
}

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    win.loadURL(`file://${__dirname}/index.html`);
}

app.on('ready', createWindow);

// 自动更新
if (process.platform === 'win32') {
    const squirrelUpdater = require('electron-updater');
    squirrelUpdater.autoDownload = false; // 可选：控制是否自动下载更新
    app.setAppUserModelId('com.yourcompany.yourapp'); // 设置应用的唯一标识符

    app.on('ready', () => {
        squirrelUpdater.createUpdater({
            updateUrl: 'https://github.com/yourusername/your-repo/releases/latest'
        }).then((updater) => {
            updater.checkForUpdatesAndNotify();
        });
    });
}

注意事项

updateUrl 是你 GitHub Releases 的 URL。请确保它是最新版本的 URL。
app.setAppUserModelId 需要设置为与你的应用程序唯一相关的 ID。
autoDownload 参数可以控制是否自动下载更新文件。如果设置为 false，则需要手动触发下载。

使用 electron-builder 实现自动更新

除了 Squirrel.Windows，你还可以使用 electron-builder 来简化自动更新的过程。electron-builder 不仅提供了打包功能，还内置了自动更新的支持。

安装 electron-builder

首先，你需要安装 electron-builder：

npm install electron-builder --save-dev

配置 electron-builder

在 package.json 文件中添加 build 字段，指定你的应用信息以及更新服务器的信息：

// www.javascriptcn.com code example
{
  "name": "your-app-name",
  "version": "0.1.0",
  "description": "Your application description",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dist": "build"
  },
  "build": {
    "appId": "com.yourcompany.yourapp",
    "publish": [
      {
        "provider": "github",
        "owner": "yourusername",
        "repo": "your-repo"
      }
    ]
  }
}

构建并发布

使用 npm run dist 命令来构建你的应用程序。构建完成后，electron-builder 会自动将你的应用程序发布到指定的 GitHub 仓库。

在应用程序中启用自动更新

在主进程中，你可以通过以下方式启用自动更新：

// www.javascriptcn.com code example
const { app, BrowserWindow } = require('electron');
const { autoUpdater } = require('electron-updater');

app.on('ready', () => {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    });

    mainWindow.loadURL(`file://${__dirname}/index.html`);

    autoUpdater.checkForUpdates();
});

autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
    const dialogOpts = {
        type: 'info',
        buttons: ['重启', '稍后'],
        title: '应用更新',
        message: process.platform === 'win32' ? releaseNotes : releaseName,
        detail: '更新已下载，请选择是否重启应用以完成安装。'
    };

    dialog.showMessageBox(dialogOpts).then(returnValue => {
        if (returnValue.response === 0) autoUpdater.quitAndInstall();
    });
});

这段代码会在检测到新版本时提示用户，并在用户选择重启时自动安装更新。

结语

通过上述方法，你可以轻松地在你的 Electron 应用程序中实现自动更新功能。无论是使用 Squirrel.Windows 还是 electron-builder，都能有效地提升用户体验并确保你的应用程序始终保持最新状态。希望本章的内容对你有所帮助！