Refactor code and suppoort iOS web push

Author: aaronamm

GenWebPushKey.js

@@ -0,0 +1,8 @@
+// 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');
+
+//VAPID keys should be generated only once with: 
+const vapidKeys = webPush.generateVAPIDKeys();
+console.log(vapidKeys);

PushMessageFromServer.js

@@ -4,8 +4,7 @@
 const webPush = require('web-push');
 
 // VAPID keys should be generated only once with: 
-// const vapidKeys = webPush.generateVAPIDKeys();
-// console.log(vapidKeys);
+// node GenWebPushKey.js
 
 const vapidKeys = {
   publicKey: 'BHG9NdYdfiCIx7xUS8u2CMhtDD-GWHb6QYuSZ908NZYZHhJEjGjcX0yTjHrWx7gDICmCEUORrLmw3uwOGBqzm2s',
@@ -21,11 +20,11 @@ webPush.setVapidDetails(
 // This is an sample subscription object that we get after subscript on browser
 const pushSubscription =
 {
-  "endpoint": "",
+  "endpoint": "https://fcm.googleapis.com/fcm/send/eh4su7PQuF4:APA91bGJ2lTdArT_n0zLEkth_p7NTqyQ41KtXO5p0SsbcQ2iGgLHz1Y8FyDFS-MnWZjD5e6fair2TozX1bvccy_pHo4k-B3Ov_SLI-7lRvTE1_dppXQvP6IawxnSTBQk6AK5o4ks_mHv",
   "expirationTime": null,
   "keys": {
-    "p256dh": "",
-    "auth": ""
+    "p256dh": "BEIlI4DO6N7gKHmT_FMHVHt8D2X4FWJp3vx9L8MOONfOsYNuYuxWAUWsscEWH4q5c-t6l5s769gGJr74n40H74w",
+    "auth": "HSyGvAqddC7T0crQ3B6bHw"
   }
 }
 
@@ -34,4 +33,7 @@ const payload = {
   url: 'https://www.dotnetthailand.com/web-frameworks/orchard-core-cms/why-orchard-core-cms'
 };
 
-webPush.sendNotification(pushSubscription, JSON.stringify(payload));
+webPush.sendNotification(
+  pushSubscription,
+  JSON.stringify(payload)
+);

README.md

@@ -5,23 +5,25 @@
 - CD to the root folder of the project and run `yarn` to install all Node packages.
 - 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.
+- Use copied 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 subscription object that we get after a user's subscribed web push in `PushMessageFromServer.js`
+# How to send a push message from a server
+- Set a `pushSubscription` object in `PushMessageFromServer.js`, we can get it after subscribing.
 - Then execute the following command:
-  ```sh
-  $ node PushMessageFromServer.js
-  ```
+```sh
+$ node PushMessageFromServer.js
+```
 
 # Trouble shooting
-## Notification does not always show as banner on Windows.
+
+## Notification does not always show as a 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.
+- You may need to manually update service worker. Open a Chrome developer tool with `ctrl+shift+i` keys 
+  and select an 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
@@ -30,28 +32,39 @@
   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.
+- Use a public key in subscription script (PushSubscription.tsx)
+- A user subscribes web push with subscription script (PushSubscription.tsx) and bet subscription object.
+- Use public, private keys and subscription object on server script (PushMessageFromServer.js) to send push message to a subscribed 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
+- Use a 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/.
+# Get subscription object on a published website for testing only
+- It can be accessed as http://www.dotnetthailand.com/web-push-api-example/.
 
-# Useful articles for .NET Web Push
+# For using Web Push in .NET project. Here are some useful articles:
 - 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://knowledgebase.webengage.com/docs/web-push-image-text-specifications
+- https://web-push-book.gauntface.com/demos/notification-examples/
+
+# Requirements for Web Push on iOS
+- iOS 16.4+ (Released March 2023)
+- Safari or any iOS browser using WebKit (all iOS browsers use WebKit, including Chrome, Firefox, Edge)
+- Your site must be:
+  - Served over HTTPS
+  - Installed as a PWA (Progressive Web App) via "Add to Home Screen"
+  - Must use the standard Push API + Notification API
 
-# Upgrade React to major release version
-  ```sh
+# How Upgrade React to the major release version
+```sh
   yarn upgrade react --latest
   yarn upgrade react-dom --latest
   yarn upgrade react-dom --latest
   yarn upgrade @types/react --latest
   yarn upgrade @types/react-dom --latest
-  ```
+```
+

public/icon-192.png

@@ -4,8 +4,12 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>React App</title>
+  <title>Web push example</title>
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+
+  <!-- For iOS web push -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <meta name="apple-mobile-web-app-capable" content="yes">
 </head>
 
 <body>

public/index.html

@@ -0,0 +1,13 @@
+{
+  "name": "Web push example",
+  "short_name": "Web push",
+  "start_url": "/",
+  "display": "standalone",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ]
+}

public/manifest.json

@@ -2,6 +2,7 @@
 // https://web-push-book.gauntface.com/display-a-notification/
 self.addEventListener('push', (event) => {
   // https://developer.mozilla.org/en-US/docs/Web/API/PushEvent/data
+  // { title: '', body: '', url: ''}
   const payload = event.data.json();
   console.log(`payload: ${JSON.stringify(payload, null, 2)}`);
 
@@ -50,7 +51,6 @@ self.addEventListener('push', (event) => {
 //   }
 // });
 
-
 self.addEventListener('notificationclick', (event) => {
   const { action, notification } = event;
   notification.close();
@@ -59,7 +59,6 @@ self.addEventListener('notificationclick', (event) => {
   event.waitUntil(sendMessage(event, url));
 });
 
-
 // https://developer.mozilla.org/en-US/docs/Web/API/Clients
 async function sendMessage(event, content) {
   // If we didn't find an existing chat window,
@@ -107,7 +106,6 @@ async function sendMessage(event, content) {
     //await chatClient.focus();
   }
 
-
   // Send a message to the client.
   chatClient.postMessage({
     type: 'clipboard',
@@ -121,7 +119,6 @@ async function openLink(data) {
   await clients.openWindow(data.url);
 }
 
-
 // https://stackoverflow.com/a/63917373/1872200
 // async function is a function that synchronously returns a promise
 async function showNotificationAsync(payload, options) {

public/service-worker.js

@@ -0,0 +1,101 @@
+import React from 'react';
+
+const publicKey = 'BHG9NdYdfiCIx7xUS8u2CMhtDD-GWHb6QYuSZ908NZYZHhJEjGjcX0yTjHrWx7gDICmCEUORrLmw3uwOGBqzm2s';
+
+// https://pushpad.xyz/blog/the-notification-prompt-can-only-be-triggered-by-a-user-gesture-on-some-browsers
+// https://pushpad.xyz/blog/web-push-notifications-without-a-service-worker-in-the-root
+export default function PushMessageFromClient() {
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/Notification/requestPermission_static
+  const notify = async () => {
+    try {
+      await requestWebPushPermission();
+
+      // // We do not need service worker for notifation
+      // var notification = new Notification('Notification title', {
+      //   icon: 'https://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
+      //   body: "Hey there! You've been notified!",
+      // });
+
+      let registration = await navigator.serviceWorker.getRegistration();
+      if (registration) {
+        console.log('found existing registration', registration);
+      } else {
+        console.log('no registration, register new service worker');
+        registration = await navigator.serviceWorker.register('./service-worker.js');
+      }
+
+      const serviceWorker = await navigator.serviceWorker.ready;
+      let subscription = await serviceWorker.pushManager.getSubscription();
+      if (subscription) {
+        console.log('found existing subscription', subscription);
+      } else {
+        console.log('no subscription, subscribe new web push');
+        subscription = await serviceWorker.pushManager.subscribe({
+          userVisibleOnly: true,
+          applicationServerKey: publicKey,
+        });
+      }
+
+      const payload = {
+        title: 'Title text',
+        body: 'Body message',
+        url: 'https://www.codesanook.com'
+      };
+
+      const options = {
+        body: payload.body,
+        vibrate: [300, 100, 400], // Vibrate 300ms, pause 100ms, then vibrate 400ms
+        icon: './favicon.ico',
+        silent: false,
+        // Chrome does not support a sound attribute https://github.com/GoogleChromeLabs/airhorn/issues/18
+      };
+
+      await registration.showNotification(payload.title, options);
+
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  const requestWebPushPermission = async () => {
+    if (!('Notification' in window)) {
+      // Check if the browser supports notifications
+      alert('This browser does not support web push notification');
+      return Promise.reject();
+    }
+
+    if (Notification.permission === 'granted') {
+      return Promise.resolve();
+    }
+
+    // Check whether notification permissions have already been granted;
+    // if so, create a notification
+    if (Notification.permission === 'denied') {
+      // We need to ask a user to reset permission
+      alert('Denied. Please reset permission to send web push notification');
+      return Promise.reject();
+    }
+
+    // We need to ask the user for permission
+    const permission = await Notification.requestPermission();
+    if (permission === 'granted') {
+      alert('Granted');
+      return Promise.resolve();
+    }
+
+    alert('Default to denied. Please reset permission to send web push notification');
+    return Promise.reject();
+  }
+
+  return (
+    <div>
+      Push message from client
+      <div>
+        <button onClick={notify}>
+          Send push message from client
+        </button>
+      </div>
+    </div>
+  )
+}

src/PushMessageFromClient.tsx

@@ -1,23 +1,34 @@
 import { useEffect, useState } from 'react';
 
+const publicKey = 'BHG9NdYdfiCIx7xUS8u2CMhtDD-GWHb6QYuSZ908NZYZHhJEjGjcX0yTjHrWx7gDICmCEUORrLmw3uwOGBqzm2s';
+
 export default function PushSubscription() {
   const [subscription, setSubscription] = useState('');
+
   useEffect(() => {
     window.addEventListener('load', async () => {
-      const sw = await navigator.serviceWorker.register('./service-worker.js');
+      const serviceWorker = await navigator.serviceWorker.register('./service-worker.js');
       console.log('A service worker has been registered.')
-      console.log(sw);
+      console.log(serviceWorker);
     });
   }, []);
 
   const handleSubscribeWebPush = async () => {
+
+    // Make sure the service worker is ready, before subscribing a web push.
     const serviceWorker = await navigator.serviceWorker.ready;
-    const publicKey = 'BHG9NdYdfiCIx7xUS8u2CMhtDD-GWHb6QYuSZ908NZYZHhJEjGjcX0yTjHrWx7gDICmCEUORrLmw3uwOGBqzm2s';
-    const push = await serviceWorker.pushManager.subscribe({
-      userVisibleOnly: true,
-      applicationServerKey: publicKey,
-    });
-    setSubscription(JSON.stringify(push, null, 2));
+    let subscription = await serviceWorker.pushManager.getSubscription();
+    if (subscription) {
+      console.log('found existing subscription', subscription);
+    } else {
+      console.log('no subscription, subscribe new web push');
+      subscription = await serviceWorker.pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: publicKey,
+      });
+    }
+
+    setSubscription(JSON.stringify(subscription, null, 2));
   }
 
   const style = {
@@ -27,7 +38,7 @@ export default function PushSubscription() {
   return (
     <div>
       <button onClick={handleSubscribeWebPush}>
-        Subscript Web Push
+        Subscribe Web Push
       </button>
       <div>
         <textarea rows={10} style={style} value={subscription} readOnly={true} />

src/PushSubscription.tsx

@@ -1,7 +1,15 @@
-import PushSubscription from './PushSubscription';
 import { createRoot } from 'react-dom/client';
 
+import PushSubscription from './PushSubscription';
+import PushMessageFromClient from './PushMessageFromClient';
+
 // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis
 const container = document.getElementById('root') as HTMLElement
 const root = createRoot(container);
-root.render(<PushSubscription />);
+
+root.render(
+  <div>
+    <PushSubscription />
+    <PushMessageFromClient />
+  </div>
+);