diff --git a/README.md b/README.md
index 8ee2dd9..3700769 100644
--- a/README.md
+++ b/README.md
@@ -15,7 +15,8 @@ _WebPush - is browser technology that allows site developer send notifications f
# More info
- [Installing PWA](#Installing-PWA)
- [Generating VAPID key](#Generating-VAPID-key)
-- [Saving subscription token](#Saving-subscription-token)
+- [Subscription and saving token](#Subscription-and-saving-token)
+- [Service worker](#Service-worker)
- [Sending push message](#Sending-push-message)
## Installing PWA
@@ -23,7 +24,7 @@ WebPush is Progressive Web App(PWA) feature so you need to ask user to enable PW
On iOs devices it can be made with button **"Add to Home Screen"** in browser.
-**Also dont forget to set display mode in manifest.json!**
+**Also don't forget to set display mode in manifest.json!**
```html
@@ -71,13 +72,24 @@ let subscriptionOptions = {
userVisibleOnly: true,
applicationServerKey: VAPID_PUBLIC_KEY
};
-let subscription = await pushManager.subscribe(subscriptionOptions);
```
+
+See full frontend example in [frontend.js](/frontend.js)
-## Saving subscription token
-For most cases after receiving subscription you going to send it to backend via fetch or something.
-**Examples how subscription data looks:**
+## Subscription and saving token
+After registering Service Worker and providing VAPID_PUBLIC_KEY you can request user to subscribe.
+Best practice will be to ask user about subscription in html popup first.
+Then you can call:
+```javascript
+let subscription = await pushManager.subscribe(subscriptionOptions);
+```
+See full example in [frontend.js](/frontend.js)
+
+After receiving subscription you going to send it to backend via fetch or something.
+You will need that for [sending push message from backend](#Sending-push-message)
+
+**Examples how subscription token looks:**
For desktop and mobile Safari:
```json
{
@@ -100,6 +112,23 @@ And this will be for Google Chrome (FCM):
}
```
+## Service worker
+For receiving, displaying push message and processing click on it - you need to use these service worker methods:
+```javascript
+self.addEventListener('push', (event) => {
+ let pushData = event.data.json();
+ // ...
+ self.registration.showNotification(pushData.title, pushData)
+});
+
+self.addEventListener('notificationclick', function (event) {
+ clients.openWindow(event.notification.data.url)
+ // ...
+ // You can send fetch request to your analytics API fact that push was clicked
+});
+```
+See full example in [serviceworker.js](/serviceworker.js)
+
## Sending push message
You can send WebPush from **frontend**:
```javascript
diff --git a/frontend.js b/frontend.js
index 0e63150..c1b42b9 100644
--- a/frontend.js
+++ b/frontend.js
@@ -56,8 +56,7 @@ async function subscribeToPush() {
try {
let subscription = await pushManager.subscribe(subscriptionOptions);
displaySubscriptionInfo(subscription);
-
- // saving sub info to server
+ // Here you can send fetch request with subscription data to your backend API for next push sends from there
} catch (error) {
document.getElementById('active_sub').style.display = 'block';
document.getElementById('active_sub').innerHTML = 'User denied push permission';
diff --git a/serviceworker.js b/serviceworker.js
index 26f4937..e2bae08 100644
--- a/serviceworker.js
+++ b/serviceworker.js
@@ -34,7 +34,7 @@ self.addEventListener('notificationclick', function (event) {
clients.openWindow(event.notification.data.url)
.then(() => {
- // You can save to your analytics fact that push was clicked
+ // You can send fetch request to your analytics API fact that push was clicked
fetch('https://your_backend_server.com/track_click?message_id=' + pushData.data.message_id);
});
});