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

Author: userquin

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,30 +2,48 @@ import { useRegisterSW } from 'virtual:pwa-register/vue'
 
 export default defineNuxtPlugin(() => {
   const online = useOnline()
+  const registrationError = ref(false)
+  const swActivated = ref(false)
+
+  const registerPeriodicSync = (swUrl: string, r: ServiceWorkerRegistration) => {
+    setInterval(async () => {
+      if (!online.value)
+        return
+
+      const resp = await fetch(swUrl, {
+        cache: 'no-store',
+        headers: {
+          'cache': 'no-store',
+          'cache-control': 'no-cache',
+        },
+      })
+
+      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) {
-      if (!r || r.installing)
-        return
-
-      setInterval(async () => {
-        if (!online.value)
-          return
-
-        const resp = await fetch(swUrl, {
-          cache: 'no-store',
-          headers: {
-            'cache': 'no-store',
-            'cache-control': 'no-cache',
-          },
+      // 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)
         })
-
-        if (resp?.status === 200)
-          await r.update()
-      }, 60 * 60 * 1000 /* 1 hour */)
+      }
     },
   })
 
@@ -36,6 +54,8 @@ export default defineNuxtPlugin(() => {
   return {
     provide: {
       pwa: reactive({
+        swActivated,
+        registrationError,
         needRefresh,
         updateServiceWorker,
         close,