open url by send message to page

apps/frontend/public/service-worker.js

@@ -68,25 +68,26 @@ self.addEventListener('notificationclick', (event) => {
   }
 
   function getNotificationUrl(urlToOpen) {
-    return fetch(urlToOpen, {
-      redirect: 'manual',
-      method: 'HEAD',
-      cache: 'no-cache',
-    })
-      .then((response) => {
-        console.log('response.url', response.url)
-        console.log('response.type', response.url)
-        if (response && response.type === 'opaqueredirect') {
-          const location = response.headers.get('location')
-          console.log('headers location', location)
-          return location
-        }
-        return response.url
-      })
-      .catch((error) => {
-        console.debug('erro in getNotificationUrl', error)
     return urlToOpen
-      })
+    // return fetch(urlToOpen, {
+    //   redirect: 'manual',
+    //   method: 'HEAD',
+    //   cache: 'no-cache',
+    // })
+    //   .then((response) => {
+    //     console.log('response.url', response.url)
+    //     console.log('response.type', response.url)
+    //     if (response && response.type === 'opaqueredirect') {
+    //       const location = response.headers.get('location')
+    //       console.log('headers location', location)
+    //       return location
+    //     }
+    //     return response.url
+    //   })
+    //   .catch((error) => {
+    //     console.debug('erro in getNotificationUrl', error)
+    //     return urlToOpen
+    //   })
   }
 
   // Открытие URL из данных уведомления
@@ -102,28 +103,46 @@ self.addEventListener('notificationclick', (event) => {
           if (client.url === urlToOpen && 'focus' in client) {
             console.log('focus')
 
-            return client.focus()
+            return Promise.all([
-            // return Promise.all([
+              client.postMessage({
-            //   client.focus(),
+                type: 'notificationClick',
-            //   client.postMessage({
+                tag: event.notification.tag,
-            //     type: 'notificationClick',
+                payload: event.notification.payload,
-            //     tag: event.notification.tag,
+                matchUrl: true,
-            //     payload: event.notification.payload,
+              }),
-            //   }),
+              client.focus(),
-            // ])
+            ])
           }
         }
-        if (clients.openWindow) {
+        return Promise.resolve()
-          console.log('open new window', urlToOpen)
+          .then(() => {
-          return clients.openWindow(urlToOpen).then((client) => {
+            if (!clients.openWindow) {
-            if (!client) {
+              throw new Error('clients.openWindow not available')
-              console.log('new window not opened')
+            }
+            return clients.openWindow(urlToOpen).then((newClient) => {
+              if (!newClient) {
+                throw new Error('new window not opened')
               }
             })
-        } else {
+          })
-          console.log('clients.openWindow not available')
+          .catch((error) => {
+            console.debug('Error', error)
+            for (const client of clientList) {
+              return Promise.all([
+                client.postMessage({
+                  type: 'notificationClick',
+                  url: urlToOpen,
+                  tag: event.notification.tag,
+                  payload: event.notification.payload,
+                  matchUrl: false,
+                  msg: 'clients.openWindow not available',
+                }),
+                client.focus(),
+              ])
             }
           })
+      })
+
       .catch((error) => {
         console.error(error)
       }),

apps/frontend/src/main.ts

@@ -65,7 +65,17 @@ app.use(PrimeVue, {
 app.mount('#app')
 
 registerServiceWorker()
-  .then(() => console.log('Service Worker успешно зарегистрирован'))
+  .then((registration) => {
+    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