ngx-push-notifications

Push notifications for PWA using Service Workers in Angular

Edit: Updated to Angular 7

Official Push API documentation is here Mozilla developer network.

Installation

To install this library, run:

npm install ngx-push-notifications --save

Setup

Import the PushNotificationService into your AppModule

import { PushNotificationService } from 'ngx-push-notifications';

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [PushNotificationService],
	bootstrap: [...]
})
export class AppModule { }
...

Now import the PushNotificationsService and PushNotificationOptions in your component where you want to use it:

import { PushNotificationOptions, PushNotificationService } from 'ngx-push-notifications';
...
constructor(private _pushNotificationService: PushNotificationService) { }
...

Requesting Permission

To request permission from the user to display push notifications call the requestPermission() method of PushNotificationsService.

ngOnInit() {
  this._pushNotificationService.requestPermission();
}

You can also check if permission was already granted previously.

const isGranted = this._pushNotificationService.isPermissionGranted;

Pushing a Notification

Example:

myFunction() {
    const title = 'Hello';
    const options = new PushNotificationOptions();
    options.body = 'Native Push Notification';

    this._pushNotificationService.create(title, options).subscribe((notif) => {
      if (notif.event.type === 'show') {
        console.log('onshow');
        setTimeout(() => {
          notif.notification.close();
        }, 3000);
      }
      if (notif.event.type === 'click') {
        console.log('click');
        notif.notification.close();
      }
      if (notif.event.type === 'close') {
        console.log('close');
      }
    },
    (err) => {
         console.log(err);
    });
}

A notification will raise events at each stage which you can handle.

Options

Options that can be passed to the options parameter:

export declare class PushNotificationOptions {
    body: string;
    icon: string;
    sound: string;
    data: any;
    tag: string;
    dir: NotificationDirection;
    lang: string;
    renotify: boolean;
    sticky: boolean;
    vibrate: Array<number>;
    noscreen: boolean;
    silent: boolean;
}

Options are the same as the Notification API in Mozilla developer network.

Your feedback is important

by silveridea