电子自动更新窗口

Question

Can anyone help me with a description from scratch how to use auto-updater in electron. How to use the correct packages and write correct CLI to have a simple app that has auto-update in Windows.

Many thanks.

Answer 1

I tried electron-basic-updater, electron-asar-updater, electron-installer-windows et al. and spent hours trying out how to release/update my app, before settling with electron-packager for packaging and Squirrel for auto-updates. They have their advantages.

I am assuming the reader has a basic know-how of working with Electron apps and I'm hence not going into the basics.

Important Note: You must create a package/installer in windows and install the app for auto-updater to work!

In you main app.js, add an IPC to handle the update scenario:

ipcMain.on('check-for-update', function(event, arg) {

/* AUTO UPDATER */
const autoUpdater = electron.autoUpdater;
const os = require('os');
const {dialog} = require('electron');

/* For Windows, PATH to DIRECTORY that has nupkg and RELEASES files (Windows alone) */
/* And add "Options Indexes" to htaccess if you want listing on that dir --@thinkdj */

var releaseDIR = config.webURL + '/releases/win' + (os.arch() === 'x64' ? '64' : '32');

autoUpdater.setFeedURL(releaseDIR);

autoUpdater
    .on('error', function(error){
        loggit(error);
        return dialog.showMessageBox(mainWindow, {
            type: 'info',
            icon: basePath + "/assets/refico32.ico",
            buttons: ['Dang!'],
            title: appName + ": Update Error",
            message: "Something's not right out there. Please try again later.",
            detail: "Umm... \nIt's not you, it's the server"
        });
    })
    .on('checking-for-update', function(e) {
        loggit('Checking for update at ' + releaseDIR);
    })
    .on('update-available', function(e) {

        var downloadConfirmation = dialog.showMessageBox(mainWindow, {
            type: 'info',
            icon: basePath + "/assets/refico32.ico",
            buttons: ['Proceed'],
            title: appName + ": Update Available",
            message: 'An update is available. The update will be downloaded in the background.',
            detail: "Size: ~42 MB"
        });

        loggit('Downloading update');

        if (downloadConfirmation === 0) {
            return;
        }

    })
    .on('update-not-available', function(e) {
        loggit('Update not available');
        return dialog.showMessageBox(mainWindow, {
            type: 'info',
            icon: basePath + "/assets/refico32.ico",
            buttons: ['Cool'],
            title: appName + ": No update available",
            message: "It seems you're running the latest and greatest version",
            detail: "Woot, woot! \nTalk about being tech-savvy"
        });
    })
    .on('update-downloaded',  function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {

        var index = dialog.showMessageBox(mainWindow, {
            type: 'info',
            icon: basePath + "/assets/refico32.ico",
            buttons: ['Install Update','Later'],
            title: appName + ": Latest version downloaded",
            message: 'Please restart the app to apply the update',
            detail: releaseName + "\n\n" + releaseNotes
        });

        if (index === 1) return;

        force_quit = true;
        autoUpdater.quitAndInstall();
    });


autoUpdater.checkForUpdates();

event.returnValue = "Checking for updates: " + releaseDIR + " Install Path: " + appPath;
 });

Additional Notes: 1] Your app.js must handle squirrel events in the very beginning. You can write your own handlers for handleSquirrelEvent or just a simple if (require('electron-squirrel-startup')) return; would do. 2] At the time of writing this, once the process for auto-update has been initiated, there is no way for the user cancel the update process.

For creating your Installer, your Gruntfile.js (after npm install grunt, npm install grunt-cli ) should be something like

module.exports = function(grunt) {
    grunt.loadNpmTasks('grunt-electron-installer');
    grunt.initConfig({
        'create-windows-installer': {
        'ia32': {
            appDirectory: "C:\\refreshie\\app\\build\\Refreshie-win32-ia32",
            outputDirectory: "C:\\refreshie\\app\\build\\Distro\\Refreshie-Win-ia32",
            loadingGif: "C:\\refreshie\\app\\assets\\images\\install.splash.gif",
            iconUrl: "C:\\refreshie\\app\\assets\\refico.ico",
            setupIcon: "C:\\refreshie\\app\\assets\\refico.ico",
            signWithParams: "/a /f C:\\refreshie\\app\\build\\tools\\cert.signingkey.pfx /p F5",
            noMsi: true
        }
    }
    });
    grunt.registerTask('default', ['create-windows-installer']);
};

Answer 2

Currently, the best way to do electron auto-update is using electron-builder.

npm install electron-builer –save-dev

npm install electron-updater –save

