pushjs-notification

pushjs-notification is the fastest way to get up and running with Javascript desktop and mobile notifications. The Notification API allows modern browsers such as Chrome, Safari, Firefox, and IE 9+ to push notifications to a user's desktop.

Installation

Install the plugin using the NPM.

npm install pushjs-notification --save

Basic Implementation

Import the package in your component

import {jsPushNotification} from 'pushjs-notification';
@Component({
    ///
})
export class AppComponent {
    ...
  generateNotification() {
    let jsPush = new jsPushNotification();
    jsPush.NotificationTitle = 'pushjs-notification';
    jsPush.ClickEnable = true;
    jsPush.NavigateUrl = 'https://www.npmjs.com/package/pushjs.notification';
    jsPush.Options.body = 'The plugin supports modern browsers such as Chrome, Safari, Firefox, and IE 9+ to push notifications to a users desktop';
    jsPush.Options.icon = 'favicon.ico';
    jsPush.Options.image = 'bannerImage.ico';
    jsPush.showNotification();
  }
    ...
}

Options

Inputs

• NotificationTitle string: Defines a title for the notification, which will be shown at the top of the notification window when it is fired.
• ClickEnable boolean: Specifies whether click event is enabled or not (Default value is false)
• NavigateUrl string: If the ClickEnable is true, then when the notification is clicked, it will redirect to specified url.
• Options object: An options object containing any custom settings that you want to apply to the notification.(These are optional settings) The possible options are:
  • dir string: The direction in which to display the notification. It defaults to auto, which just adopts the browser's language setting behavior, but you can override that behaviour by setting values of ltr and rtl (although most browsers seem to ignore these settings.)
  • body string: A DOMString representing the body text of the notification, which will be displayed below the title.
  • tag string: A DOMString representing an identifying tag for the notification.
  • icon string: A USVString containing the URL of an icon to be displayed in the notification.
  • image string: A USVString containing the URL of an image to be displayed in the notification.
  • data string: Arbitrary data that you want associated with the notification. This can be of any data type.
  • vibrate string: A Vibration Pattern for the device's vibration hardware to emit when the notification fires.
  • renotify boolean: A Boolean specifying whether the user should be notified after a new notification replaces an old one. The default is false, which means they won't be notified.
  • requireInteraction boolean: Indicates that a notification should remain active until the user clicks or dismisses it, rather than closing automatically. The default value is false.

API Reference

showNotification() function: Used to generate the notification.

Note: Before calling sendNotification() you need to initialize above specified Input properties for the customization.

Todos

• Write MORE Tests
• Add additional features
• Web Workers compatibility

License

MIT

Free Software, Hell Yeah!