update sw

apps/frontend/src/App.vue

@@ -1,7 +1,61 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
+import { registerServiceWorker } from '@/registerServiceWorker'
+
+const router = useRouter()
+const debugEnabled = ref(import.meta.env.DEV)
+const debugItems = ref<string[]>([])
+const debug = (...data: unknown[]) => {
+  if (debugEnabled.value) {
+    debugItems.value.push(JSON.stringify(data))
+  }
+}
+
+provide('debug', debug)
+
+registerServiceWorker()
+  .then(() => {
+    console.log('Service Worker успешно зарегистрирован')
+    navigator.serviceWorker.addEventListener('message', (event) => {
+      if (event.data.type === 'debug') {
+        if ('debug' in event.data && typeof event.data.debug === 'object') {
+          debug(event.data.debug)
+        }
+      } else if (event.data.type === 'notificationClick' && !event.data.matchUrl) {
+        const url = new URL(event.data.url, location.origin)
+        console.debug('go to', `${url.pathname}${url.search}${url.hash}`)
+        router.push(`${url.pathname}${url.search}${url.hash}`)
+      }
+    })
+  })
+  .catch(console.error)
 </script>
 
 <template>
+  <div class="debug gap-2 py-2 flex flex-col" v-if="debugEnabled">
+    <div class="px-2 text-nowrap" v-for="(value, key) in debugItems" :key>
+      <Button
+        icon="pi pi-trash"
+        class="p-button-danger p-button-text"
+        size="small"
+        @click="debugItems.splice(key, 1)"
+      />
+      <span class="font-mono text-xs">{{ value }}</span>
+    </div>
+  </div>
   <RouterView />
 </template>
+
+<style scoped>
+.debug {
+  position: fixed;
+  top: 0;
+  left: 0;
+  max-width: 100vw;
+  max-height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  overflow-y: scroll;
+  color: white;
+}
+</style>

apps/frontend/src/components/ChatSubscribeWebPush.vue

@@ -61,6 +61,8 @@ import { isNotFoundError } from '@/api/PouchDB'
 import { saveUserChatSettings } from '@/api/userChatSettings'
 import { getQrCodeDocument } from '@/api/qrCode'
 
+const debug: (...data: unknown[]) => void = inject('debug')!
+
 // Проверки iOS и запуска из главного экрана
 const isIOS = computed(
   () => /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window && window.MSStream),
