feat: Add PWA support - manifest, service worker, offline banner

2026-02-16 21:02:15 +00:00
parent 70ed672381
commit 0739f87f73
8 changed files with 163 additions and 0 deletions
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0ea5e9"/>
+      <stop offset="100%" stop-color="#0369a1"/>
+    </linearGradient>
+  </defs>
+  <rect width="192" height="192" rx="28" fill="url(#bg)"/>
+  <text x="96" y="108" text-anchor="middle" font-size="100" fill="white" font-family="serif">🌊</text>
+</svg>
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0%" stop-color="#0ea5e9"/>
+      <stop offset="100%" stop-color="#0369a1"/>
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="76" fill="url(#bg)"/>
+  <text x="256" y="290" text-anchor="middle" font-size="260" fill="white" font-family="serif">🌊</text>
+</svg>
@@ -0,0 +1,24 @@
+{
+  "name": "Coastal Contracting Timesheet",
+  "short_name": "Timesheet",
+  "description": "Employee timesheet management for Coastal Contracting",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0f172a",
+  "theme_color": "#0ea5e9",
+  "orientation": "any",
+  "icons": [
+    {
+      "src": "/icons/icon-192.svg",
+      "sizes": "192x192",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    },
+    {
+      "src": "/icons/icon-512.svg",
+      "sizes": "512x512",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    }
+  ]
+}
@@ -0,0 +1,78 @@
+const CACHE_NAME = 'coastal-timesheet-v1';
+const STATIC_ASSETS = [
+  '/',
+  '/manifest.json',
+  '/icons/icon-192.svg',
+  '/icons/icon-512.svg',
+];
+
+// Install: cache shell
+self.addEventListener('install', (e) => {
+  e.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => cache.addAll(STATIC_ASSETS))
+  );
+  self.skipWaiting();
+});
+
+// Activate: clean old caches
+self.addEventListener('activate', (e) => {
+  e.waitUntil(
+    caches.keys().then((keys) =>
+      Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
+    )
+  );
+  self.clients.claim();
+});
+
+// Fetch: network-first for API, cache-first for assets
+self.addEventListener('fetch', (e) => {
+  const { request } = e;
+  const url = new URL(request.url);
+
+  // Skip non-GET
+  if (request.method !== 'GET') return;
+
+  // API calls: network-first with offline fallback
+  if (url.pathname.startsWith('/api/')) {
+    e.respondWith(
+      fetch(request)
+        .then((res) => {
+          // Cache successful GET API responses for offline use
+          if (res.ok) {
+            const clone = res.clone();
+            caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
+          }
+          return res;
+        })
+        .catch(() => caches.match(request).then((cached) => cached || offlineResponse()))
+    );
+    return;
+  }
+
+  // Static assets: cache-first
+  e.respondWith(
+    caches.match(request).then((cached) => {
+      if (cached) {
+        // Background refresh
+        fetch(request).then((res) => {
+          if (res.ok) caches.open(CACHE_NAME).then((cache) => cache.put(request, res));
+        }).catch(() => {});
+        return cached;
+      }
+      return fetch(request).then((res) => {
+        if (res.ok) {
+          const clone = res.clone();
+          caches.open(CACHE_NAME).then((cache) => cache.put(request, clone));
+        }
+        return res;
+      }).catch(() => caches.match('/'));
+    })
+  );
+});
+
+function offlineResponse() {
+  return new Response(
+    JSON.stringify({ error: 'offline', message: 'You are currently offline. Data will sync when connection is restored.' }),
+    { status: 503, headers: { 'Content-Type': 'application/json' } }
+  );
+}