Improve README and service-worker.js code

Author: aaronamm

PushMessageFromServer.js

@@ -1,32 +1,36 @@
 // https://developers.google.com/web/updates/2015/05/notifying-you-of-changes-to-notifications
 // https://felixgerschau.com/web-push-notifications-tutorial/
 // https://developers.google.com/web/fundamentals/codelabs/push-notifications
-const webpush = require('web-push');
+const webPush = require('web-push');
 
 // VAPID keys should be generated only once with: 
-// const vapidKeys = webpush.generateVAPIDKeys();
+// const vapidKeys = webPush.generateVAPIDKeys();
 // console.log(vapidKeys);
 
 const vapidKeys = {
   publicKey: 'BHG9NdYdfiCIx7xUS8u2CMhtDD-GWHb6QYuSZ908NZYZHhJEjGjcX0yTjHrWx7gDICmCEUORrLmw3uwOGBqzm2s',
   privateKey: 'wDf6oqOkg0SQ3FD8NU9ZNrwVZWIGBfm1gPgp6QNXWjk'
 };
 
-webpush.setVapidDetails(
+webPush.setVapidDetails(
   'mailto:example@yourdomain.org',
   vapidKeys.publicKey,
   vapidKeys.privateKey
 );
 
-// This is the sample output of calling JSON.stringify on a PushSubscription
+// This is an sample subscription object that we get after subscript on browser
+const pushSubscription =
+{
+  "endpoint": "",
+  "keys": {
+    "p256dh": "",
+    "auth": ""
+  }
+}
 
-// const pushSubscription = 
-//   endpoint: '.....',
-//   keys: {
-//     auth: '.....',
-//     p256dh: '.....'
-//   }
-// };
+const payload = {
+  title: `Hello at ${(new Date()).toISOString()}`,
+  url: 'https://www.dotnetthailand.com'
+};
 
-const payload = { title: `Hello at ${(new Date()).toISOString()}` };
-webpush.sendNotification(pushSubscription, JSON.stringify(payload));
+webPush.sendNotification(pushSubscription, JSON.stringify(payload));

README.md

@@ -3,55 +3,46 @@
 ## How to run the project locally
 - Open a new terminal session.
 - CD to the root folder of the project and run `yarn` to install all Node packages.
-- Then run `yarn start` to start a project and automatically launch a browser.
-- Click `Subscribe Web Push` and copy a subscription object in text box. 
-- Use subscription object in a server side to send push notification.
-
-```sh
-  yarn create react-app web-push-api-example --template typescript
-```
-
-- Required Node.js version >= 14
-
-# Get subscription object
-- For the main project in .NET Thailand repository, it can be accessed as http://www.dotnetthailand.com/web-push-api-example/.
+- Then run `yarn start` to start the project and automatically launch a browser.
+- Click `Subscribe Web Push` and copy a subscription JSON object in a text box. 
+- Use subscription object on a server side to send push notification.
+- This project requires Node.js version >= 14.
 
 
 # Send push notification from a server
-- Set a push subscrition object in `PushMessageFromServer` that we get after a user's subscribed web push.
-- Execute the following command:
+- Set a push subscription object that we get after a user's subscribed web push in `PushMessageFromServer.js`
+- Then execute the following command:
   ```sh
-    node PushMessageFromServer.js
+  $ node PushMessageFromServer.js
   ```
 
-## Notification does not always show as banner.
-Turn of focus assist
-
-server
-private/public key
-
-client
-public key
-
-load register service background
-
-subscribe to server with public key
-send subscription object to store on server as identity
-
-import web-push
-
-const vapIdKey = push.generateVAPIDKeys(); to get public and private keys
-setVapidDetails()
-sendNotification
-
-serviceWorker to handle receive notification
-
-skip waiting in application tab
+# Trouble shooting
+## Notification does not always show as banner on Windows.
+- Try to turn off focus assist.
+## No push notification message at all
+- You may need to manually update service worker. Open Chrome developer tool with ctrl+shift+i keys and then go to application tab.
+  Then click Service Workers node > Skip waiting service worker.
+
+# Key concept
+- Generate publish and private key public and private keys with the following code
+  ```js
+  const vapIdKeys = webPush.generateVAPIDKeys();
+  const vapidKeys = webPush.generateVAPIDKeys();
+  console.log(vapidKeys);
+  ```
+- Use a public key in subscription script (App.tsx)
+- User subscribes web push with subscription script.
+- Use both public, private keys and subscription object on server script (PushMessageFromServer.js) to send push to a user.
+- Subscription object is what we store in a database. It is an identity of a subscribed user.
+- Use service worker script (service-worker.js) to handle push notification and customize how to show it to a user
+- You can test push with a localhost and do need to deploy to public URL
+
+# Get subscription object on a published website
+- For the main project in .NET Thailand repository, it can be accessed as http://www.dotnetthailand.com/web-push-api-example/.
 
-Useful articles for .NET Web Push
-- https://www.pluralsight.com/guides/html5-desktop-notifications-with-react?fbclid=IwAR1NzrQNDYSZJxKLMxWVVWes_eulWauBqa63F6Z47dDznNBL9ARiCQ26wOs
+# Useful articles for .NET Web Push
+- https://www.pluralsight.com/guides/html5-desktop-notifications-with-react
 - https://blog.elmah.io/how-to-send-push-notifications-to-a-browser-in-asp-net-core/
 - https://www.bartvanuden.com/2018/01/23/push-notifications-to-your-pwa-with-asp-net-core-2-0-and-aurelia/
 - https://www.tpeczek.com/2017/12/push-notifications-and-aspnet-core-part.html
-- https://stackoverflow.com/a/47617427/1872200
-- 
+- https://stackoverflow.com/a/47617427/1872200

public/service-worker.js

@@ -17,14 +17,16 @@ self.addEventListener('push', (event) => {
     actions: [
       {
         // https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications#the_notificationclick_event 
-        action: 'open-product-link',
-        title: `Open product's link`,
+        action: 'open-a-link',
+        title: `Open a link`,
         //icon: '/demos/notification-examples/images/action-1-128x128.png'
       }
     ],
     data: {
       url: payload.url
     }
+
+    // Chrome does not support sound attribute https://github.com/GoogleChromeLabs/airhorn/issues/18
   }; // end of options
 
   // https://javascript.info/promise-basics
@@ -36,31 +38,25 @@ self.addEventListener('push', (event) => {
 });
 
 // https://stackoverflow.com/a/63917373/1872200
-// aync function is a function that synchronously returns a promise
+// async 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
 
+  if (action === 'open-a-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);
+    //clients.openWindow(notification.data.url);
+    event.waitUntil(openLink(notification.data));
   }
-
-  // event.waitUntil(openProductLink(action, data));
 });
 
