See what's going on with notifications

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 { request } from "http"
-import urlB64ToUint8Array from "../../b64ToUInt8"
 
 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
+}

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>}>
       {() =>

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(