feat: PWA-first experience with persistent login and aggressive caching

jjohare · claude · jjohare · commit c5897dc7b2e4 · 2025-12-24T10:17:06.000Z
PWA users now get a frictionless native app experience: - Persistent login: PWA users stay logged in permanently across sessions - Credentials stored in PWA-specific localStorage (nostr_bbs_pwa_auth) - No session key encryption for PWA mode (avoids session expiry issues) - Automatic detection of PWA mode via display-mode media queries - Session timeout disabled for PWA users - PWA users never get auto-logged out due to inactivity - Browser users still have 30-minute session timeout for security - Enhanced service worker caching (v2) - Aggressive cache-first strategy for all static assets - Separate caches for fonts, profiles, API responses - Cache size limits to prevent storage bloat - Stale-while-revalidate for app shell routes - Automatic update checking - Periodic checks (1h for PWA, 4h for browser) - Checks on visibility change (when user returns to app) - Proper updatefound event handling per MDN spec 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/src/lib/stores/auth.ts b/src/lib/stores/auth.ts
@@ -1,8 +1,9 @@
-import { writable, derived } from 'svelte/store';
+import { writable, derived, get } from 'svelte/store';
 import type { Writable } from 'svelte/store';
 import { browser } from '$app/environment';
 import { base } from '$app/paths';
 import { encryptPrivateKey, decryptPrivateKey, isEncryptionAvailable } from '$lib/utils/key-encryption';
