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
@@ -2,14 +2,31 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <link rel="apple-touch-icon" href="/logo.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+
+    <!-- PWA Meta Tags -->
+    <meta name="theme-color" content="#282828" media="(prefers-color-scheme: dark)" />
    <meta name="theme-color" content="#282828" />
+    <meta name="color-scheme" content="dark" />
+    <meta name="description" content="A chaotic, self-hosted Discord-like platform" />
+
+    <!-- Apple -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Dumpster" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+
+    <!-- Manifest -->
    <link rel="manifest" href="/manifest.json" />
+
+    <!-- Splash screens for iOS (apple-touch-startup-image) -->
+    <meta name="mobile-web-app-capable" content="yes" />
+
    <title>Dumpster</title>
  </head>
  <body>
@@ -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) => {
+      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));
+            caches.open(CACHE_VERSION).then((c) => c.put(event.request, clone));
          }
          return response;
-      }).catch(() => cached);
+        })
+        .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(
@@ -12,6 +12,8 @@ import { DMChat } from './components/DMChat.tsx';
 import { ForgotPasswordPage } from './components/ForgotPasswordPage.tsx';
 import { ResetPasswordPage } from './components/ResetPasswordPage.tsx';
 import { useAuthStore } from './stores/auth.ts';
+import { InstallBanner } from './components/InstallBanner.tsx';
+import { ConnectionStatus } from './components/ConnectionStatus.tsx';

 function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
@@ -32,6 +34,8 @@ function App() {

  return (
    <BrowserRouter>
+      <ConnectionStatus />
+      <InstallBanner />
      <Routes>
        <Route path="/login" element={<LoginForm />} />
        <Route path="/forgot-password" element={<ForgotPasswordPage />} />
@@ -0,0 +1,40 @@
+import { useState, useEffect } from "react";
+
+export function ConnectionStatus() {
+  const [online, setOnline] = useState(navigator.onLine);
+  const [visible, setVisible] = useState(!navigator.onLine);
+
+  useEffect(() => {
+    const handleOnline = () => {
+      setOnline(true);
+      // Show "back online" briefly then hide
+      setVisible(true);
+      setTimeout(() => setVisible(false), 3000);
+    };
+    const handleOffline = () => {
+      setOnline(false);
+      setVisible(true);
+    };
+
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      className={`fixed top-0 left-0 right-0 z-[100] text-center py-1 text-xs font-mono transition-all duration-300 ${
+        online
+          ? "bg-gb-green/20 text-gb-green border-b border-gb-green/30"
+          : "bg-gb-red/20 text-gb-red border-b border-gb-red/30"
+      }`}
+    >
+      {online ? "● CONNECTION RESTORED" : "○ YOU ARE OFFLINE — messages will send when reconnected"}
+    </div>
+  );
+}
@@ -0,0 +1,98 @@
+import { useState, useEffect, useCallback } from "react";
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
+}
+
+const DISMISSED_KEY = "dumpster-pwa-install-dismissed";
+
+export function InstallBanner() {
+  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
+  const [visible, setVisible] = useState(false);
+  const [isIOS, setIsIOS] = useState(false);
+
+  useEffect(() => {
+    // Check if already dismissed
+    if (localStorage.getItem(DISMISSED_KEY)) return;
+
+    // Detect iOS (no beforeinstallprompt)
+    const ua = window.navigator.userAgent;
+    const isIOSDevice = /iPad|iPhone|iPod/.test(ua) || (ua.includes("Mac") && "ontouchend" in window);
+    const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
+
+    if (isStandalone) return; // Already installed
+
+    if (isIOSDevice && !isStandalone) {
+      setIsIOS(true);
+      // Show iOS instructions after a short delay
+      const timer = setTimeout(() => setVisible(true), 3000);
+      return () => clearTimeout(timer);
+    }
+
+    const handler = (e: Event) => {
+      e.preventDefault();
+      setDeferredPrompt(e as BeforeInstallPromptEvent);
+      // Show banner after a short delay so it doesn't clash with page load
+      setTimeout(() => setVisible(true), 2000);
+    };
+
+    window.addEventListener("beforeinstallprompt", handler);
+    return () => window.removeEventListener("beforeinstallprompt", handler);
+  }, []);
+
+  const handleInstall = useCallback(async () => {
+    if (!deferredPrompt) return;
+    await deferredPrompt.prompt();
+    const { outcome } = await deferredPrompt.userChoice;
+    if (outcome === "accepted") {
+      setVisible(false);
+    }
+    setDeferredPrompt(null);
+  }, [deferredPrompt]);
+
+  const handleDismiss = useCallback(() => {
+    setVisible(false);
+    localStorage.setItem(DISMISSED_KEY, "1");
+  }, []);
+
+  if (!visible) return null;
+
+  return (
+    <div className="fixed bottom-4 left-4 right-4 z-50 flex justify-center pointer-events-none">
+      <div className="pointer-events-auto bg-gb-bg-s border border-gb-bg-t shadow-2xl max-w-md w-full flex items-center gap-3 p-3">
+        <img src="/icons/icon-72.png" alt="" className="w-10 h-10 shrink-0" />
+        <div className="flex-1 min-w-0">
+          <div className="text-sm text-gb-fg font-mono font-bold">Install Dumpster</div>
+          {isIOS ? (
+            <div className="text-xs text-gb-fg-f font-mono mt-0.5">
+              Tap <span className="text-gb-blue">Share</span> then{" "}
+              <span className="text-gb-blue">Add to Home Screen</span>
+            </div>
+          ) : (
+            <div className="text-xs text-gb-fg-f font-mono mt-0.5">
+              Add to home screen for the full app experience
+            </div>
+          )}
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          {!isIOS && deferredPrompt && (
+            <button
+              onClick={handleInstall}
+              className="text-xs font-mono px-3 py-1.5 bg-gb-orange text-gb-bg hover:bg-gb-yellow transition-colors"
+            >
+              INSTALL
+            </button>
+          )}
+          <button
+            onClick={handleDismiss}
+            className="text-xs font-mono text-gb-fg-f hover:text-gb-red transition-colors px-2 py-1.5"
+            title="Dismiss"
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -175,14 +175,6 @@ export function LoginForm() {
            {isRegister ? "[BACK TO LOGIN]" : "[CREATE ACCOUNT]"}
          </button>
        </div>
-        {!isRegister && (
-          <p className="text-gb-fg-f text-xs mt-4 text-center">
-            Use Link component:{" "}
-            <Link to="/" className="text-gb-blue hover:text-gb-aqua">
-              [HOME]
-            </Link>
-          </p>
-        )}
      </div>
    </div>
  );