Skip to content

Commit cb544f3

Browse files
sagiegurarisagiegurari
committed
service worker docs, #27 
1 parent 375ae97 commit cb544f3

File tree

7 files changed

+152
-4
lines changed

7 files changed

+152
-4
lines changed

‎README.md

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,48 @@ return {
8181
}]);
8282
```
8383

84+
In case you wish to use service worker web notifications, you must provide the serviceWorkerRegistration in the options as follows:
85+
86+
````js
87+
//Get the service worker registeration object at the startup of the application.
88+
//This is an aysnc operation so you should not try to use it before the promise is finished.
89+
var serviceWorkerRegistration;
90+
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
91+
serviceWorkerRegistration = registration;
92+
});
93+
94+
//when setting on even handlers in different areas of the application, use that registration object instance (must be done after the registration is available)
95+
element.on('click', function onClick() {
96+
webNotification.showNotification('Example Notification', {
97+
serviceWorkerRegistration: serviceWorkerRegistration,
98+
body: 'Notification Text...',
99+
icon: 'my-icon.ico',
100+
actions: [
101+
{
102+
action: 'Start',
103+
title: 'Start'
104+
},
105+
{
106+
action: 'Stop',
107+
title: 'Stop'
108+
}
109+
],
110+
autoClose: 4000 //auto close the notification after 4 seconds (you can manually close it via hide function)
111+
}, function onShow(error, hide) {
112+
if (error) {
113+
window.alert('Unable to show notification: ' + error.message);
114+
} else {
115+
console.log('Notification Shown.');
116+
117+
setTimeout(function hideNotification() {
118+
console.log('Hiding notification....');
119+
hide(); //manually close the notification (you can skip this if you use the autoClose option)
120+
}, 5000);
121+
}
122+
});
123+
});
124+
````
125+
84126
<a name="installation"></a>
85127
## Installation
86128
Run bower install in your project as follows:
@@ -112,7 +154,7 @@ See [contributing guide](.github/CONTRIBUTING.md)
112154

113155
| Date | Version | Description |
114156
| ----------- | ------- | ----------- |
115-
| 2017-06-26 | v1.2.23 | Maintenance |
157+
| 2017-08-25 | v1.2.24 | Document support of service worker web notifications |
116158
| 2017-01-22 | v1.2.0 | Split the internal web notification API into a new project: simple-web-notification |
117159
| 2017-01-13 | v1.0.26 | Maintenance |
118160
| 2016-11-23 | v1.0.19 | Use forked version of html5-desktop-notifications in order to resolve few issues |

‎angular-web-notification.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
* @param {ShowNotificationCallback} [callback] - Called after the show is handled.
4545
* @example
4646
* ```js
47+
* //show web notification when button is clicked
4748
* webNotification.showNotification('Example Notification', {
4849
* body: 'Notification Text...',
4950
* icon: 'my-icon.ico',
@@ -63,6 +64,37 @@
6364
* }, 5000);
6465
* }
6566
* });
67+
*
68+
* //service worker example
69+
* navigator.serviceWorker.register('service-worker.js').then(function(registration) {
70+
* webNotification.showNotification('Example Notification', {
71+
* serviceWorkerRegistration: registration,
72+
* body: 'Notification Text...',
73+
* icon: 'my-icon.ico',
74+
* actions: [
75+
* {
76+
* action: 'Start',
77+
* title: 'Start'
78+
* },
79+
* {
80+
* action: 'Stop',
81+
* title: 'Stop'
82+
* }
83+
* ],
84+
* autoClose: 4000 //auto close the notification after 4 seconds (you can manually close it via hide function)
85+
* }, function onShow(error, hide) {
86+
* if (error) {
87+
* window.alert('Unable to show notification: ' + error.message);
88+
* } else {
89+
* console.log('Notification Shown.');
90+
*
91+
* setTimeout(function hideNotification() {
92+
* console.log('Hiding notification....');
93+
* hide(); //manually close the notification (you can skip this if you use the autoClose option)
94+
* }, 5000);
95+
* }
96+
* });
97+
* });
6698
* ```
6799
*/
68100
var showNotification = webNotificationAPI.showNotification;

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-web-notification",
3-
"version": "1.2.23",
3+
"version": "1.2.24",
44
"description": "AngularJS service for displaying web notifications.",
55
"authors": [
66
"Sagie Gur-Ari <[email protected]>"

‎docs/CHANGELOG.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
| Date | Version | Description |
22
| ----------- | ------- | ----------- |
3-
| 2017-06-26 | v1.2.23 | Maintenance |
3+
| 2017-08-25 | v1.2.24 | Document support of service worker web notifications |
44
| 2017-01-22 | v1.2.0 | Split the internal web notification API into a new project: simple-web-notification |
55
| 2017-01-13 | v1.0.26 | Maintenance |
66
| 2016-11-23 | v1.0.19 | Use forked version of html5-desktop-notifications in order to resolve few issues |

‎docs/api.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ case of no errors) and a 'hide' function which can be used to hide the notificat
2828

2929
**Example**
3030
```js
31+
//show web notification when button is clicked
3132
webNotification.showNotification('Example Notification', {
3233
body: 'Notification Text...',
3334
icon: 'my-icon.ico',
@@ -47,4 +48,35 @@ webNotification.showNotification('Example Notification', {
4748
}, 5000);
4849
}
4950
});
51+
52+
//service worker example
53+
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
54+
webNotification.showNotification('Example Notification', {
55+
serviceWorkerRegistration: registration,
56+
body: 'Notification Text...',
57+
icon: 'my-icon.ico',
58+
actions: [
59+
{
60+
action: 'Start',
61+
title: 'Start'
62+
},
63+
{
64+
action: 'Stop',
65+
title: 'Stop'
66+
}
67+
],
68+
autoClose: 4000 //auto close the notification after 4 seconds (you can manually close it via hide function)
69+
}, function onShow(error, hide) {
70+
if (error) {
71+
window.alert('Unable to show notification: ' + error.message);
72+
} else {
73+
console.log('Notification Shown.');
74+
75+
setTimeout(function hideNotification() {
76+
console.log('Hiding notification....');
77+
hide(); //manually close the notification (you can skip this if you use the autoClose option)
78+
}, 5000);
79+
}
80+
});
81+
});
5082
```

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angular-web-notification",
3-
"version": "1.2.23",
3+
"version": "1.2.24",
44
"description": "AngularJS service for displaying web notifications.",
55
"author": {
66
"name": "Sagie Gur-Ari",

‎project/config/README-template.md

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,48 @@ return {
8181
}]);
8282
```
8383