+import { isPWAInstalled, checkIfPWA } from '$lib/stores/pwa';
 
 export interface AuthState {
   state: 'unauthenticated' | 'authenticating' | 'authenticated';
@@ -40,6 +41,16 @@ const STORAGE_KEY = 'nostr_bbs_keys';
 const SESSION_KEY = 'nostr_bbs_session';
 const COOKIE_KEY = 'nostr_bbs_auth';
 const KEEP_SIGNED_IN_KEY = 'nostr_bbs_keep_signed_in';
+const PWA_AUTH_KEY = 'nostr_bbs_pwa_auth';
+
+/**
+ * Check if running as installed PWA
+ */
+function isRunningAsPWA(): boolean {
+  if (!browser) return false;
+  // Check current state or stored PWA mode
+  return get(isPWAInstalled) || checkIfPWA() || localStorage.getItem('nostr_bbs_pwa_mode') === 'true';
+}
 
 /**
  * Cookie utilities for persistent auth
@@ -113,6 +124,33 @@ function createAuthStore() {
       return;
     }
 
+    // Check for PWA persistent auth first (no session expiry)
+    const pwaAuth = localStorage.getItem(PWA_AUTH_KEY);
+    if (pwaAuth && isRunningAsPWA()) {
+      try {
+        const pwaData = JSON.parse(pwaAuth);
+        if (pwaData.publicKey && pwaData.privateKey) {
+          console.log('[Auth] Restoring PWA persistent session');
+          update(state => ({
+            ...state,
+            ...syncStateFields({
+              publicKey: pwaData.publicKey,
+              privateKey: pwaData.privateKey,
+              nickname: pwaData.nickname || null,
+              avatar: pwaData.avatar || null,
+              isAuthenticated: true,
+              isEncrypted: false,
+              mnemonicBackedUp: pwaData.mnemonicBackedUp || false,
+              isReady: true
+            })
+          }));
+          return;
+        }
+      } catch {
+        // Invalid PWA auth data, continue with normal flow
+      }
+    }
+
     const stored = localStorage.getItem(STORAGE_KEY);
     if (!stored) {
       update(state => ({ ...state, ...syncStateFields({ isReady: true }) }));
@@ -142,18 +180,35 @@ function createAuthStore() {
           }));
         } catch {
           // Session key changed (new session) - need to re-authenticate
-          update(state => ({
-            ...state,
-            ...syncStateFields({
-              publicKey: parsed.publicKey,
-              nickname: parsed.nickname || null,
-              avatar: parsed.avatar || null,
-              isAuthenticated: false,
-              isEncrypted: true,
-              error: 'Session expired. Please enter your password to unlock.',
-              isReady: true
-            })
-          }));
+          // But if we're in PWA mode, try to use the stored keys directly
+          if (isRunningAsPWA() && parsed.publicKey) {
+            // For PWA, prompt user to re-enter password once to migrate
+            update(state => ({
+              ...state,
+              ...syncStateFields({
+                publicKey: parsed.publicKey,
+                nickname: parsed.nickname || null,
+                avatar: parsed.avatar || null,
+                isAuthenticated: false,
+                isEncrypted: true,
+                error: 'Please unlock to enable persistent PWA login.',
+                isReady: true
+              })
+            }));
+          } else {
+            update(state => ({
+              ...state,
+              ...syncStateFields({
+                publicKey: parsed.publicKey,
+                nickname: parsed.nickname || null,
+                avatar: parsed.avatar || null,
+                isAuthenticated: false,
+                isEncrypted: true,
+                error: 'Session expired. Please enter your password to unlock.',
+                isReady: true
+              })
+            }));
+          }
         }
       } else if (parsed.privateKey) {
         // Legacy unencrypted data - migrate on next save
@@ -240,6 +295,19 @@ function createAuthStore() {
         if (shouldKeepSignedIn()) {
           setCookie(COOKIE_KEY, publicKey, 30); // 30 day cookie
         }
+
+        // For PWA mode: store persistent auth that survives session changes
+        if (isRunningAsPWA()) {
+          const pwaAuthData = {
+            publicKey,
+            privateKey,
+            nickname: existingData.nickname || null,
+            avatar: existingData.avatar || null,
+            mnemonicBackedUp: existingData.mnemonicBackedUp || false
+          };
+          localStorage.setItem(PWA_AUTH_KEY, JSON.stringify(pwaAuthData));
+          console.log('[Auth] PWA persistent auth stored');
+        }
       }
 
       update(state => ({ ...state, ...syncStateFields(authData) }));
@@ -289,6 +357,19 @@ function createAuthStore() {
         parsed.encryptedPrivateKey = newEncrypted;
         localStorage.setItem(STORAGE_KEY, JSON.stringify(parsed));
 
+        // For PWA mode: store persistent auth that survives session changes
+        if (isRunningAsPWA()) {
+          const pwaAuthData = {
+            publicKey: parsed.publicKey,
+            privateKey,
+            nickname: parsed.nickname || null,
+            avatar: parsed.avatar || null,
+            mnemonicBackedUp: parsed.mnemonicBackedUp || false
+          };
+          localStorage.setItem(PWA_AUTH_KEY, JSON.stringify(pwaAuthData));
+          console.log('[Auth] PWA persistent auth stored after unlock');
+        }
+
         update(state => ({
           ...state,
           ...syncStateFields({
@@ -337,6 +418,7 @@ function createAuthStore() {
       set(initialState);
       if (browser) {
         localStorage.removeItem(STORAGE_KEY);
+        localStorage.removeItem(PWA_AUTH_KEY);
         sessionStorage.removeItem(SESSION_KEY);
         deleteCookie(COOKIE_KEY);
         const { goto } = await import('$app/navigation');
diff --git a/src/lib/stores/pwa.ts b/src/lib/stores/pwa.ts
@@ -32,6 +32,31 @@ export const swRegistration = writable<ServiceWorkerRegistration | null>(null);
  */
 export const isPWAInstalled = writable<boolean>(false);
 
+/**
+ * Check if app is running as installed PWA
+ */
+export function checkIfPWA(): boolean {
+  if (typeof window === 'undefined') return false;
+
+  // Check display-mode media query (most reliable)
+  if (window.matchMedia('(display-mode: standalone)').matches) return true;
+  if (window.matchMedia('(display-mode: fullscreen)').matches) return true;
+  if (window.matchMedia('(display-mode: minimal-ui)').matches) return true;
+
+  // Check iOS Safari standalone mode
+  if ((navigator as Navigator & { standalone?: boolean }).standalone === true) return true;
+
+  // Check if launched from home screen on Android
+  if (document.referrer.includes('android-app://')) return true;
+
+  return false;
+}
+
+/**
+ * PWA mode storage key
+ */
+const PWA_MODE_KEY = 'nostr_bbs_pwa_mode';
+
 /**
  * Message queue count
  */
@@ -70,11 +95,15 @@ export function initPWA(): void {
   window.addEventListener('appinstalled', () => {
     isPWAInstalled.set(true);
     installPrompt.set(null);
+    // Persist PWA mode for future sessions
+    localStorage.setItem(PWA_MODE_KEY, 'true');
   });
 
-  // Check if running as PWA
-  if (window.matchMedia('(display-mode: standalone)').matches) {
+  // Check if running as PWA (current session or previously installed)
+  const isPWA = checkIfPWA() || localStorage.getItem(PWA_MODE_KEY) === 'true';
+  if (isPWA) {
     isPWAInstalled.set(true);
+    localStorage.setItem(PWA_MODE_KEY, 'true');
   }
 
   // Listen for service worker messages
@@ -116,6 +145,12 @@ export async function triggerInstall(): Promise<boolean> {
   }
 }
 
+// Update check interval (1 hour for PWA, 4 hours for browser)
+const UPDATE_CHECK_INTERVAL_PWA = 60 * 60 * 1000; // 1 hour
+const UPDATE_CHECK_INTERVAL_BROWSER = 4 * 60 * 60 * 1000; // 4 hours
+
+let updateCheckInterval: ReturnType<typeof setInterval> | null = null;
+
 /**
  * Register service worker
  */
@@ -135,28 +170,81 @@ export async function registerServiceWorker(): Promise<ServiceWorkerRegistration
     console.log('[PWA] Service worker registered:', registration);
     swRegistration.set(registration);
 
-    // Check for updates
+    // Listen for updatefound event (per MDN spec)
     registration.addEventListener('updatefound', () => {
       const newWorker = registration.installing;
 
       if (!newWorker) {
         return;
       }
 
+      console.log('[PWA] New service worker installing...');
+
       newWorker.addEventListener('statechange', () => {
-        if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
-          updateAvailable.set(true);
+        if (newWorker.state === 'installed') {
+          if (navigator.serviceWorker.controller) {
+            // New update available
+            console.log('[PWA] New version available');
+            updateAvailable.set(true);
+          } else {
+            // First install
+            console.log('[PWA] Service worker installed for the first time');
+          }
         }
       });
     });
 
+    // Start periodic update checks
+    startUpdateChecks(registration);
+
     return registration;
   } catch (error) {
     console.error('[PWA] Service worker registration failed:', error);
     return null;
   }
 }
 
