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:
const { app, BrowserWindow } = require('electron')
function createWindow() {
const win = new BrowserWindow()
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
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:
const { app, BrowserWindow } = require('electron')
const fs = require('fs')
const text = fs.readFileSync('./foo.txt')
function createWindow() {
const win = new BrowserWindow()
console.log(text.toString())
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
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:
npm install --save-dev electron-rebuild
Then we can run:
./node_modules/.bin/electron-rebuild
to rebuild native modules.
We can also run:
.node_modules.binelectron-rebuild.cmd
on Windows to do the same thing.
We can also set some environment variables to install NPM modules directly.
For instance, we can write:
export npm_config_target=1.2.3
export npm_config_arch=x64
export npm_config_target_arch=x64
export npm_config_disturl=https://electronjs.org/headers
export npm_config_runtime=electron
export npm_config_build_from_source=true
HOME=~/.electron-gyp npm install
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:
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using node
<script>document.write(process.versions.node)</script>,
Chrome
<script>document.write(process.versions.chrome)</script>,
and Electron
<script>document.write(process.versions.electron)</script>.
<script>
const notification = new Notification('Title', {
body: 'hello world'
})
notification.onclick = () => {
console.log('Notification clicked')
}
</script>
</body>
</html>
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.
