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
@@ -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>