+/**
+ * Start periodic update checks
+ */
+function startUpdateChecks(registration: ServiceWorkerRegistration): void {
+  // Clear any existing interval
+  if (updateCheckInterval) {
+    clearInterval(updateCheckInterval);
+  }
+
+  // Use shorter interval for PWA mode
+  const isPWA = checkIfPWA() || localStorage.getItem(PWA_MODE_KEY) === 'true';
+  const interval = isPWA ? UPDATE_CHECK_INTERVAL_PWA : UPDATE_CHECK_INTERVAL_BROWSER;
+
+  // Check for updates periodically
+  updateCheckInterval = setInterval(() => {
+    checkForUpdates(registration);
+  }, interval);
+
+  // Also check on visibility change (when user returns to app)
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible') {
+      checkForUpdates(registration);
+    }
+  });
+}
+
+/**
+ * Manually check for service worker updates
+ */
+export async function checkForUpdates(registration?: ServiceWorkerRegistration): Promise<void> {
+  const reg = registration || get(swRegistration);
+  if (!reg) return;
+
+  try {
+    await reg.update();
+    console.log('[PWA] Update check completed');
+  } catch (error) {
+    console.error('[PWA] Update check failed:', error);
+  }
+}
+
 /**
  * Update service worker
  */
diff --git a/src/lib/stores/session.ts b/src/lib/stores/session.ts
@@ -3,10 +3,14 @@
  *
  * Implements automatic session timeout for security.
  * Tracks user activity and auto-logouts after inactivity period.
+ *
+ * NOTE: Session timeout is DISABLED for PWA users to provide
+ * a frictionless native app experience.
  */
 
 import { writable, get } from 'svelte/store';
 import { browser } from '$app/environment';
+import { isPWAInstalled, checkIfPWA } from '$lib/stores/pwa';
 
 // Session timeout configuration (milliseconds)
 const SESSION_TIMEOUT_MS = 30 * 60 * 1000; // 30 minutes of inactivity
@@ -97,12 +101,34 @@ function createSessionStore() {
     }
   }
 
+  /**
+   * Check if running as installed PWA
+   */
+  function isRunningAsPWA(): boolean {
+    if (!browser) return false;
+    return get(isPWAInstalled) || checkIfPWA() || localStorage.getItem('nostr_bbs_pwa_mode') === 'true';
+  }
+
   /**
    * Start session monitoring
+   * NOTE: Session timeout is DISABLED for PWA users
    */
   function start(onTimeout: () => void) {
     if (!browser) return;
 
+    // PWA users never get logged out due to inactivity
+    if (isRunningAsPWA()) {
+      console.log('[Session] PWA mode detected - session timeout disabled');
+      update(state => ({
+        ...state,
+        isActive: true,
+        showWarning: false,
+        remainingMs: SESSION_TIMEOUT_MS
+      }));
+      // Return no-op cleanup function
+      return () => {};
+    }
+
     onTimeoutCallback = onTimeout;
 
     // Initialize last activity
diff --git a/src/service-worker.ts b/src/service-worker.ts
