Electron — Architecture and Notifications

Image for post
Image for post
Photo by Jamie Street on Unsplash

Electron is a framework that lets us create cross-platform desktop apps.

The apps are created by creating web apps that are wrapped with a wrapper.

In this article, we’ll look at the architecture and notifications of an Electron app.

Main and Renderer Processes

An electron app runs on a main and rendered process.

The main process creates the GUI.

The rendered process is the process that Chromium runs on to render the content.

Electron has the power to use Node APIs to allow lower-level operating system operations.

The main process creates a web page with a BrowserWindow instance.

The BrowserWindow instance runs on its own rendered process.

When the BrowserWindow instance is destroyed, the rendered process is also terminated.

Using Electron APIs

We can use Electron’s APIs to do some operations.

For instance, we would use the BrowserWindow API to create the window.

Our Electron project has a main.js file to draw the window:

We create a BrowserWindow instance and call loadFile on it to load a web page in the window.

Node.js APIs

We can use Node.js APIs in addition to Electron APIs.

For instance, we can use the fs module by writing:

We called readFileSync to read a foo.txt file and the content will show up in the console log.

Using Native Node Modules

We can use native Node modules if we compile them against the V8 version of the Node binary that’s installed in our system.

Otherwise, we’ll get errors because of incompatible V8 versions.

We can use the electron-rebuild package to build our native modules.

To use it, we install the package by running:

Then we can run:

to rebuild native modules.

We can also run:

on Windows to do the same thing.

We can also set some environment variables to install NPM modules directly.

For instance, we can write:

We set the Electron’s version in the first line.

The architecture is set in the 2nd and 3rd line

The headers for Electron are downloaded by setting the npm_config_disturl environment variable.

Then we tell node-pre-gyp to build for Electron and install all dependencies in the last 3 lines.

Add Notifications

We can add notifications in our Electron app by creating one with the Notification constructor.

The constructor can only be run in the renderer process, so we should put it in our web page.

For example, we can write:

We created the notification object with the Notification constructor.

The first argument is the title.

The 2nd is an object with the body property which has the content.

onclick lets us handle clicks on the notification.

More advanced notifications like toasts and tile notifications are also available.

Conclusion

We can compile native modules and use them in our Node apps.

Also, we can add notifications with the Notification constructor in the renderer process.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store