Skip to content

Commit

Permalink
Support service worker web notifications
Browse files Browse the repository at this point in the history
  • Loading branch information
sagiegurari committed Aug 25, 2017
1 parent 381bf6e commit 5066a75
Show file tree
Hide file tree
Showing 8 changed files with 460 additions and 22 deletions.
38 changes: 37 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,42 @@ $('.some-button').on('click', function onClick() {
});
```

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) {
$('.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.

<a name="installation"></a>
Expand Down Expand Up @@ -93,7 +129,7 @@ See [contributing guide](.github/CONTRIBUTING.md)

| Date | Version | Description |
| ----------- | ------- | ----------- |
| 2017-06-26 | v1.0.20 | 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.2 | Maintenance |
| 2017-01-22 | v1.0.0 | Official release |
Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "simple-web-notification",
"version": "1.0.20",
"version": "1.0.21",
"description": "Web Notifications made easy.",
"authors": [
"Sagie Gur-Ari <[email protected]>"
Expand Down
2 changes: 1 addition & 1 deletion docs/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
| Date | Version | Description |
| ----------- | ------- | ----------- |
| 2017-06-26 | v1.0.20 | 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.2 | Maintenance |
| 2017-01-22 | v1.0.0 | Official release |
Expand Down
35 changes: 35 additions & 0 deletions docs/api.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,10 +55,12 @@ case of no errors) and a 'hide' function which can be used to hide the notificat
| [options.icon] | <code>String</code> | <code>/favicon.ico</code> | The notification icon (defaults to the website favicon.ico) |
| [options.autoClose] | <code>Number</code> | | Auto closes the notification after the provided amount of millies (0 or undefined for no auto close) |
| [options.onClick] | <code>function</code> | | An optional onclick event handler |
| [options.serviceWorkerRegistration] | <code>Object</code> | | Optional service worker registeration used to show the notification |
| [callback] | [<code>ShowNotificationCallback</code>](#ShowNotificationCallback) | | Called after the show is handled. |

**Example**
```js
//show web notification when button is clicked
$('.some-button').on('click', function onClick() {
webNotification.showNotification('Example Notification', {
body: 'Notification Text...',
Expand All @@ -80,6 +82,39 @@ $('.some-button').on('click', function onClick() {
}
});
});

//service worker example
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);
}
});
});
});
```
<a name="ShowNotificationCallback"></a>

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "simple-web-notification",
"version": "1.0.20",
"version": "1.0.21",
"description": "Web Notifications made easy.",
"author": {
"name": "Sagie Gur-Ari",
Expand Down
36 changes: 36 additions & 0 deletions project/config/README-template.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,42 @@ $('.some-button').on('click', function onClick() {
});
```

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) {
$('.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.

<a name="installation"></a>
Expand Down
Loading

0 comments on commit 5066a75

Please sign in to comment.