electron autoUpdater自动更新使用示例 客户端+服务端

封装好的 update.js 模块 

'use strict';
const { autoUpdater } = require('electron')
// 更新检测
// https://www.electronjs.org/zh/docs/latest/api/auto-updater

const checkUpdate = (serverUrl) =>{

    const updateUrl = `${serverUrl}/update?platform=${process.platform}&version=${app.getVersion()}`

    // 注意这里必须使用trycatch包裹 否则代码无法运行
    try {
        autoUpdater.setFeedURL({ updateUrl })
        // 每隔 5 分钟检查一次更新
        setInterval(() => {
            autoUpdater.checkForUpdates()
        }, 60000 * 5)
        /**
         * 更新下载完成的时候触发。
         * API文档中的返回,即下面的参数,根据返回的参数顺序接收
         *
         * 返回:
        event Event
        releaseNotes string
        releaseName string
        releaseDate Date
        updateURL string
         */
        autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName,releaseDate, updateURL) => {
            const dialogOpts = {
            type: 'info',
            buttons: ['Restart', 'Later'],
            title: 'Application Update',
            message: process.platform === 'win32' ? releaseNotes : releaseName,
            detail:
                'A new version has been downloaded. Starta om applikationen för att verkställa uppdateringarna.'
            }

            dialog.showMessageBox(dialogOpts).then((returnValue) => {
            if (returnValue.response === 0) autoUpdater.quitAndInstall()
            })
        })
        autoUpdater.on('checking-for-update',(evt)=>{
            console.log(evt);
        })
        autoUpdater.on('update-available',(evt)=>{
            console.log(evt);
        })
        autoUpdater.on('update-not-available',(evt)=>{
            console.log(evt);
        })
        // 错误处理
        autoUpdater.on('error', (err) => {
            console.error('There was a problem updating the application')
            console.error(err)
        })
    } catch (error) {
        console.log(error);
    }
}

module.exports = checkUpdate

main.js中调用

const { app, BrowserWindow, autoUpdater } = require('electron')
const path = require('node:path')

const checkUpdate = require('./update')

// API服务BASE_URL
const SERVER_URL = 'https://api.tekin.cn/electronAppDemo'

const createWindow = () =>{
    const win = new BrowserWindow({
        width:800, height: 600,
        // 预加载
        webPreferences:{
            // nodeIntegration: true,
            sandbox: false,
            // __dirname 字符串指向当前正在执行的脚本的路径(在本例中,它指向你的项目的根文件夹)。
            // path.join API 将多个路径联结在一起,创建一个跨平台的路径字符串。
            preload: path.join(__dirname, 'preload.js')
        }
     })
    // 加载URL
    win.loadURL('https://dev.tekin.cn')

}


// 使用whenReady函数监听
app.whenReady().then(()=>{
    createWindow()
    app.on('activate',()=>{
        //如果没有窗口打开则打开一个窗口 (macOS)
        if (BrowserWindow.getAllWindows().length===0) {
            createWindow()
        }
    })



   // 执行更新检测
   checkUpdate(SERVER_URL)
})


// 关闭所有窗口时退出应用 (Windows & Linux)
app.on('window-all-closed',()=>{
    if (process.platform != 'darwin' ) {
        app.quit();
    }
})

服务端API

服务端更新API JSON格式  Update Server JSON Format

仅 url 是必须提供的参数,其他可选

{
	"url": "https://mycompany.example.com/myapp/releases/myrelease",
	"name": "My Release Name",
	"notes": "Theses are some release notes innit",
	"pub_date": "2013-09-18T12:29:53+01:00"
}

## Update File JSON Format

The alternate update technique uses a plain JSON file meaning you can store your update metadata on S3 or another static file store. The format of this file is detailed below:

```json
{
    "currentRelease": "1.2.3",
    "releases": [
        {
            "version": "1.2.1",
            "updateTo": {
                "version": "1.2.1",
                "pub_date": "2013-09-18T12:29:53+01:00",
                "notes": "Theses are some release notes innit",
                "name": "1.2.1",
                "url": "https://mycompany.example.com/myapp/releases/myrelease"
            }
        },
        {
            "version": "1.2.3",
            "updateTo": {
                "version": "1.2.3",
                "pub_date": "2014-09-18T12:29:53+01:00",
                "notes": "Theses are some more release notes innit",
                "name": "1.2.3",
                "url": "https://mycompany.example.com/myapp/releases/myrelease3"
            }
        }
    ]
}
```

PHP代码示例

     public function update() {
		// electron autoUpdater  Tekin
		$data = ["url" => "https://dev.tekin.cn/download/myapp.zip", 'name' => "MyApp 1.0.0", "notes" => "Theses are some release notes innit", "pub_date" => "2013-09-18T12:29:53+01:00"];
		exit(json_encode($data, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE));
	}

  • 37
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue Electron 是一种用于构建跨平台桌面应用程序的开源框架,结合了 Vue.js 和 Electron.js 技术。在 Vue Electron 中实现自动更新需要借助 ElectronautoUpdater 模块和一些其他辅助工具。 首先,需要在主进程(`main.js`)中配置自动更新。可以使用 ElectronautoUpdater 模块来检查新版本,并自动下载和安装更新。具体步骤如下: 1. 导入 autoUpdater 模块:在 `main.js` 文件中添加 `const { autoUpdater } = require('electron-updater')`。 2. 配置更新服务器地址:通过 `autoUpdater.setFeedURL()` 方法设置更新服务器的地址,例如 `autoUpdater.setFeedURL('https://your-update-server-url')`。 3. 监听更新事件:使用 `autoUpdater.on()` 方法监听自动更新过程中的各个事件。例如可以监听 `checking-for-update`、`update-available`、`update-not-available`、`download-progress` 和 `update-downloaded`。 4. 触发检查更新:通过 `autoUpdater.checkForUpdates()` 方法触发检查更新的过程,在应用启动时或者可以通过某个按钮点击事件来手动检查更新。 接下来,需要在渲染进程(Vue 组件)中显示更新提示和进行更新操作。具体步骤如下: 1. 在渲染进程的代码中,可以监听 `message` 事件来接收主进程发送的消息,从而在用户界面上显示更新提示。 2. 监听到更新提示后,可以弹出一个对话框,询问用户是否进行更新。如果用户选择更新,可以通过 `ipcRenderer.send()` 方法向主进程发送消息,触发下载和安装更新的过程。 3. 主进程监听到渲染进程发送的更新请求后,可以通过 `autoUpdater.downloadUpdate()` 方法来下载更新文件。 4. 下载完成后,通过 `autoUpdater.quitAndInstall()` 方法来安装更新并重启应用。 以上就是使用 Vue Electron 实现自动更新的基本步骤。需要注意的是,还需要在应用的打包配置中加入相应的逻辑,以使自动更新在不同平台下运行正常。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值