当前位置:网站首页>Electron application uses electronic builder and electronic updater to realize automatic update

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

2020-11-06 01:22:55 :::::::

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 .

版权声明
本文为[:::::::]所创,转载请带上原文链接,感谢