feat: PWA overhaul

- Remove debug artifact from login page ('Use Link component: HOME') - Full icon set: 48/72/96/128/144/152/192/384/512 + maskable variants - Proper manifest: display_override, shortcuts, categories, scope - Better service worker: offline fallback page, pre-caching, stale-while-revalidate - Custom install banner (Android beforeinstallprompt + iOS instructions) - Connection status indicator (online/offline toast) - Updated index.html with proper favicon sizes and meta tags
2026-07-02 13:51:42 -04:00
parent f6f63ecd2b
commit 0b645fe765
22 changed files with 379 additions and 37 deletions
@@ -1,22 +1,89 @@
 {
-  "name": "Dumpster",
+  "name": "Dumpster Chat",
  "short_name": "Dumpster",
  "description": "A chaotic, self-hosted Discord-like platform",
  "start_url": "/",
+  "scope": "/",
  "display": "standalone",
+  "display_override": ["window-controls-overlay", "standalone"],
+  "orientation": "any",
  "background_color": "#282828",
  "theme_color": "#282828",
-  "orientation": "any",
+  "categories": ["social", "communication"],
+  "lang": "en",
+  "dir": "ltr",
  "icons": [
+    {
+      "src": "/icons/icon-48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-128.png",
+      "sizes": "128x128",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/icon-152.png",
+      "sizes": "152x152",
+      "type": "image/png"
+    },
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-192-maskable.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/icons/icon-384.png",
+      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
-      "type": "image/png"
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-512-maskable.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "shortcuts": [
+    {
+      "name": "Create Account",
+      "short_name": "Register",
+      "url": "/?register=true",
+      "icons": [
+        {
+          "src": "/icons/icon-96.png",
+          "sizes": "96x96"
+        }
+      ]
    }
  ]
 }
@@ -0,0 +1,103 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#282828" />
+    <title>Dumpster - Offline</title>
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      body {
+        background: #282828;
+        color: #ebdbb2;
+        font-family: 'Courier New', Courier, monospace;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        padding: 1rem;
+      }
+      .container {
+        text-align: center;
+        max-width: 400px;
+      }
+      .icon {
+        font-size: 4rem;
+        margin-bottom: 1rem;
+      }
+      h1 {
+        color: #fe8019;
+        font-size: 1.5rem;
+        margin-bottom: 0.5rem;
+      }
+      p {
+        color: #a89984;
+        font-size: 0.875rem;
+        line-height: 1.6;
+        margin-bottom: 1.5rem;
+      }
+      .status {
+        display: inline-block;
+        padding: 0.25rem 0.75rem;
+        border: 1px solid #928374;
+        color: #928374;
+        font-size: 0.75rem;
+      }
+      .status.online {
+        border-color: #b8bb26;
+        color: #b8bb26;
+      }
+      button {
+        background: transparent;
+        border: 1px solid #fe8019;
+        color: #fe8019;
+        font-family: inherit;
+        font-size: 0.875rem;
+        padding: 0.5rem 1.5rem;
+        cursor: pointer;
+        margin-top: 1rem;
+      }
+      button:hover {
+        background: #fe8019;
+        color: #282828;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="icon">📡</div>
+      <h1>YOU ARE OFFLINE</h1>
+      <p>
+        Dumpster can't reach the server. Check your connection and try again.
+        Messages will sync when you're back online.
+      </p>
+      <div class="status" id="status">OFFLINE</div>
+      <br />
+      <button onclick="location.reload()">[RETRY]</button>
+    </div>
+    <script>
+      function updateStatus() {
+        const el = document.getElementById('status');
+        if (navigator.onLine) {
+          el.textContent = 'ONLINE';
+          el.className = 'status online';
+          setTimeout(() => location.reload(), 1000);
+        } else {
+          el.textContent = 'OFFLINE';
+          el.className = 'status';
+        }
+      }
+      window.addEventListener('online', updateStatus);
+      window.addEventListener('offline', updateStatus);
+      updateStatus();
+      // Poll connectivity every 10s
+      setInterval(() => {
+        if (navigator.onLine) {
+          fetch('/', { method: 'HEAD', cache: 'no-cache' })
+            .then(() => location.reload())
+            .catch(() => {});
+        }
+      }, 10000);
+    </script>
+  </body>
+</html>
@@ -1,61 +1,79 @@
-// ponytail: bump CACHE_NAME on each deploy, or stale HTML breaks assets.
-// Network-first for navigation (index.html) keeps hashed asset refs fresh.
-const CACHE_NAME = 'dumpster-v3';
+// Dumpster PWA Service Worker
+// Bump CACHE_VERSION on each deploy to force re-cache of hashed assets.
+const CACHE_VERSION = 'dumpster-v4';
+const OFFLINE_URL = '/offline.html';

-self.addEventListener('install', () => {
-  self.skipWaiting();
+// Assets to pre-cache on install (shell files)
+const PRECACHE_URLS = [
+  '/',
+  '/offline.html',
+  '/favicon.png',
+  '/icons/icon-192.png',
+  '/icons/icon-512.png',
+];
+
+// Install: pre-cache shell and skip waiting
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_VERSION).then((cache) => cache.addAll(PRECACHE_URLS)).then(() => self.skipWaiting())
+  );
 });