@@ -99,7 +101,7 @@ async function requestNotificationPermission() {
   const subscription = await registration.pushManager
     .subscribe(await subscribeOptionsPromise)
     .catch(async (error) => {
-      console.debug('subscribe error', error)
+      debug('subscribe error', error)
       const oldSubscription = await registration.pushManager.getSubscription()
       if (!oldSubscription) {
         throw error
@@ -119,26 +121,23 @@ const getPushSubscription = async () => {
       const permission = await registration.pushManager.permissionState(
         await subscribeOptionsPromise,
       )
-      console.debug('permission', permission)
-      if (permission === 'prompt') {
-        return
-      }
-      if (permission !== 'granted') {
+      debug('permission', permission)
+      if (permission === 'denied') {
         throw new Error(`Разрешение на уведомления не предоставлено: ${permission}`)
       }
 
       const subscription = await registration.pushManager.getSubscription()
       if (subscription) {
-        console.debug('Уже есть активная подписка:', subscription)
+        debug('Уже есть активная подписка:', subscription)
         return subscription
       } else {
-        console.debug('Нет активной подписки на Push-уведомления.')
+        debug('Нет активной подписки на Push-уведомления.')
       }
     } else {
-      console.warn('Push уведомления или Service Worker не поддерживаются в этом браузере.')
+      debug('Push уведомления или Service Worker не поддерживаются в этом браузере.')
     }
   } catch (error) {
-    console.error('Произошла ошибка при получении подписки:', error)
+    debug('Произошла ошибка при получении подписки:', error)
     throw error
   }
 }
@@ -151,7 +150,7 @@ const stage = ref<'receivePushSubscription' | 'createPushSubscription' | 'remove
 const { isPending, isError, error, mutate } = useMutation({
   mutationKey: [stage],
   mutationFn: async () => {
-    console.debug('stage', stage.value)
+    debug({ stage: stage.value })
     try {
       if (stage.value === 'receivePushSubscription') {
         const chatSettingsDocument = await getUserChatSettingsDocument({
@@ -160,13 +159,16 @@ const { isPending, isError, error, mutate } = useMutation({
           user_chat_role,
         }).catch((error) => {
           if (!isNotFoundError(error)) {
-            console.debug('chatSettingsDocument error not found - its ok', error)
+            debug('chatSettingsDocument error', error)
             throw error
           }
-          console.debug('chatSettingsDocument error', error)
+          debug('chatSettingsDocument not found') // it's ok
         })
         if (chatSettingsDocument) {
-          console.debug('chatSettingsDocument', chatSettingsDocument)
+          debug(
+            'chatSettingsDocument.is_push_notification_enabled',
+            chatSettingsDocument.is_push_notification_enabled,
+          )
         }
         if (
           (chatSettingsDocument && chatSettingsDocument.is_push_notification_enabled) ||
@@ -186,9 +188,11 @@ const { isPending, isError, error, mutate } = useMutation({
             }
             enabled.value = true
             stage.value = 'removePushSubscription'
+            debug('subscribed')
           } else {
             stage.value = 'createPushSubscription'
             enabled.value = false
+            debug('have to createPushSubscription')
           }
         } else {
           stage.value = 'createPushSubscription'
@@ -211,7 +215,7 @@ const { isPending, isError, error, mutate } = useMutation({
       }
     } catch (error) {
       enabled.value = false
-      console.debug('unknown error at stage ', stage.value, error)
+      debug('unknown error at stage ', stage.value, error)
       throw error
     }
     return null

apps/frontend/src/main.ts

@@ -31,7 +31,6 @@ const MyPreset = definePreset(Aura, {
 
 import App from './App.vue'
 import router from './router'
-import { registerServiceWorker } from '@/registerServiceWorker'
 
 const app = createApp(App)
 
@@ -61,21 +60,8 @@ app.use(PrimeVue, {
     },
   },
 })
+app.config.globalProperties.$swDebug = ref([])
 
 app.mount('#app')
 
-registerServiceWorker()
-  .then(() => {
-    console.log('Service Worker успешно зарегистрирован')
-    navigator.serviceWorker.addEventListener('message', (event) => {
-      console.debug('serviceWorker message', event.data)
-      if (event.data.type === 'notificationClick' && !event.data.matchUrl) {
-        const url = new URL(event.data.url, location.origin)
-        console.debug('go to', `${url.pathname}${url.search}${url.hash}`)
-        router.push(`${url.pathname}${url.search}${url.hash}`)
-      }
-    })
-  })
-  .catch(console.error)
-
 window.PouchDB = PouchDB // it for debug in console only

apps/frontend/src/registerServiceWorker.ts

@@ -3,9 +3,33 @@ export async function registerServiceWorker() {
     throw new Error('Ваш браузер не поддерживает Service Worker.')
   }
 
+  function requestDebugVersion() {
+    navigator.serviceWorker?.controller?.postMessage({
+      type: 'requestDebugVersion',
+    })
+  }
+
+  navigator.serviceWorker.addEventListener('controllerchange', () => {
+    console.log('Service Worker controller has changed.')
+    requestDebugVersion()
+  })
+
   try {
     const registration = await navigator.serviceWorker.register('/service-worker.js')
     console.log('Service Worker зарегистрирован:', registration)
+
+    requestDebugVersion()
+
+    window.addEventListener(
+      'focus',
+      () => {
+        navigator.serviceWorker?.controller?.postMessage({
+          type: 'focused',
+        })
+      },
+      {},
+    )
+
     return registration
   } catch (error) {
     console.error('Ошибка регистрации Service Worker:', error)