ng-push
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.2 • Public • Published

    ng-push

    An Angular wrapper around the Notifications API

    Build Status NPM Version NPM Downloads

    If you arn't familiar with push notifications you can read more about them on the Mozilla developer network.

    Installation

    To install this library, run:

    $ npm install ng-push --save

    Setup

    Import the PushNotificationsModule in to your AppModule

    @NgModule({
        imports: [PushNotificationsModule],
        declarations: [AppComponent],
        bootstrap: [AppComponent]
    })
    export class AppModule { }

    Now import the PushNotificationsService where you want to use it:

    constructor( private _pushNotificationsPushNotificationsService ) {}

    Requesting Permission

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

    Create Notification

    You can create a permission calling the create(title: string, options: PushNotification) method, like this:

    this._push.create('Test', {body: 'something'}).subscribe(
                res => console.log(res),
                err => console.log(err)
            )

    The create() method returns an observable that emits the notification and the event when ever a show, click, close or error event occurs.

    If you don't have permission to display the notification then the Permission not granted error will be thrown.

    Options

    The following are options that can be passed to the options parameter:

    interface PushNotification {
        body?: string
        icon?: string
        tag?: string
        renotify?: boolean
        silent?: boolean
        sound?: string
        noscreen?: boolean
        sticky?: boolean
        dir?: 'auto' | 'ltr' | 'rtl'
        lang?: string
        vibrate?: number[]
    }

    Options correspond to the Notification interface of the Notification API: Mozilla developer network.

    Examples

    Registering to click event

    this._pushNotifications.create(
        'Example One',
        {body: 'Just an example'}
    )
        .subscribe(res => {
            if (res.event.type === 'click') {
                // You can do anything else here
                res.notification.close();
            }
        }
    )

    Using with universal method one (using injector)

    Thank you @anode7 for submitting this example

    import {Component, Inject, PLATFORM_ID, Injector} from '@angular/core';
    import {isPlatformBrowser} from '@angular/common';
     
    @Component({})
    export class ExampleComponent {
        private _push:PushNotificationsService;
     
        constructor(
            @Inject(PLATFORM_ID) platformId: string,
            private injector: Injector,
        ) {
            if (isPlatformBrowser(platformId)) {
                //inject service only on browser platform
                this._push = this.injector.get(PushNotificationsService);
            }
        }
    }

    Using with universal method two (mock service)

    A standard method used in Universal is creating a mock service which is injected in the ServerModule. A good example can be found here.

    Development

    To generate all *.js, *.d.ts and *.metadata.json files:

    $ npm run build

    To lint all *.ts files:

    $ npm run lint

    License

    MIT © Filip Lauc

    Keywords

    Install

    npm i ng-push

    DownloadsWeekly Downloads

    424

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    12.3 kB

    Total Files

    9

    Last publish

    Collaborators

    • flauc