Native Web Push Notifications with Angular 2

“The Notifications API allows web pages to control the display of system notifications to the end user — these are outside the top-level browsing context viewport, so therefore can be displayed even the user has switched tabs or moved to a different app. The API is designed to be compatible with existing notification systems across different platforms.”

— Mozilla

The Notifications API has been available for some browsers for a while now, and with Angular 2’s recent promotion to Release Candidate (yay!), I thought bringing this powerful API to the Angular world in the form of a library, would make this API more accessible and reusable for developers. Enter ng2-notifications.

Demo

In the following demo, notifications can be customized and displayed using ng2-notifications. Give it a try!

Getting Started

npm install ng2-notifications --save

The import statement can be included in any Angular 2 component.

import { PushNotificationComponent } from 'ng2-notifications';

@Component({
 ...
 directives: [PushNotificationComponent]
})

Now the notification directive can be used inside the component’s template, like this:

<push-notification 
  title="Getting Started"
  body="A simple npm install can get you there"
  icon="https://goo.gl/3eqeiE">
</push-notification>

The Syntax

One of Angular 2’s most powerful features is its declarative markup. With ng2-notifications, a push notification can be written in Angular 2 with the use of literals or my personal favorite; data binding.

<push-notification 
  title="notification.title"
  body="notification.body"
  icon="notification.icon">
</push-notification>

Where in the component’s class, a notification property would look like this:

export class AppComponent {
  public notification: any = {
    title: 'New Angular 2 Library!',
    body: 'ng2-notifications',
    icon: 'https://goo.gl/3eqeiE'
  };
}

Not too bad, huh?

Other data properties include:

{
  tag: string, // optional, no default value
  dir: string, // defaults to 'auto', options: ['ltr','rtl']
  data: any,   // optional, no default value
  lang: string // defaults to browser's language, ['en-US', ...]
}

Building the Library

The ng2-notifications library is just a wrapper for the native Web Notifications API. It abstracts and simplifies the process of requesting the user’s permission for notifications and exposes a predictable and easy to use API in the form of an Angular 2 Component.

@Directive({
  selector: 'push-notification'
})

You may wonder, why not use a component instead? Well, a component is just a directive + a view, and in this case a view is not required since the UI is completely handled by the browser. That’s one of the reasons why notifications will look slightly different in every browser.

Additionally, the library adds two useful properties: [closeDelay] and [when]. The close delay does exactly what you are thinking, it closes the notifications after x amount of milliseconds. The when property is used to activate the notification given a boolean expression. Think of it as an "ng-show".

Understanding Angular 2’s Directive lifecycle is crucial for showing and closing notifications at the right time: when the directive compiles, when data properties changes and when the directive is removed from its parent component.

import {
  Directive,
  EventEmitter,
  OnInit,
  OnChanges,
  OnDestroy,
  Input,
  Output
} from ‘@angular/core’;

From the import statement above we can see three very important Angular APIs that can help us hook into certain Directive’s states by implementing these into our Directive’s class definition.

export class PushNotificationComponent implements 
  OnInit, OnChanges, OnDestroy {
    ...
}

By looking at Angular 2’s new Directive API, it was obvious the @Input and@Output API could be leveraged for bidirectional communication. Some of the inputs and outputs can be defined in the following manner:

@Input() public title: string;
@Input() public body: string;
@Input() public icon: string;

@Output() public onClick: EventEmitter<any> = new EventEmitter();
@Output() public onClose: EventEmitter<any> = new EventEmitter();

These inputs and outputs are what enables us to read the data properties and execute callbacks after events fire. The latter can be expressed like this on the markup side:

<push-notification 
  ...
  (action)="notification.action($event)">
</push-notification>

These are just a few of the crucial parts for building a Directive in Angular 2. For the full source code, check out the project on GitHub.

View on GitHub