The problem of Electron automatically updating under Windows system, which has been bothering for many days, has finally been solved. The following is the process of filling the hole. This tutorial only applies to the following conditions, the use of conditions outside, such as the use of other packaging methods, may not be applicable to this tutorial, careful!

1. System: 2. Using Electron-Boilerplate-Vue scaffolding, where Electron is V1.2.1, Vue is v1.0.25 3, use electron-packager and grunt-electron-installer as installation files, and Squirrel.Windows 4, please install vs2015 first and configure system variables. Ensure the installation environment of Squirrel.Windows

Start this tutorial

Note: This article is not suitable for beginners to Electron, you need to have some understanding of Electron, the relationship between Electron main process and renderer process, and you need to know how to pack Electron.

(Take the example of a Windows 64-bit installation package that is automatically updated)

————-> Step 1:

First of all, make sure your project has Electron-packager installed, because we will use Electron-packager for the first step of packaging. If not, please install Electron-packager, and there will be a command like this in the script of package.json in the project root directory with the version number. Please read the Electron-packager instructions for specific command writing requirements.

See orange in the image below

Note the additional fields of package.json — productName, author, and description — which are not required for packaging, but are used in Squirrel.Windows. After meeting the above requirements, execute CNPM Run-Script Packager64 in Gitbash

After the execution is complete, a folder outApp (as I asked in the command) will be generated in the root of the project. The file name in the folder is called Client-Win32-x64 (also as I asked in the command). Double-click the file Client.exe.

NPM install electron-squirrel-startup NPM install electron-squirrel-startup grunt-electron-installer NPM install electron-squirrel-startup NPM install -g grunt-cli NPM install grunt-electron-installer –save-dev NPM install -g grunt-electron-installer NPM install -g grunt-electron-installer –save-dev Create gruntfile.js and gruntpackage. json in the root directory of the project, containing the code gruntfile.js respectively:

