By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reprinted in full, but with the written permission of the original author, while retaining the original author and source, the abstract drainage is optional.

Normally, the files generated by electron packaging are very large, ranging from 40 to 50M. If you have to download the full version every time you change and upgrade, it is actually very annoying.

In fact, as long as the main thread doesn’t change, we can thermal update our electron application directly online.

I. Preview of thermal update effect of ELECTRON

The following pictures are the screenshots of the electron application with hot update function that I implemented:

If the electron application is opened, it will check whether there is a new version on the line. For example, if the local version is 1.2.2 and the online version is 1.2.4, the following message will be displayed:

Click “New version” to display the update description of the latest version. For example, the pop-up message appears after clicking here:

Click the red “Upgrade” button to directly request the online resource to replace the local resource and complete the upgrade (the page will be refreshed after the upgrade is successful). Please refer to the following GIF screenshot for the upgrade effect:

Ii. Description of thermal update principle of ELECTRON

1. I directly use Github as an online resource repository

When use domain raw.githubusercontent.com as request, we can direct access to resources content, for example, we want to obtain a path for the js/test. The js file, the file complete address is:

https://raw.githubusercontent.com/username/project-name/master/js/test.jsCopy the code

At this point, we can use node.js’s HTTPS. Get () method to get the complete contents of the js/test.js file.

2. I did it with the help ofpackage.jsonTo mark versions and updates

The main reason for using package.json is the conventional version keyword. If the local version of the user is lower than the version on github, it means that the user can upgrade.

Then, the upgrade file list is integrated with the update information, and there is a complete upgrade data, as shown in the screenshot below:

3. Description of thermal update principle of ELECTRON

Every time our electron loading is completed, we will send a request to obtain the package.json file on Github, mainly to know the current online version, and then compare it with the version data of the local package.json file. If inconsistent versions are found, a new version is available to upgrade, so the interface looks like this:

When we click on the “upgrade” button, the higher than the local version of the need to update the files to integrate into a new complete update file list, then in turn out remote access, and stored in a temporary folder, if all the documents to be successful, then cover along with all the local resources, covering all completed, refresh the page to complete the upgrade.

So that’s how the upgrade works.

Three, electron thermal update some code implementation

The biggest difficulty of the electron thermal update should be how to obtain remote resources. I have briefly sorted it out, hoping it can be helpful for those who need it. Since ES6 doesn’t spend much time learning, therefore, related JS grammar is ES5:

var https = require('https'); Var getHttpsData = function (filepath, success, error) {/ / callback when the default processing success = success | | function () {}; error = error || function () {}; var url = 'https://raw.githubusercontent.com/username/project-name/master/' + filepath + '?r=' + Math.random(); https.get(url, function (res) { var statusCode = res.statusCode; if (statusCode ! == 200) {// Error callback error(); // Consume response data to free memory res.resume(); return; } res.setEncoding('utf8'); var rawData = ''; res.on('data', function (chunk) { rawData += chunk; }); Res.on ('end', function () {// Success (rawData); }). On ('error', function (e) {// error(); }); }); };Copy the code

Then, simply write the requested data to the local directory, for example, an index. HTML file:

GetHttpsData ('index.html', function (data) {// Write to fs.writefilesync ('index.html', data); // Then the next file gets and writes... });Copy the code

With some loading interactive effects, the complete online hot update function is completed.

Fourth, concluding remarks

Last Saturday, I attended Tencent 2017 TFC Front-end Conference as a guest, many of which shared theme content was actually good, but the effect was mediocre. I mainly made the following common mistakes in large sharing: 1. The PPT text is too small, and there are large pieces of code. In large meetings, the contents in the back row cannot be seen at all, so I can only play with my mobile phone, which is different from sharing in teams or colleges. 2. The content of sharing should be a regular and orderly statement, which is different from the promotion report. It should be like a movie. 3. Some is not suitable for a large share of small skills, for example, how do I how to put up your hands, if it is small and medium-sized share, or the current atmosphere is good, these skills will help increase the interaction, but in such a broad field, and most people under the condition of the audience is not very focused, this strategy is embarrassed, because a problem out interactive scenario will not expected. Therefore, it is best to present yourself through one-way gestures, tone of voice, diction, and content.

Finally, here is a handsome photo:

This article is an original article, and it will often update knowledge points and correct some mistakes. Therefore, please keep the original source for reprinting to facilitate traceability, avoid the misleading of old wrong knowledge and have a better reading experience. This paper addresses: www.zhangxinxu.com/wordpress/?…

// Want a tip? Click here. Got something to say? Click here.

x