The web notification service wraps the HTML 5 Web Notifications API as an angular service.
See simple-web-notification for more API details.
Kind: global namespace
Returns: Object
- The service instance
Ngdoc: service
Author: Sagie Gur-Ari
Shows the notification based on the provided input.
The callback invoked will get an error object (in case of an error, null in
case of no errors) and a 'hide' function which can be used to hide the notification.
Access: public
Param | Type | Default | Description |
---|---|---|---|
[title] | String |
The notification title text (defaulted to empty string if null is provided) | |
[options] | Object |
Holds the notification data (web notification API spec for more info) | |
[options.icon] | String |
/favicon.ico |
The notification icon (defaults to the website favicon.ico) |
[options.autoClose] | Number |
Auto closes the notification after the provided amount of millies (0 or undefined for no auto close) | |
[options.onClick] | function |
An optional onclick event handler | |
[callback] | ShowNotificationCallback |
Called after the show is handled. |
Example
//show web notification when button is clicked
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);
}
});
//service worker example
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
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);
}
});
});