From 93340fb1ddf35fdf4efbe49fa95067aad7b9948a Mon Sep 17 00:00:00 2001
From: Jeff <jeff.m.lieb@gmail.com>
Date: Sat, 12 Oct 2024 12:11:51 -0400
Subject: [PATCH] See what's going on with notifications

---
 app/install/EnableNotifications.tsx | 30 ++++++++++++++++++++++++++---
 app/routes/_index.tsx               |  4 ++++
 app/worker.ts                       | 21 ++++++++++++++++++--
 3 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/app/install/EnableNotifications.tsx b/app/install/EnableNotifications.tsx
index 24a792e..3527d3f 100644
--- a/app/install/EnableNotifications.tsx
+++ b/app/install/EnableNotifications.tsx
@@ -1,8 +1,7 @@
 import React from "react"
 import { useEffect } from "react"
 import { usePush } from "../usePush"
-import pushPublicKey from "../../pushPublicKey"
-import urlB64ToUint8Array from "../../b64ToUInt8"
+import { request } from "http"
 
 export default function EnableNotifications({
   onSubscribe,
@@ -31,8 +30,33 @@ function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
   useEffect(() => {
     if (!canSendPush) return
 
-    subscribeToPush(urlB64ToUint8Array(pushPublicKey) as any, onSubscribe)
+    subscribeToPush(
+      urlB64ToUint8Array(applicationServerPublicKey) as any,
+      (subscription) => {
+        fetch("/api/subscribe", {
+          method: "POST",
+          body: JSON.stringify(subscription),
+        })
+        onSubscribe()
+      }
+    )
   }, [canSendPush])
 
   return <button onClick={subscribe}>Enable Notifications</button>
 }
+
+const applicationServerPublicKey =
+  "BDTbzdtzJxwV0sscdsXla-GKvlcxqQr7edEfkX8-papwvvV1UVc3IMyRacl1BbgTi31nWPji2wKCZkjf1l5iX7Y"
+
+function urlB64ToUint8Array(base64String: string) {
+  const padding = "=".repeat((4 - (base64String.length % 4)) % 4)
+  const base64 = (base64String + padding).replace(/\-/g, "+").replace(/_/g, "/")
+
+  const rawData = window.atob(base64)
+  const outputArray = new Uint8Array(rawData.length)
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i)
+  }
+  return outputArray
+}
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 5beb513..13b5b64 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -93,6 +93,10 @@ function TackUpNow({
 
   const [isInstalled, setIsInstalled] = useState(installed)
 
+  useEffect(() => {
+    window.addEventListener("message", console.log)
+  }, [])
+
   return (
     <ClientOnly fallback={<div>Loading</div>}>
       {() =>
diff --git a/app/worker.ts b/app/worker.ts
index a90fa1f..3afcdbc 100644
--- a/app/worker.ts
+++ b/app/worker.ts
@@ -43,9 +43,24 @@ export default function start(self: ServiceWorkerGlobalScope) {
   self.addEventListener("pushsubscriptionchange", function (event) {
     const waitEvent = event as ExtendableEvent
 
-    waitEvent.waitUntil(submitSubscription(self.registration))
+    waitEvent.waitUntil(
+      (async () => {
+        const newSubscription = await submitSubscription(self.registration)
 
-    self.registration.pushManager.getSubscription()
+        const clients = await self.clients.matchAll()
+
+        await Promise.all(
+          clients.map(async (client) =>
+            client.postMessage({
+              subscription:
+                await self.registration.pushManager.getSubscription(),
+              event,
+              newSubscription,
+            })
+          )
+        )
+      })()
+    )
   })
 }
 
@@ -66,6 +81,8 @@ async function submitSubscription(registration: ServiceWorkerRegistration) {
   await (existingSubscriptionId === undefined
     ? postSubscription(newSubscription, db)
     : putSubscription(newSubscription, existingSubscriptionId.subscriptionId))
+
+  return newSubscription
 }
 
 async function postSubscription(