84+
In case you wish to use service worker web notifications, you must provide the serviceWorkerRegistration in the options as follows:
85+
86+
````js
87+
//Get the service worker registeration object at the startup of the application.
88+
//This is an aysnc operation so you should not try to use it before the promise is finished.
89+
var serviceWorkerRegistration;
90+
navigator.serviceWorker.register('service-worker.js').then(function(registration) {
91+
serviceWorkerRegistration = registration;
92+
});
93+
94+
//when setting on even handlers in different areas of the application, use that registration object instance (must be done after the registration is available)
95+
element.on('click', function onClick() {
96+
webNotification.showNotification('Example Notification', {
97+
serviceWorkerRegistration: serviceWorkerRegistration,
98+
body: 'Notification Text...',
99+
icon: 'my-icon.ico',
100+
actions: [
101+
{
102+
action: 'Start',
103+
title: 'Start'
104+
},
105+
{
106+
action: 'Stop',
107+
title: 'Stop'
108+
}
109+
],
110+
autoClose: 4000 //auto close the notification after 4 seconds (you can manually close it via hide function)
111+
}, function onShow(error, hide) {
112+
if (error) {
113+
window.alert('Unable to show notification: ' + error.message);
114+
} else {
115+
console.log('Notification Shown.');
116+
117+
setTimeout(function hideNotification() {
118+
console.log('Hiding notification....');
119+
hide(); //manually close the notification (you can skip this if you use the autoClose option)
120+
}, 5000);
121+
}
122+
});
123+
});
124+
````
125+
84126
<a name="installation"></a>
85127
## Installation
86128
Run bower install in your project as follows:

0 commit comments

Comments
 (0)