Handle notificationclick

Author: aaronamm

public/service-worker.js

@@ -3,6 +3,7 @@
 self.addEventListener('push', (event) => {
   // https://developer.mozilla.org/en-US/docs/Web/API/PushEvent/data
   const payload = event.data.json();
+  console.log(`payload: ${JSON.stringify(payload, null, 2)}`);
 
   const options = {
     body: payload.body,
@@ -12,20 +13,54 @@ self.addEventListener('push', (event) => {
     // The notification object includes a tag attribute that is the grouping key. 
     // When creating a notification with a tag and there is already a notification with the same tag visible to the user, 
     // the system automatically replaces it without creating a new notification. 
-    tag: 'vibration-sample',
+    // tag: 'vibration-sample',
     actions: [
       {
         // https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications#the_notificationclick_event 
-        action: 'open-a-link',
-        title: 'Open a link',
+        action: 'open-product-link',
+        title: `Open product's link`,
         //icon: '/demos/notification-examples/images/action-1-128x128.png'
       }
     ],
+    data: {
+      url: payload.url
+    }
   }; // end of options
 
-  event.waitUntil(
-    self.registration.showNotification(payload.title, options)
-  );
+  // https://javascript.info/promise-basics
+  // https://javascript.info/async-await
+
+  // https://swizec.com/blog/how-to-add-real-web-push-notifications-to-your-webapp/
+  event.waitUntil(showNotificationAsync(payload, options));
+
+});
+
+// https://stackoverflow.com/a/63917373/1872200
+// aync function is a function that synchronously returns a promise
+async function showNotificationAsync(payload, options) {
+  await self.registration.showNotification(payload.title, options);
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/notificationclick_event#examples
+self.addEventListener('notificationclick', (event) => {
+  const { action, notification } = event;
+  console.log(JSON.stringify(notification, null, 2))
+
+  notification.close();
+  if (action === 'open-product-link') {
+    // https://developer.mozilla.org/en-US/docs/Web/API/Clients/openWindow#return_value
+
+    // https://web-push-book.gauntface.com/common-notification-patterns/
+    clients.openWindow(notification.data.url);
+  }
+
+  // event.waitUntil(openProductLink(action, data));
 });
 
-// https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/notificationclick_event#examples
+async function openProductLink(action, data) {
+  notification.close();
+  if (action === 'open-product-link') {
+    // https://developer.mozilla.org/en-US/docs/Web/API/Clients/openWindow#return_value
+    await clients.openWindow(data.url);
+  }
+}