add service worker

public/service-worker.js

@@ -0,0 +1,61 @@
+self.addEventListener('push', (event) => {
+  const data = event.data.json()
+  console.log('Push событие получено:', data.type)
+
+  // Отображение уведомления
+  if (data.type === 'notification') {
+    event.waitUntil(
+      self.registration.showNotification(data.notification.title, data.notification.options).then(
+        () => {
+          console.log('Notification создан', data.notification.options.tag)
+        },
+        (e) => {
+          console.error('Notification ошибка создания', e)
+        },
+      ),
+    )
+  } else if (data.type === 'cancelNotification') {
+    event.waitUntil(
+      self.registration
+        .getNotifications({ tag: data.notification.options.tag })
+        .then((notifications) => {
+          notifications.forEach((notification) => {
+            if (
+              notification.tag === data.notification.options.tag ||
+              notification.data.payload.tag === data.notification.options.data.payload.tag // удалить, если notification.tag поддерживают все
+            ) {
+              notification.close()
+              console.log('Notification удален')
+            }
+          })
+        }),
+    )
+  }
+})
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close()
+
+  // Открытие URL из данных уведомления
+  event.waitUntil(
+    clients.matchAll({ type: 'window' }).then((clientList) => {
+      for (const client of clientList) {
+        if (client.url === event.notification.data.url && 'focus' in client) {
+          console.log('клик на уведомление', event.notification.tag)
+
+          return Promise.all([
+            client.focus(),
+            client.postMessage({
+              type: 'notificationClick',
+              tag: event.notification.tag,
+              payload: event.notification.payload,
+            }),
+          ])
+        }
+      }
+      if (clients.openWindow) {
+        return clients.openWindow(event.notification.data.url)
+      }
+    }),
+  )
+})

src/main.ts

@@ -29,6 +29,7 @@ const MyPreset = definePreset(Aura, {
 
 import App from './App.vue'
 import router from './router'
+import { registerServiceWorker } from '@/registerServiceWorker'
 
 const app = createApp(App)
 
@@ -48,4 +49,8 @@ app.use(PrimeVue, {
 
 app.mount('#app')
 
+registerServiceWorker()
+  .then(() => console.log('Service Worker успешно зарегистрирован'))
+  .catch(console.error)
+
 window.PouchDB = PouchDB // it for debug in console only

src/registerServiceWorker.ts

@@ -0,0 +1,14 @@
+export async function registerServiceWorker() {
+  if (!('serviceWorker' in navigator)) {
+    throw new Error('Ваш браузер не поддерживает Service Worker.')
+  }
+
+  try {
+    const registration = await navigator.serviceWorker.register('/service-worker.js')
+    console.log('Service Worker зарегистрирован:', registration)
+    return registration
+  } catch (error) {
+    console.error('Ошибка регистрации Service Worker:', error)
+    throw error
+  }
+}