In electron applications, HTML5 Notification API is essential to keep users informed. Electron is bridging incoming calls to the HTML5 notification API to native notification APIs offered by all supported platforms.
Create a notification
It’s straight forward to create new notifications. An instance of the
Notification class is all you need. In the most basic shape, a notification consists of a
title. Additional metadata could be provided by providing a object as second parameter to the
Notification constructor, as demonstrated below with
body, more properties are available. You use hose, to control the look and feel of desktop notifications.
I want to highlight the
data for now.
data is used to pass data from the electron application to the native desktop notification. “This”
data can be forwarded from the notification itself to any other piece in the application by a simple handler. The entire HTML5 Notification API specification, including more samples is located here.
A handler is required to respond to user interaction. Technically a handler is just a
function being executed for every time a certain event triggers.
onhide are self-explaining handlers being exposed by the HTML5 Notification API. To implement a
click handler, change the previously created snippet to match the following one.
Native Notifications and Angular 2
Notifiations are native platform features. Those are displayed and handled outside of Angular 2, but once the user responds to the notification by clicking on it, Angular needs to get informed.
The following snippet combines HTML5 Notification API with basic Angular 2 stuff. Imagine
hero to be a valid instance, bound to the component template. Once the user clicks the notification,
level from the
hero instance will be incremented by
Here the corresponding template associated to the component.
Fortunately, Angular 2 provides already a perfect solution for scenarios like this.
@angular/core is used to trigger change detection manually. Review the public API offered by
NgZone, it’s self-explaining and well documented.
First, request an instance of
NgZone by asking Angular’s mighty dependency injection implementation.
That said, easy refactorings are applied to the existing codebase. Remember the
onclick handler we created above?
Change it to use
run offered by the
NgZone instance (
this._zone) and native desktop notifications are ready to enhance user experience a lot.
What you’ve learned
Okay that was impressive. The simple API provided by HTML5 was used by the electron team to wrap existing, complex operating system APIs. You managed it to create, enhance and even integrate native desktop notifications inside of electron apps. In addition, the wonderful API of
NgZone made it easy to ensure a smooth integration in Angular 2.
Do you have more ideas? Or do you want to use this sample as a starting point? That’s great. Grab the implementation here on GitHub. You’ve never used GitHub’s electron before? No problem, there is my definitive guide on Angular 2 and Electron already waiting for you.