+// Activate: clean old caches and claim clients
 self.addEventListener('activate', (event) => {
  event.waitUntil(
-    caches.keys().then((names) =>
-      Promise.all(names.filter((n) => n !== CACHE_NAME).map((n) => caches.delete(n)))
-    )
+    caches
+      .keys()
+      .then((names) => Promise.all(names.filter((n) => n !== CACHE_VERSION).map((n) => caches.delete(n))))
+      .then(() => self.clients.claim())
  );
-  self.clients.claim();
 });

+// Fetch handler
 self.addEventListener('fetch', (event) => {
  if (event.request.method !== 'GET') return;
  const url = new URL(event.request.url);

-  // Skip API + WS
+  // Skip API, WebSocket, and cross-origin requests
  if (url.pathname.startsWith('/api/') || url.pathname.startsWith('/ws')) return;
-
-  // Skip cross-origin requests (e.g. Giphy, LiveKit)
  if (url.origin !== self.location.origin) return;

-  // Network-first for navigation requests (index.html) — always fetch fresh HTML
-  // so hashed asset references stay current after deploys.
+  // Navigation requests: network-first, offline fallback
  if (event.request.mode === 'navigate') {
    event.respondWith(
      fetch(event.request)
        .then((response) => {
          const clone = response.clone();
-          caches.open(CACHE_NAME).then((c) => c.put(event.request, clone));
+          caches.open(CACHE_VERSION).then((c) => c.put(event.request, clone));
          return response;
        })
-        .catch(() => caches.match('/index.html'))
+        .catch(() =>
+          caches.match(event.request).then((cached) => cached || caches.match(OFFLINE_URL))
+        )
    );
    return;
  }

-  // Cache-first for static assets (JS, CSS, images, fonts)
+  // Static assets (JS, CSS, images, fonts): stale-while-revalidate
+  // Serve cached immediately, fetch fresh in background
  event.respondWith(
    caches.match(event.request).then((cached) => {
-      const fetchPromise = fetch(event.request).then((response) => {
-        if (response.ok) {
-          const clone = response.clone();
-          caches.open(CACHE_NAME).then((c) => c.put(event.request, clone));
-        }
-        return response;
-      }).catch(() => cached);
+      const fetchPromise = fetch(event.request)
+        .then((response) => {
+          if (response.ok) {
+            const clone = response.clone();
+            caches.open(CACHE_VERSION).then((c) => c.put(event.request, clone));
+          }
+          return response;
+        })
+        .catch(() => cached);

      return cached || fetchPromise;
    })
  );
 });

+// Push notifications
 self.addEventListener('push', (event) => {
  if (!event.data) return;
  const data = event.data.json();
@@ -65,11 +83,14 @@ self.addEventListener('push', (event) => {
      icon: '/icons/icon-192.png',
      badge: '/icons/icon-192.png',
      vibrate: [100, 50, 100],
+      tag: data.tag || 'dumpster-notification',
+      renotify: true,
      data: { url: data.url || '/' },
    })
  );
 });

+// Notification click: focus or open window
 self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(