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.
+// Dumpster PWA Service Worker
-// Network-first for navigation (index.html) keeps hashed asset refs fresh.
+// Bump CACHE_VERSION on each deploy to force re-cache of hashed assets.
-const CACHE_NAME = 'dumpster-v3';
+const CACHE_VERSION = 'dumpster-v4';
 const OFFLINE_URL = '/offline.html';
-self.addEventListener('install', () => {
+// Assets to pre-cache on install (shell files)
-  self.skipWaiting();
+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) =>
+    caches
-      Promise.all(names.filter((n) => n !== CACHE_NAME).map((n) => caches.delete(n)))
+      .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
+  // Navigation requests: network-first, offline fallback
  // so hashed asset references stay current after deploys.
  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>
  );