var grunt=require('grunt'); Init ({PKG: grunt.file.readJSON(' gruntpackage. json'), 'create-Windows-installer ': {x64: {version: "1.0.0", the authors: 'JXB - XL, projectUrl: "', // outputDirectory:'./ outputDirectory:'./OutPut'./ / outputDirectory:'./OutPut'./ / exe:' client.exe '. description:'Client', setupIcon:"./app/assets/icon/jxb.ico", noMsi:true } } }); // Load tasks Grunt.loadNPMTasks ('grunt-electron-installer'); // Set it to the default grunt.registerTask('default', [' create-Windows-installer ']);

See the Grunt documentation for configuration details

GruntPackage. Json:

{" name ":" the Client ", "version" : "1.0.0", "devDependencies" : {" grunt ":" ^ 1.2.0 ", "grunt - electron - installer" : "^ 2.1.0"}}

————-> Step 3: Add the following code to the JS of your main process and call the function

Const electron = require('electron') // autoUpdater const autoUpdater = electron.autoUpdater function startupEventEventle (){ if(require('electron-squirrel-startup')) return; var handleStartupEvent = function () { if (process.platform ! == 'win32') { return false; } var squirrelCommand = process.argv[1]; switch (squirrelCommand) { case '--squirrel-install': case '--squirrel-updated': install(); return true; case '--squirrel-uninstall': uninstall(); app.quit(); return true; case '--squirrel-obsolete': app.quit(); return true; } function install() {var cp = require('child_process'); var updateDotExe = path.resolve(path.dirname(process.execPath), '.. ', 'update.exe'); var target = path.basename(process.execPath); var child = cp.spawn(updateDotExe, ["--createShortcut", target], { detached: true }); child.on('close', function(code) { app.quit(); }); } // Uninstall function uninstall() {var cp = require('child_process'); var updateDotExe = path.resolve(path.dirname(process.execPath), '.. ', 'update.exe'); var target = path.basename(process.execPath); var child = cp.spawn(updateDotExe, ["--removeShortcut", target], { detached: true }); child.on('close', function(code) { app.quit(); }); }}; if (handleStartupEvent()) { return ; }} function updateHandle(){ipc.on('check-for-update', function(event, arg) {let appName='400 '; let appIcon=__dirname + '/assets/jxb.ico'; Let message={error:' checking for updates ', checking:' checking for updates... ', Updateava :' Downloaded and updated ', 'Updateava :' Now use the latest version, do not need to update it ',' Downloaded :' The application will be updated after restarting the application '}; const os = require('os'); const {dialog} = require('electron'); AutoUpdater. SetFeedURL (' server address of the folder where the latest version of the file is placed '); autoUpdater.on('error', function(error){ return dialog.showMessageBox(mainWindow, { type: 'info', icon: appIcon, buttons: ['OK'], title: appName, message: message.error, detail: '\r'+error }); }) .on('checking-for-update', function(e) { return dialog.showMessageBox(mainWindow, { type: 'info', icon: appIcon, buttons: ['OK'], title: appName, message: message.checking }); }) .on('update-available', function(e) { var downloadConfirmation = dialog.showMessageBox(mainWindow, { type: 'info', icon: appIcon, buttons: ['OK'], title: appName, message: message.updateAva }); if (downloadConfirmation === 0) { return; } }) .on('update-not-available', function(e) { return dialog.showMessageBox(mainWindow, { type: 'info', icon: appIcon, buttons: ['OK'], title: appName, message: message.updateNotAva }); }) .on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) { var index = dialog.showMessageBox(mainWindow, { type: 'info', icon: appIcon, buttons: [' Restore now ',' Restore later '], title: appName, message: message.downloaded, detail: Releasename + "\n\n" + Releasenotes}); if (index === 1) return; autoUpdater.quitAndInstall(); }); autoUpdater.checkForUpdates(); }); }

————-> Step 4:

/ / nupkg/nupkg/nupkg/nupkg/nupkg/nupkg/nupkg/nupkg/nupkg/nupkg/nupkg/nupkg/nupkg/nupkg/nupkg/nupkg/nupkg

So far, 1.0.0 version of the installation file has been done, double-click the EXE file, popup green installation animation, can not choose the installation directory, will automatically install in C:\Users\Administrator\AppData\Local, after the installation of the animation disappeared, and automatically created a shortcut

————-> Step 5:

As of now, the lower version of the desktop application is packaged and installed. I put the version number on the page and you can see that it is version 1.0.0

So how do you update to the new version?

Here’s how:

1. Modify the version information, including gruntfile.js, gruntpackage. json, package.json, and change it to 1.0.1, then start from the first step until the fourth step. Once you have the 1.0.1 files (release, exe, nupkg), upload them to the server address of the folder where the latest files are placed. Yes, this is the corresponding autoUpdater. SetFeedURL in the main process js (step 3).

2. Restart the 1.0.0 Desktop application and click Check for Update (here, I’m using IPC, that is, the renderer process sends a message to the main process and the main process listens for ‘Check-for-Update’, IPC. on(‘check-for-update’, function(event, arg) {})).

3. The following Windows will pop up:

Click Restart Now, it will automatically close version 1.0.0 and open version 1.0.1. After opening it, you will find that the update has been successful

Click Check for Update again, and it pops up

Open the installation directory again, you will find that there is a 1.0.1 folder

You can use Node to delete the previous 1.0.0 folder after the automatic update is successful. End of automatic update!

The principle of

Quote from https://github.com/Squirrel/S… 1, according to the set setFeedURL path, UpdateManager check under the path of the RELEASES files, and install the RELEASES files in the directory. 2. In case of different versions, the update package in the path will be downloaded. After downloading, the update will be automatically carried out (including modifying the shortcut and clearing the old version). 3. After the update is successful, the previous version will be retained and all previous versions will be cleared.

Refer to the article

From scratch using Electron + jQuery development desktop application (2) packaged application https://segmentfault.com/a/11… [translation] Electron automatic update complete tutorial (Windows and OSX) https://segmentfault.com/a/11…

pit

Cannot find Squirrel. This is because the desktop application is not installed and must be installed before the check update is performed

This is because after the first installation, some of the installation files have not been quit yet, so try to check the update one minute after the installation is finished. This problem does not occur after an automatic update, but only after the initial installation.

3, Your exe file name cannot contain a number, otherwise it will also report an error.

4, Some students said that after the installation check update error: Cannot find module ‘electron-squirrel-startup’, Cannot find module ‘electron-squirrel-windows’, Cannot install squirrel.Windows, Cannot install squirrel.Windows, Cannot install squirrel. Need VS2015 environment (VS2015 needs to download and install, the installation will take up a few G C disk space, please ensure that C disk has enough space. Please set system variables after installation, that is, add C:\Program Files (x86)\MSBuild\14.0\Bin under PATH

5, replaced the office computer, the system into Win10, re-download the installation environment found that if the existing project version is higher than the project version on the server, it will automatically update the failure, Squirrel file in the installation directory of disk C shows ‘local version is greater than remote version’