DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/angular-desktop-notification package

1.1.6 • Public • Published

Angular Desktop Notification

A simple HTML5 notification for Angular 1

Getting Started

  1. Go to your project directory using your command line tool then install the project using npm
npm install angular-desktop-notification
  1. Include angular.js and angular-desktop-notification.js to your index page.
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-desktop-notification.js"></script>
  1. Add the ngDesktopNotification module to you application.
angular.module('myApp', ['ngDesktopNotification']);
  1. You can now use the injectable service 'desktopNotification'.
angular.module('myApp').controller(function (desktopNotification) {'My Notification');
  1. You can also set the default app-wide configuration for desktopNotification
angular.module('myApp').config(function (desktopNotificationProvider) {
    autoClose: false,
    showOnPageHidden: true

How to use

A simple usage would be, request the permission and display the notification in the success callback

desktopNotification.requestPermission().then(function (permission) {
  // User allowed the notification'Hello', {
    body: 'I am an HTML5 notification',
    onClick: function () {
      // Handle click event
}, function (permission) {
  // User denied the notification

API Documentation

This method returns true if the browser supports the Notification API, false otherwise


This method will get the current permission set in the browser which could be one of the ff.

  • desktopNotification.permissions.default
  • desktopNotification.permissions.denied
  • desktopNotification.permissions.granted

This method returns a $q promise, if the user allowed the notification the successCallback will be executed, errorCallback will be executed otherwise

desktopNotification.requestPermission().then(successCallback, errorCallback);

This method will display the notification using the parameter values

  • title - should be a string
  • options - should be an object with the ff. properties
    • options.body - the message of the notification
    • options.icon - a string path of an icon, jpg and etc.
    • options.autoClose - a boolean property that will close the notification after the duration specified (Defaults to true)
    • options.duration - an integer that will set the seconds before the notification is automatically closed (Defaults to 5)
    • options.showOnPageHidden - a boolean property that will only show the notification if the page is hidden (Defaults to false)
    • options.onClick - a function that will trigger when the notification is clicked (Defaults to none), options);

Note: Please see all the available parameters here at the official documentation


Angular Desktop Notification is not supported in all browsers.
Please see supported browser versions for more information on the official support specification.

Also, only Chrome allows the desktop notification to persist, if and only if, the user hovers on it. Please check the other browsers closing behavior.

Inspirations and Motivations


This project is licensed under the MIT License - see the LICENSE file for details


  • Build tools for concatenation and minification
  • Unit tests (Incomplete)
  • Support for older browser versions and IE

Package Sidebar


npm i angular-desktop-notification

Weekly Downloads






Last publish


  • jmsanpascual