Showing Native Windows Notifications from Electron Using NodeRT

  • October 30, 2016
  • Views

     6,162

Electron enables JavaScript developers to easily develop cross-platform apps using existing JavaScript and Node.js libraries. While the main premise of Electron is the ability to run the same JavaScript code on different desktop platforms, in certain scenarios, developers might find it necessary to use native and specific OS capabilities to improve the user experience of their app.

We recently engaged with Slack, who develop their desktop app using Electron, to enable better integration of Windows native toast notifications.

The Problem

Currently, Electron supports basic toast notifications on Windows. However, the current implementation is limited to the general multi-platform notifications API and does not support deeper native integration with the notification center and the latest Windows 10 notifications features.

For instance, the existing Electron notifications API does not support the ability to use the new adaptive notification layout or show interactive notifications with action buttons, as seen in the image below:

Interactive Toast notification of an event invite with action buttons to 'RSVP' or 'Remind me later'

While the Univeral Windows Platform (UWP) APIs can be called from JavaScript UWP apps and Node Chakra via the node-uwp module, until very recently, there was no way to access them directly from the standard Node.js and Electron implementations.

The Solution

We have re-published NodeRT, which enables Node.js and Electron devs to access the entire UWP API stack directly from JavaScript.

NodeRT exposes the UWP APIs by automatically generating native add-ons via reflection over the UWP metadata (WinMD) files:

NodeRT modules generation

We can then use the windows.ui.notifications NodeRT module to call the full UWP notifications API from Electron or any JavaScript application that supports node.js modules. (In general, NodeRT modules are available in npm under the nodert-win10 scope)

To make the UWP notifications APIs more accessible to Electron devs and to encapsulate some of the UWP-specific semantics, the electron-windows-notifications module was developed.

With this module, native Windows notifications can be shown by using only few lines of JavaScript:

const appId = 'electron-windows-notifications'
const {ToastNotification} = require('electron-windows-notifications')

let notification = new ToastNotification({
    appId: appId,
    template: `%s`,
    strings: ['Hi!']
})

notification.on('dismissed', () => console.log('Dismissed!'))
notification.show()

The sample code results in a simple text notification and logging when the user dismisses the notification by pressing the X button.

The appId, or AppUserModelIDs, parameter is the application identifier that Windows uses to link the notification to the app. You can easily set it from Electron by calling the app.setAppUserModelId method.

The template parameter defines the visual look of the notification and should contain a string in the format of an XML toast notification.

The template may contain Node.js string format symbols (like %s,%d,%j), which are replaced using the util.format function according to the contents of the strings param.

Electron sample app

Alongside the module, we also provide an Electron sample app which demonstrates how different notification types can be called and handled.

To run the app, you can follow the instructions in the repository.

Tile Notifications

In addition to supporting notifications, electron-windows-notifications also supports Tile Notifications, as well as Secondary Tile Notifications, using a similar API to the toast notifications API.

Since tile notifications are currently only available for UWP/Windows Store apps, you’ll need to run your Electron app using the Windows Store Electron bridge.

Alternative Solution

An alternative solution would be to use the popular Edge.js module to call the notifications using the Universal Windows Platform (UWP) C# API from Node.js. While this approach will certainly work, it does have some drawbacks. For instance, this will cause the app to host an instance of the CLR which might increase the memory footprint of the app. Additionally, the Edge.js module evaluates and compiles C# code during the execution of the app, a process that can fail when there is an issue with the local environment’s CLR.

Opportunities for Reuse

The electron-windows-notifications module leverages NodeRT modules and provides developers with an easy and intuitive way to create toast notifications on Windows.

The module was designed to run in Electron and provides developers with the full capabilities of the Windows UWP APIs, and the ability to deliver a great user experience with Electron on Windows.

We hope that you will find this work useful, and we’ll be happy to hear any feedback or issues that you find regarding the module.

Related Articles

Leave a reply

Your email address will not be published. Required fields are marked *

2019-04-11 09:06:53

Carmine says:

Hi, i'm trying this, it's seems to works but when i click on a notifications, it will open a new application widows