Web Notifications made easy.
npm install simple-web-notification     
> Web Notifications made easy
* Overview
* Demo
* Usage
* Installation
* Limitations
* API Documentation
* Contributing
* Release History
* License
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.
``html`
Now you can use the API anywhere in your application, for example:
`js
document.querySelector('.some-button').addEventListener('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:
`js
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
document.querySelector('.some-button').addEventListener('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);
}
});
});
});
`
In case you wish to invoke the permissions API manually you can use the webNotification.requestPermission function.
This function triggers the request permissions dialog in case permissions were not already granted.
`js`
//manually ask for notification permissions (invoked automatically if needed and allowRequest=true)
webNotification.requestPermission(function onRequest(granted) {
if (granted) {
console.log('Permission Granted.');
} else {
console.log('Permission Not Granted.');
}
});
When using an AMD loader (such as RequireJS) or CommonJS type loader, the webNotification object is not automatically defined on the window scope.
`sh`
npm install --save simple-web-notification
Or if you are using bower, you can install it as follows:
`sh``
bower install simple-web-notification --save
Please see supported browser versions for more information on the official spec support.
| Date | Version | Description |
| ----------- | ------- | ----------- |
| 2020-05-13 | v2.0.1 | Revert bower.json deletion but not use it in CI build |
| 2020-05-11 | v2.0.0 | Migrate to github actions, upgrade minimal node version and remove bower |
| 2019-02-08 | v1.0.32 | Maintenance |
| 2018-06-25 | v1.0.28 | Expose webNotification.requestPermission #5 |
| 2018-06-14 | v1.0.26 | Better error detection on chrome mobile #4 |
| 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 |