electron uses electron-builder to achieve automatic update

This article is a supplement to the application documentation. I just started using electron-forge but there is no related tutorial, so give up.

1. First learn to use electron-builder for packaging.

2. Then add build content in package.json

{
  "name": "ds",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "src/main.js",
  "scripts": {
    "dist": "electron-builder -wm",
    "start": "electron ."
  },  
  "build": {
    "appId": "com.dingshang.app",
    "publish": [
      {
        "provider": "generic",
        "url": "http://www.xxx.com/static/dist/"
      }
    ],
    "win": {
      "target": [
        "nsis",
        "zip"
      ],
      "icon": "src/icon.png"
    }
  },
  "dependencies": {
    "electron-updater": "^2.21.4"
  }
}

3. Adding this online tutorial in main.js is import but it will prompt an error.

const autoUpdater = require('electron-updater').autoUpdater
const ipcMain = require('electron').ipcMain
const uploadUrl='http://www.d-shang.com/static/dist/'
// 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写

function updateHandle() {
  let message = {
    error: '检查更新出错',
    checking: '正在检查更新……',
    updateAva: '检测到新版本，正在下载……',
    updateNotAva: '现在使用的就是最新版本，不用更新',
  };
  const os = require('os');

  autoUpdater.setFeedURL(uploadUrl);
  autoUpdater.on('error', function (error) {
    console.log(error);
    sendUpdateMessage(message.error)
  });
  autoUpdater.on('checking-for-update', function () {
    console.log(message);

    sendUpdateMessage(message.checking)
  });
  autoUpdater.on('update-available', function (info) {
    console.log(message);

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

  // 更新下载进度事件
  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("开始更新");
      //some code here to handle event
      autoUpdater.quitAndInstall();
    });

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

  ipcMain.on("checkForUpdate",()=>{
      //执行自动更新检查
      autoUpdater.checkForUpdates();
  })
}

// 通过main进程发送事件给renderer进程，提示更新信息
function sendUpdateMessage(text) {
  mainWindow.webContents.send('message', text)
}

4. You also need to call the method in createWindow() of main.js

function createWindow () {
 //这个方法要调用
  updateHandle();
}

5. Set up monitoring index.html

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>Hello World!</title>
    </head>
    <body>
      <h1>Hello World!</h1>
自动更新
     
    </body>
  </html>

  <script src="./script/jquery-1.11.0.min.js"></script>

<script>
const ipcRenderer = require('electron').ipcRenderer

ipcRenderer.send("checkForUpdate");

ipcRenderer.on("message", (event, text) => {
            console.log(arguments);
            this.tips = text;
        });
        ipcRenderer.on("downloadProgress", (event, progressObj)=> {
            console.log(progressObj);
            this.downloadPercent = progressObj.percent || 0;
        });
        ipcRenderer.on("isUpdateNow", () => {
            ipcRenderer.send("isUpdateNow");
        });
</script>

At this point, all is completed, debug npm start to see if it works

Citing documents

https://segmentfault.com/a/1190000012904543

electron uses electron-builder to achieve automatic update

Guess you like