fix(pwa): handle sw registration error and status (#858)

composables/users.ts

@@ -180,9 +180,6 @@ export function getUsersIndexByUserId(userId: string) {
 }
 
 export async function removePushNotificationData(user: UserLogin, fromSWPushManager = true) {
-  if (!user.pushSubscription)
-    return
-
   // clear push subscription
   user.pushSubscription = undefined
   const { acct } = user.account
@@ -192,9 +189,12 @@ export async function removePushNotificationData(user: UserLogin, fromSWPushMana
   delete useLocalStorage<PushNotificationPolicy>(STORAGE_KEY_NOTIFICATION_POLICY, {}).value[acct]
 
   const pwaEnabled = useRuntimeConfig().public.pwaEnabled
+  const pwa = useNuxtApp().$pwa
+  const registrationError = pwa?.registrationError === true
+  const unregister = pwaEnabled && !registrationError && pwa?.registrationError === true && fromSWPushManager
 
   // we remove the sw push manager if required and there are no more accounts with subscriptions
-  if (pwaEnabled && fromSWPushManager && (users.value.length === 0 || users.value.every(u => !u.pushSubscription))) {
+  if (unregister && (users.value.length === 0 || users.value.every(u => !u.pushSubscription))) {
     // clear sw push subscription
     try {
       const registration = await navigator.serviceWorker.ready

plugins/pwa.client.ts

@@ -2,15 +2,10 @@ import { useRegisterSW } from 'virtual:pwa-register/vue'
 
 export default defineNuxtPlugin(() => {
   const online = useOnline()
+  const registrationError = ref(false)
+  const swActivated = ref(false)
 
-  const {
+  const registerPeriodicSync = (swUrl: string, r: ServiceWorkerRegistration) => {
-    needRefresh, updateServiceWorker,
-  } = useRegisterSW({
-    immediate: true,
-    onRegisteredSW(swUrl, r) {
-      if (!r || r.installing)
-        return
-
     setInterval(async () => {
       if (!online.value)
         return
@@ -26,6 +21,29 @@ export default defineNuxtPlugin(() => {
       if (resp?.status === 200)
         await r.update()
     }, 60 * 60 * 1000 /* 1 hour */)
+  }
+
+  const {
+    needRefresh, updateServiceWorker,
+  } = useRegisterSW({
+    immediate: true,
+    onRegisterError() {
+      registrationError.value = true
+    },
+    onRegisteredSW(swUrl, r) {
+      // should add support in pwa plugin
+      if (r?.active?.state === 'activated') {
+        swActivated.value = true
+        registerPeriodicSync(swUrl, r)
+      }
+      else if (r?.installing) {
+        r.installing.addEventListener('statechange', (e) => {
+          const sw = e.target as ServiceWorker
+          swActivated.value = sw.state === 'activated'
+          if (swActivated.value)
+            registerPeriodicSync(swUrl, r)
+        })
+      }
     },
   })
 
@@ -36,6 +54,8 @@ export default defineNuxtPlugin(() => {
   return {
     provide: {
       pwa: reactive({
+        swActivated,
+        registrationError,
         needRefresh,
         updateServiceWorker,
         close,