readme

andreinwald · Nov 2, 2023 · a0d07ae · a0d07ae
1 parent 9b86bc1
commit a0d07ae
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -15,15 +15,16 @@ _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
 WebPush is Progressive Web App(PWA) feature so you need to ask user to enable PWA mode first.<br>
 On iOs devices it can be made with button **"Add to Home Screen"** in browser.<br><br>
 <img src="images/webpush-add-to-home-screen.jpg" alt="Require adding to Home Screen" style="height:400px">
 
-**Also dont forget to set display mode in manifest.json!**
+**Also don't forget to set display mode in manifest.json!**
 ```html
 <html>
 <head>
@@ -71,13 +72,24 @@ let subscriptionOptions = {
     userVisibleOnly: true,
     applicationServerKey: VAPID_PUBLIC_KEY
 };
-let subscription = await pushManager.subscribe(subscriptionOptions);
 ```
+<br>
+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.<br>
-**Examples how subscription data looks:**<br><br>
+## Subscription and saving token
+After registering Service Worker and providing VAPID_PUBLIC_KEY you can request user to subscribe.<br>
+Best practice will be to ask user about subscription in html popup first.<br>
+Then you can call:
+```javascript
+let subscription = await pushManager.subscribe(subscriptionOptions);
+```
+See full example in [frontend.js](/frontend.js)
+<br><br>
 
+After receiving subscription you going to send it to backend via fetch or something.<br>
+You will need that for [sending push message from backend](#Sending-push-message)
+<br>
+**Examples how subscription token looks:**<br><br>
 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
@@ -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
@@ -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);
         });
 });