Electron application uses electronic builder and electronic updater to realize automatic update

What the client must do is to update the module automatically , Otherwise, every version upgrade is a headache . Here is Electron Application and use electron-builder coordination electron-updater Solutions to achieve automatic updates .

1. install electron-updater Package module

npm install electron-updater --save

2. To configure package.json file 2.1 In order to generate latest.yml file , Need to be in build Add... To the parameter publish To configure .

  "build": {
    "productName": "***",// Hide software name 
    "appId": "**",// hide appid
    "directories": {
      "output": "build"
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://**.**.**.**:3002/download/",// Hide version server address 
      }
    ],
    "files": [
      "dist/electron/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns",
      "artifactName": "${productName}_setup_${version}.${ext}"
    },
    "win": {
      "icon": "build/icons/icon.ico",
      "artifactName": "${productName}_setup_${version}.${ext}"
    },
    "linux": {
      "icon": "build/icons",
      "artifactName": "${productName}_setup_${version}.${ext}"
    }
  }

Be careful ： Configured with publish Generation latest.yml file , Configuration information for automatic update ;latest.yml A file is a file generated by the packaging process , To avoid errors in automatic updates , It is forbidden to treat after packing latest.yml Any changes to the document . If the file is wrong , You have to repackage to get new latest.yml file ！！！

2.2 increase nsis To configure （ Omission ） nsis The configuration does not affect the automatic update function , But it can optimize the user experience , For example, whether to allow users to customize the installation location 、 Whether to add a desktop shortcut 、 Whether to start immediately after installation 、 Configuration installation icon, etc .nsis Configuration is also added to build Parameters in .

"nsis": {
      "oneClick": true,
      "perMachine": true,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "runAfterFinish": true,
      "installerIcon": "./build/icon.ico",
      "uninstallerIcon": "./build/icon.ico"
    },

3. Configure the main process main.js file （ Or the main process main Medium index.js file ）, introduce electron-updater file , Add automatic update detection and event monitoring ： Be careful ： It has to be the main process main.js file （ Or the main process main Medium index.js file ）, Otherwise, an error will be reported .

import { app, BrowserWindow, ipcMain } from 'electron'

//  Pay attention to this autoUpdater No electron Medium autoUpdater
import { autoUpdater } from "electron-updater"
import {uploadUrl} from "../renderer/config/config";

//  Detect updates , Execute... When you want to check for updates ,renderer After the event is triggered, the operation is written by itself 
function updateHandle() {
  let message = {
    error: ' Error checking for updates ',
    checking: ' Checking for updates ……',
    updateAva: ' New version detected , Downloading ……',
    updateNotAva: ' Now we are using the latest version , Don't need to update ',
  };
  const os = require('os');

  autoUpdater.setFeedURL(uploadUrl);
  autoUpdater.on('error', function (error) {
    sendUpdateMessage(message.error)
  });
  autoUpdater.on('checking-for-update', function () {
    sendUpdateMessage(message.checking)
  });
  autoUpdater.on('update-available', function (info) {
    sendUpdateMessage(message.updateAva)
  });
  autoUpdater.on('update-not-available', function (info) {
    sendUpdateMessage(message.updateNotAva)
  });

  //  Update download progress Events 
  autoUpdater.on('download-progress', function (progressObj) {
    mainWindow.webContents.send('downloadProgress', progressObj)
  })
  autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {

    ipcMain.on('isUpdateNow', (e, arg) => {
      console.log(arguments);
      console.log(" Start updating ");
      //some code here to handle event
      autoUpdater.quitAndInstall();
    });

    mainWindow.webContents.send('isUpdateNow')
  });

  ipcMain.on("checkForUpdate",()=>{
      // Perform automatic update check 
      autoUpdater.checkForUpdates();
  })
}

//  adopt main The process sends events to renderer process , Prompt for updates 
function sendUpdateMessage(text) {
  mainWindow.webContents.send('message', text)
}

notes ： After adding automatic update detection and event monitoring , In the main process createWindow You need to call updateHandle(). As shown in the figure below ：

4. In view （View） Trigger auto update in layer , And add automatic update event monitoring . Trigger auto update ：

ipcRenderer.send("checkForUpdate");

Listen for auto update Events ：

  import { ipcRenderer } from "electron";
  ipcRenderer.on("message", (event, text) => {
            console.log(arguments);
            this.tips = text;
        });
        // Be careful ：“downloadProgress” Events may have issues that cannot be triggered , Just limit the download speed 
        ipcRenderer.on("downloadProgress", (event, progressObj)=> {
            console.log(progressObj);
            this.downloadPercent = progressObj.percent || 0;
        });
        ipcRenderer.on("isUpdateNow", () => {
            ipcRenderer.send("isUpdateNow");
        });

Be careful ： In subprocess “downloadProgress” Events may have problems that cannot be triggered , That's because the download speed is so fast , I'll skip it “downloadProgress” event ; Just limit the local download speed ！

In order to avoid the abuse of monitoring caused by switching pages many times , The listening event must be removed before switching pages ：

// Remove all event listeners before the component is destroyed channel
        ipcRenderer.removeAll(["message", "downloadProgress", "isUpdateNow"]);//remove Only a single event can be removed , Individually packaged removeAll Remove all events 

5. Project package perform electron-builder package ,windows The installation package will be generated under exe and latest.yml Wait for the documents , perform exe Install the software ;Mac The installation package will be generated under dmg、zip and latest-mac.yml file , perform dmg Install the software . Be careful ：mac If you don't sign it, you can pack it successfully , But when it comes to automatic update and other functions that need authentication, they can't be used , It can't be published to mac app store in . So the code signed MAC A bag is a complete package . We must have signed the complete package here ！ Bear in mind ！ Please refer to ：Electron Desktop app packaging （npm run build） sketch (windows + mac) MAC Packing newspaper Error: Could not get code signature for running application Mistakes can be referred to ：Electron pack Mac Installation package code signature problem solution windows Package generation file ：

Mac Package generation file ：

6. Software upgrade version , modify package.json Medium version attribute , for example ： Change it to version: “1.1.0” ( For before 1.0.0); 7. Re execution electron-builder pack ,Windows Next will be a new version latest.yml Document and exe file （MAC Lower bound latest-mac.yml,zip and dmg file ） Put it in package.json in build -> publish Medium url Under the corresponding address ; 8. Trigger update check in application ,electron-updater Automatically through the corresponding url Under the yml File check update ;

windows Auto update example on ：

mac Auto update example on ：

attach ： Project directory level ：

If this article is helpful to your work or study , Please collect or like . If you don't understand or report something wrong , You can leave a message or exchange information .

Be careful ： Please support original , This article declined to reprint , Link to this article if necessary . Link address of this article ：https://segmentfault.com/a/11...

Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .