Send subscribed event to worker

app/install/EnableNotifications.tsx

@@ -2,6 +2,8 @@ import React from "react"
 import { useEffect } from "react"
 import { usePush } from "../usePush"
 import { request } from "http"
+import urlB64ToUint8Array from "../../b64ToUInt8"
+import pushPublicKey from "../../pushPublicKey"
 
 export default function EnableNotifications({
   onSubscribe,
@@ -30,33 +32,11 @@ function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
   useEffect(() => {
     if (!canSendPush) return
 
-    subscribeToPush(
-      urlB64ToUint8Array(applicationServerPublicKey) as any,
-      (subscription) => {
-        fetch("/api/subscribe", {
-          method: "POST",
-          body: JSON.stringify(subscription),
-        })
-        onSubscribe()
-      }
-    )
+    subscribeToPush(urlB64ToUint8Array(pushPublicKey) as any, () => {
+      navigator.serviceWorker.controller?.postMessage({ type: "subscribed" })
+      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/worker.ts

@@ -40,6 +40,12 @@ export default function start(self: ServiceWorkerGlobalScope) {
   //   )
   // })
 
+  self.addEventListener("message", async function (event) {
+    if ("type" in event && event.type === "subscribed") {
+      await event.waitUntil(submitSubscription(self.registration))
+    }
+  })
+
   self.addEventListener("pushsubscriptionchange", function (event) {
     const waitEvent = event as ExtendableEvent