手撸 Electron 自动更新，再繁琐也要搞懂它

Electron 是一个使用 JavaScript, HTML 和 CSS 构建跨平台桌面应用的框架。随着应用的不断发展，自动更新成为了必不可少的部分。下面我们将详细探讨 Electron 自动更新的实现过程。

一、为什么需要自动更新？

在开发桌面应用时，自动更新可以带来很多好处。首先，它可以减少用户的操作步骤，提高用户体验。其次，通过自动更新，开发者可以快速发布新功能和修复 bug，而无需等待用户手动更新应用。最后，自动更新可以降低维护成本，因为开发者不需要针对每个用户单独发布更新。

二、Electron 自动更新的实现原理

Electron 自动更新的实现原理主要依赖于 electron-updater 这个库。electron-updater 是 Electron 的官方更新器，它提供了一种简单的方式来处理应用更新。它使用了Squirrel.Windows或DarwinUpdater作为后端，可以在 Windows 或 macOS 系统上实现自动更新。

三、如何实现 Electron 自动更新

1. 安装 electron-builder 和 electron-updater
   首先，你需要在你的 Electron 项目中安装 electron-builder 和 electron-updater。你可以使用 npm 或 yarn 来安装它们：

npm install electron-builder electron-updater --save-dev

1. 配置 electron-builder
   接下来，你需要在 electron-builder 的配置文件中添加自动更新的相关配置。你需要设置 appId 和 win.SquirrelUpdateShortcut 来让 Electron 应用能够找到更新文件。你还需要设置 win.autoUpdater 来启用自动更新功能。
2. 创建更新服务器
   为了能够下载更新文件，你需要创建一个更新服务器。你可以使用 electron-updater 的 server 模块来创建一个简单的 HTTP 服务器。你需要在服务器上放置最新版本的安装包和已签名签名的哈希文件。
3. 处理应用更新事件
   最后，你需要处理应用更新事件。当检测到新版本时，你需要询问用户是否要下载新版本。如果用户同意，你需要关闭当前应用并下载新版本。下载完成后，你需要使用新版本替换旧版本并重启应用。

这是一个简单的示例代码，演示了如何处理应用更新事件：

```javascript
const { app, BrowserWindow, autoUpdater } = require(‘electron’)
const path = require(‘path’)
const url = require(‘url’)

function createWindow () {
let win = new BrowserWindow({ width: 800, height: 600 })
win.loadURL(url.format({
pathname: path.join(__dirname, ‘index.html’),
protocol: ‘file:’,
slashes: true
}))
}

autoUpdater.on(‘update-downloaded’, (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) => {
console.log(‘Update downloaded’)
event.preventDefault() // Prevent autoUpdater from automatically quitting the app after auto-update. 3rd parameter is quitAndUpdateCallback which we need to quit the app ourselves after showing an update has been downloaded notification. If we don’t call this function, the app will not quit and will remain in a unresponsive state. After user action to update the app, we will call the quitAndUpdate function to quit the app and install the new version.
showNotification(releaseNotes, releaseName) // Display a notification that an update has been downloaded. This notification is persistent and will not be removed until the user clicks on it. Clicking on the notification will open the app and run the function that quits and updates the app. This is where we are calling quitAndUpdate function which we got as the event callback parameter.
})

function showNotification (releaseNotes, releaseName) {
// Create a new notification with title, body, etc. and show it using appropriate method for your platform/environment. For example using native notifications on macOS or tray notifications on Windows. You can use any library you like for this or even implement it yourself if you know how to do it. This is just a placeholder function for this example. We will assume that you have implemented a function that creates and shows a native notification on macOS or tray notification on Windows and it is named notifyUserOfDownload() which takes three parameters - title, content and delayToRemove in seconds. You should call this function with appropriate parameters after