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.

let options = {
    body: 'Notification Body'
};
new Notification('Notification Title', options);

Besides title and 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.

Implement handlers

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. onclick, onshow or 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.

let options = {
    body: 'Notification Body'
};
let notification = new Notification('Notification Title', options);
notification.onclick = () => {
    console.log('user clicked notification');
};
notification.onclose = () => {
    console.log('notification closed');
};

// ...

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 1.

public notifiy() {
    let options = {
        body: `Hello, this is ${this.hero.name} speaking`
    };
    let notification = new Notification('Hero Notification', options);
    notification.onclick = () => {
        this.hero.level ++;
    };
}

// ...

Here the corresponding template associated to the component.

<span>{{hero.level}}</span>

Fortunately, Angular 2 provides already a perfect solution for scenarios like this. NgZone from @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.

import { Component, NgZone } from '@angular/core`;

@Component({})
export class HeroComponent {

  constructor(private _zone: NgZone) {
  }
}

That said, easy refactorings are applied to the existing codebase. Remember the onclick handler we created above?

Change it to use runOutsideAngular and run offered by the NgZone instance (this._zone) and native desktop notifications are ready to enhance user experience a lot.

notification.onclick = () => {
  this._zone.runOutsideAngular(() => {
    this.hero.level ++;
    this._zone.run(()=>void 0);
   });
};

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.