angular-web-notification

angular-web-notification

Web Notifications AngularJS Service

• Overview
• Demo
• Usage
• Installation
• Limitations
• API Documentation
• Contributing
• Release History
• License

Overview

The angular-web-notification is an angular service wrapper for the web notifications API.

It is using the HTML5-Desktop-Notifications library which provides a unified API for all browsers.

See W3 Specification and HTML5-Desktop-Notifications for more information.

Demo

Live Demo

Usage

In order to use the angular service you first must add the relevant dependencies:

<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="html5-desktop-notifications2/dist/Notification.js"></script>
<script type="text/javascript" src="angular-web-notification.js"></script>

Next you must define it as a dependency in your main angular module as follows:

angular.module('exampleApp', [
    'angular-web-notification'
]);

Now you can inject and use the service into your modules (directives/services/...), for example:

angular.module('exampleApp').directive('showButton', ['webNotification', function (webNotification) {
return {
    ...
    link: function (scope, element) {
        element.on('click', function onClick() {
            webNotification.showNotification('Example Notification', {
                body: 'Notification Text...',
                icon: 'my-icon.ico',
                onClick: function onNotificationClicked() {
                    console.log('Notification clicked.');
                },
                autoClose: 4000 //auto close the notification after 4 seconds (you can manually close it via hide function)
            }, function onShow(error, hide) {
                if (error) {
                    window.alert('Unable to show notification: ' + error.message);
                } else {
                    console.log('Notification Shown.');

                    setTimeout(function hideNotification() {
                        console.log('Hiding notification....');
                        hide(); //manually close the notification (you can skip this if you use the autoClose option)
                    }, 5000);
                }
            });
        });
    }
};
}]);

Installation

Run bower install in your project as follows:

bower install angular-web-notification --save

Or if you are using NPM to download client libraries, you can install it as follows:

npm install --save angular-web-notification

Limitations

The web notifications API is not fully supported in all browsers.

Please see supported browser versions for more information on the official spec support and at HTML5-Desktop-Notifications for more browser specific API support.

API Documentation

See full docs at: API Docs

Contributing

See contributing guide

Release History

Date	Version	Description
2016-11-26	v1.0.21	Maintenance
2016-11-23	v1.0.19	Use forked version of html5-desktop-notifications in order to resolve few issues
2016-11-19	v1.0.18	Maintenance
2016-11-04	v1.0.16	Upgrading to html5-desktop-notifications 3.0.0
2016-10-16	v1.0.15	Maintenance
2016-09-10	v1.0.6	Default to website favicon.ico if icon not provided in options
2016-09-07	v1.0.4	Callback is now optional
2016-09-07	v1.0.3	Maintenance
2016-06-14	v0.0.78	Published via NPM (in addition to bower)
2016-06-14	v0.0.77	Maintenance
2016-03-08	v0.0.65	Added webNotification.permissionGranted attribute
2016-02-24	v0.0.64	Maintenance
2015-09-26	v0.0.31	Update bower dependencies
2015-09-26	v0.0.30	Added 'onClick' option to enable adding onclick event handler for the notification
2015-09-02	v0.0.29	Maintenance
2015-08-16	v0.0.22	uglify fix
2015-08-02	v0.0.21	Maintenance
2015-02-16	v0.0.7	Automatic unit tests via karma
2015-02-05	v0.0.5	Doc changes
2014-12-30	v0.0.4	Doc changes
2014-12-09	v0.0.3	API now enables/disables the capability to automatically request for permissions needed to display the notification.
2014-12-08	v0.0.2	Initial release

License

Developed by Sagie Gur-Ari and licensed under the Apache 2 open source license.