pwa notifications

listify-client/public/sw.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = 'listify-shell-v1';
+const CACHE_NAME = 'listify-shell-v2';
 const SHELL_ASSETS = ['/', '/index.html', '/manifest.webmanifest', '/pwa-icon.svg'];
 
 self.addEventListener('install', (event) => {
@@ -15,11 +15,7 @@ self.addEventListener('activate', (event) => {
     caches
       .keys()
       .then((keys) =>
-        Promise.all(
-          keys
-            .filter((key) => key !== CACHE_NAME)
-            .map((key) => caches.delete(key)),
-        ),
+        Promise.all(keys.filter((key) => key !== CACHE_NAME).map((key) => caches.delete(key))),
       )
       .then(() => self.clients.claim()),
   );
@@ -63,3 +59,45 @@ self.addEventListener('fetch', (event) => {
     }),
   );
 });
+
+self.addEventListener('push', (event) => {
+  let payload = {};
+
+  try {
+    payload = event.data ? event.data.json() : {};
+  } catch {
+    payload = {};
+  }
+
+  const title = payload.title || 'Listify Tasks';
+  const options = {
+    body: payload.body || 'Du hast offene Tasks.',
+    tag: payload.tag || 'listify-task-digest',
+    icon: '/pwa-icon.svg',
+    badge: '/pwa-icon.svg',
+    data: {
+      url: payload.url || '/tasks',
+    },
+  };
+
+  event.waitUntil(self.registration.showNotification(title, options));
+});
+
+self.addEventListener('notificationclick', (event) => {
+  event.notification.close();
+
+  const targetUrl = event.notification.data?.url || '/tasks';
+  const absoluteUrl = new URL(targetUrl, self.location.origin).href;
+
+  event.waitUntil(
+    self.clients.matchAll({ type: 'window', includeUncontrolled: true }).then((clients) => {
+      for (const client of clients) {
+        if (client.url === absoluteUrl && 'focus' in client) {
+          return client.focus();
+        }
+      }
+
+      return self.clients.openWindow(absoluteUrl);
+    }),
+  );
+});