Angular Desktop Notification
A simple HTML5 notification for Angular 1
Getting Started
- Go to your project directory using your command line tool then install the project using npm
npm install angular-desktop-notification
- Include angular.js and angular-desktop-notification.js to your index page.
- Add the ngDesktopNotification module to you application.
angular;
- You can now use the injectable service 'desktopNotification'.
angular;
- You can also set the default app-wide configuration for desktopNotification
angular;
How to use
A simple usage would be, request the permission and display the notification in the success callback
desktopNotification;
API Documentation
This method returns true if the browser supports the Notification API, false otherwise
desktopNotification;
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
desktopNotification;
This method returns a $q promise, if the user allowed the notification the successCallback will be executed, errorCallback will be executed otherwise
desktopNotification;
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)
desktopNotification;
Note: Please see all the available parameters here at the official documentation
Limitations
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
- https://github.com/sagiegurari/angular-web-notification
- https://github.com/ttsvetko/HTML5-Desktop-Notifications
License
This project is licensed under the MIT License - see the LICENSE file for details
TODO
- Build tools for concatenation and minification
- Unit tests (Incomplete)
- Support for older browser versions and IE