simple-web-notification

Web Notifications made easy

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

Overview

The simple-web-notification is a simplified web notifications API with automatic permissions support.

This library requires no external dependencies, however the browser must support the Notification API or have a polyfill available.

See W3 Specification for more information.

Demo

Live Demo

Usage

In order to use the simplified web notification API you first must add the relevant dependencies:

<script type="text/javascript" src="web-notification.js"></script>

Now you can use the API anywhere in your application, for example:

$('.some-button').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);
        }
    });
});

In case you wish to use service worker web notifications, you must provide the serviceWorkerRegistration in the options as follows:

navigator.serviceWorker.register('service-worker.js').then(function(registration) {
    $('.some-button').on('click', function onClick() {
        webNotification.showNotification('Example Notification', {
            serviceWorkerRegistration: registration,
            body: 'Notification Text...',
            icon: 'my-icon.ico',
            actions: [
                {
                    action: 'Start',
                    title: 'Start'
                },
                {
                    action: 'Stop',
                    title: 'Stop'
                }
            ],
            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);
            }
        });
    });
});

When using an AMD loader (such as RequireJS) or CommonJS type loader, the webNotification object is not automatically defined on the window scope.

Installation

Run bower install in your project as follows:

bower install simple-web-notification --save

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

npm install --save simple-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.

API Documentation

See full docs at: API Docs

Contributing

See contributing guide

Release History

Date	Version	Description
2017-11-07	v1.0.23	Maintenance
2017-08-25	v1.0.21	Support service worker web notifications
2017-01-31	v1.0.3	Removed polyfill dependency
2017-01-22	v1.0.0	Official release
2017-01-22	v0.0.2	Initial release

License

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