Dmitry Sheiko [Dmitry Sheiko] - Cross-Platform Desktop Application Development: Electron, Node, NW.js, and React

Built-in capacities for auto updates is one of Electron's most prominent advantages over NW.js. Electron's autoUpdater module ( http://bit.ly/1KKdNQs ) utilizes the Squirrel framework ( https://github.com/Squirrel ), which makes silent possible. It works nicely in conjunction with the existing solution for multiplatform release servers; in particular, one can run it with Nuts ( https://github.com/GitbookIO/nuts ) using GitHub as a backend. We can also quickly set up a fully-featured node server based on electron-release-server ( https://github.com/ArekSredzki/electron-release-server ), which includes release management UI.

For the sake of brevity, we will walk through a simplified autoupdate approach that doesn't require a real release server, but only requires access to static releases via HTTP.

We start by installing the package:

Now, we add to the manifest's build field--publish property:

Here, we state that our dist folder will be available publicly on 127.0.0.1:8080, and we go on with the generic provider. Alternatively, the provider can be set to Bintray ( https://bintray.com/ ) or GitHub.

We modify our main process script to take advantage of the electron-updater API--./app/main.js:

Basically, we subscribe for the autoUpdater events and report them to the renderer script using the send function. When update-downloaded is fired, we send the update- downloaded event to the renderer. The renderer on this event supposedly reports to the user about a newly downloaded version and asks whether it would be convenient to restart the application. When confirmed, the renderer sends the restart event. From the main process, we subscribe to it using ipcMain ( http://bit.ly/2pChUNg ). So, when reset is fired, autoUpdater restarts the application.

Note that electron-debug won't be available after packaging, so we have to remove it from the main process:

Now, we make a few changes to the renderer script--./app/index.html:

In HTML, we add the element with ID statusbar, which will print out reports from the main process. In JavaScript, we subscribe for main process events using ipcRenderer ( http://bit.ly/2p9xuwt ). On the info event, we change the content of the statusbar element with the event payload string. When update-downloaded occurs, we call confirm for the user opinion about a suggested restart. If the result is positive, we send the restart event to the main process.

Eventually, we edit CSS to stick our statusbar element in the left-bottom corner of the viewport--./app/assets/css/custom.css:

Everything is done; let's rock it! So, we first rebuild the project and release it:

We make the release available through HTTP using http-server ( https://www.npmjs.com/package/http- server ):

We run the release to install the application. The application starts up as usual because no new releases are available yet, so we release a new version:

Now, we will start our previously installed release and this time, we will observe the autoUpdater reports in statusbar. As the new release is downloaded, we will get the following confirmation window:

After pressing OK , the application closes and a new window showing the installation process pops up:

When it's done, start the updated application. Note that the footer now contains the latest released version:

We have a static prototype, and now we will make it functional. Any chat requires communication between connected clients. Usually, clients do not connect directly but through a server. The server registers connections and forwards the messages. It's pretty clear how to send a message from the client to server, but can we do it in the opposite direction? In the olden days, we had to deal with long-polling techniques. That worked, but with the overhead of HTTP, it is not really suitable when we mean a low latency application. Luckily for us, Electron supports WebSockets. With that API, we can open a full-duplex, bi-directional TCP connection between the client and server. WebSockets provides higher speed and efficiency as compared to HTTP. The technology brings reduction of upto 500:1 in unnecessary HTTP traffic and 3:1 in latency ( http://bit.ly/2ptVzlk ). You can find out more about WebSockets in my book