pwa

listify-client/public/manifest.webmanifest

@@ -0,0 +1,18 @@
+{
+  "name": "Listify",
+  "short_name": "Listify",
+  "description": "Listen, Templates und Aufgaben organisieren.",
+  "start_url": "/lists",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#fffbfe",
+  "theme_color": "#6750a4",
+  "icons": [
+    {
+      "src": "/pwa-icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}

listify-client/public/pwa-icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect width="512" height="512" rx="112" fill="#6750a4"/>
+  <path fill="#ffffff" d="M154 151h220v36H154v-36Zm0 88h220v36H154v-36Zm0 88h160v36H154v-36Z"/>
+  <path fill="#d0bcff" d="m96 151 22 22 46-54 26 22-70 82-50-50 26-22Zm0 176 22 22 46-54 26 22-70 82-50-50 26-22Z"/>
+</svg>

listify-client/public/sw.js

@@ -0,0 +1,65 @@
+const CACHE_NAME = 'listify-shell-v1';
+const SHELL_ASSETS = ['/', '/index.html', '/manifest.webmanifest', '/pwa-icon.svg'];
+
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches
+      .open(CACHE_NAME)
+      .then((cache) => cache.addAll(SHELL_ASSETS))
+      .then(() => self.skipWaiting()),
+  );
+});
+
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches
+      .keys()
+      .then((keys) =>
+        Promise.all(
+          keys
+            .filter((key) => key !== CACHE_NAME)
+            .map((key) => caches.delete(key)),
+        ),
+      )
+      .then(() => self.clients.claim()),
+  );
+});
+
+self.addEventListener('fetch', (event) => {
+  const request = event.request;
+  const url = new URL(request.url);
+
+  if (url.origin !== self.location.origin || url.pathname.startsWith('/api/')) {
+    return;
+  }
+
+  if (request.mode === 'navigate') {
+    event.respondWith(
+      fetch(request)
+        .then((response) => {
+          const responseClone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put('/index.html', responseClone));
+          return response;
+        })
+        .catch(() => caches.match('/index.html')),
+    );
+    return;
+  }
+
+  event.respondWith(
+    caches.match(request).then((cached) => {
+      if (cached) {
+        return cached;
+      }
+
+      return fetch(request).then((response) => {
+        if (request.method === 'GET' && response.ok) {
+          const responseClone = response.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(request, responseClone));
+        }
+
+        return response;
+      });
+    }),
+  );
+});