Code Monkey home page Code Monkey logo

ngx-push-notifications's Introduction

This project is deprecated and is no longer actively maintained

ngx-push-notifications

Push notifications for PWA using Service Workers in Angular

Edit: Updated to Angular 7

NPM Version NPM Downloads

Official Push API documentation is here Mozilla developer network.

and here Google Developers

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.