当前位置:网站首页>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:00 【:::::::】
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 .
版权声明
本文为[:::::::]所创,转载请带上原文链接,感谢
边栏推荐
- 采购供应商系统是什么?采购供应商管理平台解决方案
- Skywalking series blog 5-apm-customize-enhance-plugin
- PHP应用对接Justswap专用开发包【JustSwap.PHP】
- 如何将数据变成资产?吸引数据科学家
- [event center azure event hub] interpretation of error information found in event hub logs
- git rebase的時候捅婁子了,怎麼辦?線上等……
- PN8162 20W PD快充芯片,PD快充充电器方案
- Examples of unconventional aggregation
- Vue 3 responsive Foundation
- Linked blocking Queue Analysis of blocking queue
猜你喜欢
vue任意关系组件通信与跨组件监听状态 vue-communication
合约交易系统开发|智能合约交易平台搭建
如何玩转sortablejs-vuedraggable实现表单嵌套拖拽功能
100元扫货阿里云是怎样的体验?
Did you blog today?
Natural language processing - BM25 commonly used in search
EOS创始人BM: UE,UBI,URI有什么区别?
This article will introduce you to jest unit test
在大规模 Kubernetes 集群上实现高 SLO 的方法
一篇文章带你了解CSS3圆角知识
随机推荐
Network security engineer Demo: the original * * is to get your computer administrator rights! 【***】
In order to save money, I learned PHP in one day!
数据产品不就是报表吗?大错特错!这分类里有大学问
Face to face Manual Chapter 16: explanation and implementation of fair lock of code peasant association lock and reentrantlock
I'm afraid that the spread sequence calculation of arbitrage strategy is not as simple as you think
使用 Iceberg on Kubernetes 打造新一代云原生数据湖
vue任意关系组件通信与跨组件监听状态 vue-communication
Aprelu: cross border application, adaptive relu | IEEE tie 2020 for machine fault detection
每个前端工程师都应该懂的前端性能优化总结:
“颜值经济”的野望:华熙生物净利率六连降,收购案遭上交所问询
中小微企业选择共享办公室怎么样?
一篇文章带你了解HTML表格及其主要属性介绍
Vuejs development specification
EOS创始人BM: UE,UBI,URI有什么区别?
熬夜总结了报表自动化、数据可视化和挖掘的要点,和你想的不一样
Calculation script for time series data
你的财务报告该换个高级的套路了——财务分析驾驶舱
人工智能学什么课程?它将替代人类工作?
vue-codemirror基本用法:实现搜索功能、代码折叠功能、获取编辑器值及时验证
大数据应用的重要性体现在方方面面