For demo purpose, get http-server as you web host server.

npm install http-server –save

Build package is very simple, create two folder "build" and "dist", then Add this in package.json script and run

"scripts": {
   "start": "set NODE_ENV=dev&& tsc && concurrently \"npm run tsc:w\" \"electron .\" ",
   "tsc": "tsc",
   "tsc:w": "tsc -w",
     ;
   "dist": "build -w --x64",
   "wb": "http-server wwwroot/ -p 8080",
      ;
 },

npm run dist

for auto updater, create a folder wwwroot and assume that is your web host server and to start your web site as:

npm run wb

copy verything from dist folder to wwwroot folder.

Ok done that.

Please see here for full detail code

Answer 3

Please follow the steps to achieve the electron js auto-update code working.

1. npm install electron-updater (For using auto-updater)
2. npm install electron-log (This will help to see the errors in logs)
3. npm install electron --save-dev
4. npm install electron-builder --save-dev

Then, in your main.js (the entry file of your application paste auto update code at as mentioned)

const electron = require('electron');
const url = require('url');
const path = require('path');
const pjson = require('../package.json')

// auto update code
const log = require('electron-log');
const { autoUpdater } = require("electron-updater");
autoUpdater.logger = log;
autoUpdater.logger.transports.file.level = 'info';
log.info('App starting...');
let appversion = pjson.version;

const { app, BrowserWindow } = electron;

let homePageWindow;

function sendStatusToWindow(text, ver) {
    log.info(text);
    homePageWindow.webContents.send('message', text, ver);
}

function createDefaultWindow() {
    homePageWindow = new BrowserWindow({
        minimizable: true,
        maximizable: true,
        closable: true,
    });
    homePageWindow.maximize();
    homePageWindow.webContents.openDevTools();
    //homePageWindow.setMenu(null);

    homePageWindow.on('closed', () => {
        homePageWindow = null;
        app.quit();
    });

    homePageWindow.loadURL(url.format({
        pathname: path.join(__dirname, '../webFiles/homePage.html'),
        protocol: 'file:',
        slashes: true


   }));
    return homePageWindow;
}

// auto update conditions
autoUpdater.on('checking-for-update', () => {
    sendStatusToWindow('Checking for update...', appversion);
})

autoUpdater.on('update-available', (info) => {
    sendStatusToWindow('Update available.', appversion);
})

autoUpdater.on('update-not-available', (info) => {
    sendStatusToWindow('Update not available.', appversion);
})

autoUpdater.on('error', (err) => {
    sendStatusToWindow('Error in auto-updater. ' + err, appversion);
})

autoUpdater.on('download-progress', (progressObj) => {
    let log_message = "Download speed: " + progressObj.bytesPerSecond;
    log_message = log_message + ' - Downloaded ' + progressObj.percent + '%';
    log_message = log_message + ' (' + progressObj.transferred + "/" + progressObj.total + ')';
    sendStatusToWindow(log_message, appversion);
})

autoUpdater.on('update-downloaded', (info) => {
    setTimeout(function () {
        sendStatusToWindow('Update downloaded..Restarting App in 5 seconds', appversion);
        homePageWindow.webContents.send('updateReady');
        autoUpdater.quitAndInstall();
    }, 5000)
});

app.on('ready', function () {
    createDefaultWindow();
    autoUpdater.checkForUpdatesAndNotify();
});

app.on('window-all-closed', () => {
    app.quit();
});

Refer to my code and do the needful changes in your main.js

Then set the version of your application to say 1.0.0 Run command "npm run build --win -p always" to generate first build

I use Github to store the apps components. So, you need to upload the app files of 1.0.0 (latest.yml, builder-effective-config.yaml, app_setup1.0.0.exe, app_setup1.0.0.exe.blockmap file) on git and create a release for it. Publish the release as 1.0.0

Then change the version of the app to 1.0.1 Run command "npm run build --win -p always" to generate second build.

Again do the github step - you need to upload the app files of 1.0.1 (latest.yml, builder-effective-config.yaml, app_setup1.0.1.exe, app_setup1.0.1.exe.blockmap file) on git and create a release for it. Publish the release as 1.0.1

So now in your project on git you have 2 releases 1.0.0 and 1.0.1

Now for testing the things you need to run the setup of 1.0.0 on your local machine. So, if the code is written correctly you will see logs that 1. Update available 2. Update downloaded and its %

Then once 100% download is completed the app gets restarted in 5 seconds (as per seconds mentioned in the code) and your app is updated now. Yayyyyyyyyy