debugging

frontend/vue-app/src/components/notification/PushOptIn.vue

@@ -1,13 +1,6 @@
 <template>
   <div v-if="showBanner" class="push-opt-in-banner" role="status" aria-live="polite">
-    <template v-if="errorDetail">
-      <span class="push-opt-in-text push-opt-in-error">
-        Notification setup failed: {{ errorDetail }}
-      </span>
-      <button class="btn btn-primary push-opt-in-btn" @click="onEnable">Retry</button>
-      <button class="push-opt-in-dismiss" @click="dismiss" aria-label="Dismiss">✕</button>
-    </template>
-    <template v-else-if="permissionState === 'default'">
+    <template v-if="permissionState === 'default'">
       <span class="push-opt-in-text"
         >Enable notifications to stay updated on chores and rewards.</span
       >
@@ -25,11 +18,10 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { subscribeToPushWithResult, getPushPermissionState } from '@/services/pushSubscription'
+import { subscribeToPushWithResult } from '@/services/pushSubscription'
 
 const permissionState = ref<NotificationPermission | 'unsupported'>('default')
 const dismissed = ref(false)
-const errorDetail = ref<string | null>(null)
 
 const showBanner = ref(false)
 
@@ -40,34 +32,25 @@ onMounted(async () => {
   permissionState.value = Notification.permission
   if (permissionState.value === 'granted') {
     // Already granted — ensure subscription is registered silently
-    const result = await subscribeToPushWithResult()
-    if (!result.ok) {
-      errorDetail.value = result.detail ?? result.reason
-      showBanner.value = true
-    }
+    subscribeToPushWithResult()
     return
   }
   showBanner.value = true
 })
 
 async function onEnable() {
-  errorDetail.value = null
   const result = await subscribeToPushWithResult()
   if (result.ok) {
     permissionState.value = 'granted'
     showBanner.value = false
   } else {
     permissionState.value = Notification.permission as NotificationPermission
-    if (result.reason !== 'permission_denied') {
-      errorDetail.value = result.detail ?? result.reason
-    }
   }
 }
 
 function dismiss() {
   dismissed.value = true
   showBanner.value = false
-  errorDetail.value = null
 }
 </script>
 
@@ -105,10 +88,4 @@ function dismiss() {
   padding: 0 0.25rem;
   line-height: 1;
 }
-
-.push-opt-in-error {
-  color: var(--danger, #c0392b);
-  font-size: 0.82rem;
-  word-break: break-all;
-}
 </style>

frontend/vue-app/src/services/pushSubscription.ts

@@ -59,7 +59,12 @@ export async function subscribeToPushWithResult(): Promise<PushSubscribeResult>
 
   let registration: ServiceWorkerRegistration
   try {
-    // Timeout after 10 s — if SW never activates, don't hang forever
+    // Explicitly register the SW so we don't race against index.html's 'load' handler.
+    // navigator.serviceWorker.register() is idempotent — it returns the existing
+    // registration if one already exists and does not re-install the worker.
+    await navigator.serviceWorker.register('/sw.js')
+
+    // Now wait for it to become active. Use a generous timeout for slow mobile networks.
     registration = await Promise.race([
       navigator.serviceWorker.ready,
       new Promise<never>((_, reject) =>