getSubscription returns subscription at the start of the current session, so rely on the result of the subscribe call

api/subscriptionEndpoints.test.ts

@@ -21,10 +21,6 @@ describe("/api/subscription", () => {
     mockedCreateSubscription.mockImplementation((subscription) =>
       Promise.resolve({ id: 40, subscription })
     )
-
-    mockedUpdateSubscription.mockImplementation((subscription, id) =>
-      Promise.resolve({ id, subscription })
-    )
   })
 
   test("POST", async () => {

app/install/EnableNotifications.tsx

@@ -32,10 +32,16 @@ function EnableButton({ onSubscribe }: { onSubscribe: () => void }) {
   useEffect(() => {
     if (!canSendPush) return
 
-    subscribeToPush(urlB64ToUint8Array(pushPublicKey) as any, () => {
+    subscribeToPush(
-      navigator.serviceWorker.controller?.postMessage({ type: "subscribed" })
+      urlB64ToUint8Array(pushPublicKey) as any,
-      onSubscribe()
+      (subscription) => {
-    })
+        navigator.serviceWorker.controller?.postMessage({
+          type: "subscribed",
+          subscription,
+        })
+        onSubscribe()
+      }
+    )
   }, [canSendPush])
 
   return <button onClick={subscribe}>Enable Notifications</button>

app/worker.ts

@@ -41,8 +41,17 @@ export default function start(self: ServiceWorkerGlobalScope) {
   // })
 
   self.addEventListener("message", async function (event) {
-    if ("type" in event && event.type === "subscribed") {
+    if (
-      await event.waitUntil(submitSubscription(self.registration))
+      "type" in event &&
+      event.type === "subscribed" &&
+      "subscription" in event
+    ) {
+      await event.waitUntil(
+        submitSubscription(
+          self.registration,
+          event.subscription as PushSubscription
+        )
+      )
     }
   })
 
@@ -51,7 +60,12 @@ export default function start(self: ServiceWorkerGlobalScope) {
 
     waitEvent.waitUntil(
       (async () => {
-        const newSubscription = await submitSubscription(self.registration)
+        const existingSubscription =
+          await self.registration.pushManager.getSubscription()
+        const newSubscription = await submitSubscription(
+          self.registration,
+          existingSubscription
+        )
 
         const clients = await self.clients.matchAll()
 
@@ -70,10 +84,12 @@ export default function start(self: ServiceWorkerGlobalScope) {
   })
 }
 
-async function submitSubscription(registration: ServiceWorkerRegistration) {
+async function submitSubscription(
+  registration: ServiceWorkerRegistration,
+  subscription: PushSubscription | null
+) {
   const db = database()
 
-  const subscription = await registration.pushManager.getSubscription()
   if (subscription === null) return
 
   const existingSubscriptionId = await db.subscriptions.get(1)