-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);
-  }
+async function openLink(data) {
+  // https://developer.mozilla.org/en-US/docs/Web/API/Clients/openWindow#return_value
+  await clients.openWindow(data.url);
 }

src/App.tsx

@@ -12,13 +12,12 @@ export default function App() {
   }, []);
 
   const handleSubscribeWebPush = async () => {
-    const sw = await navigator.serviceWorker.ready;
+    const serviceWorker = await navigator.serviceWorker.ready;
     const publicKey = 'BHG9NdYdfiCIx7xUS8u2CMhtDD-GWHb6QYuSZ908NZYZHhJEjGjcX0yTjHrWx7gDICmCEUORrLmw3uwOGBqzm2s';
-    const push = await sw.pushManager.subscribe({
+    const push = await serviceWorker.pushManager.subscribe({
       userVisibleOnly: true,
       applicationServerKey: publicKey,
     });
-    console.log(`push subscription :\n\n${JSON.stringify(push, null, 2)}`);
     setSubscription(JSON.stringify(push, null, 2));
   }
 
@@ -32,7 +31,7 @@ export default function App() {
         Subscript Web Push
       </button>
       <div>
-        <textarea rows={10} style={style} value={subscription} />
+        <textarea rows={10} style={style} value={subscription} readOnly={true} />
       </div>
     </div>
   );