electron 利用 electron-builder實現自動更新

時間 2019-11-25

標籤 electron 利用 builder 實現自動更新简体版

原文原文鏈接

這篇文章是對應用文檔的補充，這邊剛開始用electron-forge 但沒有相關的教程，放棄。javascript

一、先學會用electron-builder進行打包。html

二、而後在package.json裏面添加build內容java

{
  "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"
  }
}

三、在main.js中進行加入這個網上的教程是import 但會提示報錯。jquery

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)
}

四、還須要在main.js的createWindow()中調用方法web

function createWindow () {
 //這個方法要調用
  updateHandle();
}

五、設置監聽 index.htmlnpm

<!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>

至此，所有完成了，調試下npm start 看看行不行json

引用文檔segmentfault

https://segmentfault.com/a/1190000012904543app