Feature 06: PWA shell and offline (#58)

Co-authored-by: dev_agent <dev_agent@cubecraftlabs.com>

web/src/sw/apiStrategy.test.ts

@@ -0,0 +1,165 @@
+// Runs the real Workbox network-first strategy against an in-memory cache
+// storage: jsdom has none, and the worker itself needs service worker globals.
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { RouteHandlerCallbackOptions } from 'workbox-core/types'
+import { createApiClient, createVerifiedSession } from '../api/index.ts'
+import { createNetworkStatus } from '../pwa/networkStatus.ts'
+import { fakeLocation, jsonResponse } from '../test/fetchStub.ts'
+import { createApiStrategy } from './apiStrategy'
+import { cacheFallbackHeader, cacheNames, routeFor } from './routes'
+
+const origin = 'https://mealquest.test'
+
+// FakeCache keys entries by URL, which is all the API cache needs.
+class FakeCache {
+  readonly entries = new Map<string, Response>()
+  async match(request: RequestInfo | URL): Promise<Response | undefined> {
+    return this.entries.get(new Request(request).url)?.clone()
+  }
+  async put(request: RequestInfo | URL, response: Response): Promise<void> {
+    this.entries.set(new Request(request).url, response)
+  }
+}
+
+// FakeExtendableEvent stands in for the worker-only ExtendableEvent,
+// collecting the promises the strategy waits on.
+class FakeExtendableEvent extends Event {
+  readonly pending: Promise<unknown>[] = []
+  waitUntil(promise: Promise<unknown>) {
+    this.pending.push(promise)
+  }
+}
+
+let cache: FakeCache
+
+beforeEach(() => {
+  cache = new FakeCache()
+  // Workbox checks its arguments against these worker-only globals.
+  vi.stubGlobal('FetchEvent', class FetchEvent {})
+  vi.stubGlobal('ExtendableEvent', FakeExtendableEvent)
+  const only = (name: string | undefined) => {
+    if (name !== cacheNames.api) throw new Error(`unexpected cache ${name}`)
+    return cache
+  }
+  vi.stubGlobal('caches', {
+    open: async (name: string) => only(name),
+    match: async (request: RequestInfo | URL, options?: MultiCacheQueryOptions) =>
+      only(options?.cacheName).match(request),
+  })
+})
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+// handle sends a GET through the API strategy, as src/sw.ts does for a
+// network-first route.
+async function handle(path: string): Promise<Response> {
+  return answer(new Request(new URL(path, origin)))
+}
+
+async function answer(request: Request): Promise<Response> {
+  expect(routeFor({ method: request.method, url: new URL(request.url), mode: 'cors' }, origin)).toEqual({
+    strategy: 'network-first',
+    cacheName: cacheNames.api,
+  })
+  const event = new FakeExtendableEvent('fetch')
+  const response = await createApiStrategy().handle({ request, event: event as unknown as RouteHandlerCallbackOptions['event'] })
+  await Promise.all(event.pending)
+  return response
+}
+
+function recipe(): Response {
+  return new Response(JSON.stringify({ id: '01J9ZR', name: 'Chicken tikka masala' }), {
+    status: 200,
+    headers: { 'Content-Type': 'application/json' },
+  })
+}
+
+describe('API strategy', () => {
+  it('answers from the network while the server is reachable, unmarked', async () => {
+    vi.stubGlobal('fetch', vi.fn<typeof fetch>().mockResolvedValue(recipe()))
+    const response = await handle('/api/v1/recipes/01J9ZR')
+    expect(response.headers.has(cacheFallbackHeader)).toBe(false)
+    expect(await response.json()).toMatchObject({ id: '01J9ZR' })
+    expect(cache.entries.has(`${origin}/api/v1/recipes/01J9ZR`)).toBe(true)
+  })
+
+  it('opens a previously viewed recipe offline, marked as a cache fallback', async () => {
+    vi.stubGlobal('fetch', vi.fn<typeof fetch>().mockResolvedValue(recipe()))
+    await handle('/api/v1/recipes/01J9ZR')
+
+    vi.stubGlobal('fetch', vi.fn<typeof fetch>().mockRejectedValue(new TypeError('Failed to fetch')))
+    const response = await handle('/api/v1/recipes/01J9ZR')
+    expect(response.headers.get(cacheFallbackHeader)).toBe('1')
+    expect(await response.json()).toEqual({ id: '01J9ZR', name: 'Chicken tikka masala' })
+  })
+
+  it('fails offline for a recipe never viewed', async () => {
+    vi.stubGlobal('fetch', vi.fn<typeof fetch>().mockRejectedValue(new TypeError('Failed to fetch')))
+    await expect(handle('/api/v1/recipes/01J9ZS')).rejects.toThrow()
+  })
+})
+
+describe('previously viewed plan and recipe reads', () => {
+  const plan = { week: '2026-W40', days: [{ date: '2026-10-05', dinner: 'Chicken tikka masala' }] }
+  const recipe = { id: '01J9ZR', name: 'Chicken tikka masala', steps: ['Marinate', 'Simmer'] }
+  const server: Record<string, unknown> = { '/api/v1/plans/2026-W40': plan, '/api/v1/recipes/01J9ZR': recipe }
+  let reachable: boolean
+
+  // The page's fetch goes through the worker's API strategy; the strategy's
+  // own fetch (always a Request) is the network. The API client fetches a
+  // path string, so the two are told apart by the argument's type. As in a
+  // browser, a worker that cannot answer is a network error to the page.
+  beforeEach(() => {
+    reachable = true
+    vi.spyOn(navigator, 'onLine', 'get').mockImplementation(() => reachable)
+    vi.stubGlobal('fetch', async (input: RequestInfo | URL, init?: RequestInit) => {
+      if (!(input instanceof Request)) {
+        return answer(new Request(new URL(String(input), origin), init)).catch((error: unknown) => {
+          throw new TypeError('Failed to fetch', { cause: error })
+        })
+      }
+      if (!reachable) throw new TypeError('Failed to fetch')
+      const body = server[new URL(input.url).pathname]
+      if (body === undefined) throw new Error(`unexpected network fetch: ${input.url}`)
+      return jsonResponse(200, body)
+    })
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  function client() {
+    return createApiClient(fakeLocation('/plan'), createNetworkStatus(window), createVerifiedSession(localStorage))
+  }
+
+  it('serves the plan and recipe fetched online once the network is gone', async () => {
+    const online = client()
+    expect(await online.apiFetch('/api/v1/plans/2026-W40')).toEqual(plan)
+    expect(await online.apiFetch('/api/v1/recipes/01J9ZR')).toEqual(recipe)
+    expect(online.network.offline()).toBe(false)
+
+    reachable = false
+    const offline = client()
+    expect(await offline.apiFetch('/api/v1/plans/2026-W40')).toEqual(plan)
+    expect(await offline.apiFetch('/api/v1/recipes/01J9ZR')).toEqual(recipe)
+    expect(offline.network.offline()).toBe(true)
+  })
+
+  it('shows the offline indicator when the cached copy answers while the browser reports online', async () => {
+    await client().apiFetch('/api/v1/plans/2026-W40')
+
+    vi.spyOn(navigator, 'onLine', 'get').mockReturnValue(true)
+    reachable = false
+    const api = client()
+    expect(await api.apiFetch('/api/v1/plans/2026-W40')).toEqual(plan)
+    expect(api.network.offline()).toBe(true)
+  })
+
+  it('fails offline for a plan never fetched', async () => {
+    reachable = false
+    await expect(client().apiFetch('/api/v1/plans/2026-W41')).rejects.toThrow(TypeError)
+  })
+})

web/src/sw/apiStrategy.ts

@@ -0,0 +1,16 @@
+// The network-first strategy for API reads, kept apart from src/sw.ts so the
+// tests can run it without a service worker.
+import type { WorkboxPlugin } from 'workbox-core/types'
+import { NetworkFirst } from 'workbox-strategies'
+import { cacheNames, markCacheFallback, networkTimeoutSeconds } from './routes'
+
+// NetworkFirst reads its cache only when the network fails or times out, so
+// every cached response it uses is a fallback.
+const markFallback: WorkboxPlugin = {
+  cachedResponseWillBeUsed: async ({ cachedResponse }) =>
+    cachedResponse === undefined ? undefined : markCacheFallback(cachedResponse),
+}
+
+export function createApiStrategy(): NetworkFirst {
+  return new NetworkFirst({ cacheName: cacheNames.api, networkTimeoutSeconds, plugins: [markFallback] })
+}

web/src/sw/routes.test.ts

@@ -0,0 +1,180 @@
+import { describe, expect, it } from 'vitest'
+import { cacheFallbackHeader, cacheNames, markCacheFallback, routeFor, staleCaches, type Route } from './routes'
+
+const origin = 'https://mealquest.test'
+
+function route(path: string, method = 'GET', mode: RequestMode = 'cors'): Route {
+  return routeFor({ method, url: new URL(path, origin), mode }, origin)
+}
+
+const apiCache: Route = { strategy: 'network-first', cacheName: cacheNames.api }
+const networkOnly: Route = { strategy: 'network-only' }
+
+describe('routeFor', () => {
+  it.each([
+    '/api/v1/plans',
+    '/api/v1/plans/2026-W40',
+    '/api/v1/shopping/current',
+    '/api/v1/dinners',
+    '/api/v1/dinners/01J9ZK?include=recipe',
+    '/api/v1/recipes',
+    '/api/v1/recipes/01J9ZR',
+    '/api/v1/home',
+  ])('GET %s is network-first in the API cache', (path) => {
+    expect(route(path)).toEqual(apiCache)
+  })
+
+  it.each(['/media/photos/abc.jpg', '/media/thumbs/abc.webp'])(
+    'GET %s is cache-first in the media cache',
+    (path) => {
+      expect(route(path)).toEqual({ strategy: 'cache-first', cacheName: cacheNames.media })
+    },
+  )
+
+  it('GET of a font file is cache-first in the fonts cache', () => {
+    expect(route('/assets/Figtree-Bold-a1b2c3.woff2')).toEqual({
+      strategy: 'cache-first',
+      cacheName: cacheNames.fonts,
+    })
+  })
+
+  it.each([
+    '/auth/login',
+    '/auth/callback?code=x&state=y',
+    '/auth/logout',
+    '/auth/me',
+    '/api/v1/settings',
+    '/api/v1/settings/ai',
+    '/api/v1/jobs',
+    '/api/v1/jobs/01J9ZK',
+  ])('GET %s is network-only', (path) => {
+    expect(route(path)).toEqual(networkOnly)
+  })
+
+  it.each(['/auth/login', '/auth/callback?code=x&state=y', '/api/v1/settings/ai'])(
+    'a navigation to %s is network-only with no offline fallback',
+    (path) => {
+      expect(route(path, 'GET', 'navigate')).toEqual(networkOnly)
+    },
+  )
+
+  it.each([
+    '/%61uth/login',
+    '/auth%2Fcallback?code=x&state=y',
+    '/%61pi/v1/settings/household',
+    '/api/v1/%73ettings/ai',
+    '/api/v1/settings%2Fai',
+    '/%61pi/v1/jobs/01J9ZK',
+    '/api/v1/j%6Fbs',
+    '/api/v1/plans%2F..%2Fsettings',
+    '/api/v1/recipes%2F..%2Fsettings%2Fai',
+    '/api/v1/recipes/..%2F..%2F..%2Fauth%2Flogin',
+    '/plan%2F..%2Fauth%2Flogin',
+  ])('an encoded reserved path %s is network-only, navigated or not', (path) => {
+    expect(route(path)).toEqual(networkOnly)
+    expect(route(path, 'GET', 'navigate')).toEqual(networkOnly)
+  })
+
+  it.each(['/%E0%A4%A', '/auth%', '/plan/%zz', '/api/v1/plans/%C3'])(
+    'a malformed encoding in %s is network-only, navigated or not',
+    (path) => {
+      expect(route(path)).toEqual(networkOnly)
+      expect(route(path, 'GET', 'navigate')).toEqual(networkOnly)
+    },
+  )
+
+  it('classifies other API paths by their decoded form', () => {
+    expect(route('/%61pi/v1/plans/2026-W40')).toEqual(apiCache)
+    expect(route('/%61pi/v1/recipes/01J9ZR')).toEqual(apiCache)
+    expect(route('/%61pi/v1/ideas', 'GET', 'navigate')).toEqual(networkOnly)
+  })
+
+  it.each(['POST', 'PUT', 'PATCH', 'DELETE', 'HEAD'])(
+    '%s is network-only on every URL class',
+    (method) => {
+      for (const path of [
+        '/api/v1/plans/2026-W40',
+        '/api/v1/shopping/current',
+        '/api/v1/dinners/01J9ZK',
+        '/api/v1/recipes/01J9ZR',
+        '/api/v1/home',
+        '/media/photos/abc.jpg',
+        '/assets/Figtree-Bold-a1b2c3.woff2',
+        '/auth/logout',
+        '/plan',
+      ]) {
+        expect(route(path, method), `${method} ${path}`).toEqual(networkOnly)
+        expect(route(path, method, 'navigate'), `${method} ${path}`).toEqual(networkOnly)
+      }
+    },
+  )
+
+  it('matches whole path segments only', () => {
+    expect(route('/api/v1/plansx')).toEqual(networkOnly)
+    expect(route('/api/v1/homepage')).toEqual(networkOnly)
+    expect(route('/api/v1/recipesx')).toEqual(networkOnly)
+    expect(route('/mediax/a.jpg')).toEqual(networkOnly)
+    expect(route('/authors')).toEqual(networkOnly)
+    expect(route('/api/v1/settingsx')).toEqual(networkOnly)
+  })
+
+  it('leaves other API calls network-only', () => {
+    expect(route('/api/v1/me')).toEqual(networkOnly)
+    expect(route('/api/v1/ideas', 'GET', 'navigate')).toEqual(networkOnly)
+  })
+
+  it('leaves cross-origin requests network-only', () => {
+    for (const path of ['/api/v1/plans', '/media/a.jpg', '/assets/a.woff2']) {
+      const url = new URL(path, 'https://cdn.example')
+      expect(routeFor({ method: 'GET', url, mode: 'no-cors' }, origin)).toEqual(networkOnly)
+    }
+  })
+
+  it.each(['/', '/plan', '/supply-run', '/dinners/01J9ZK'])(
+    'a navigation to the app at %s falls back to the precached index.html',
+    (path) => {
+      expect(route(path, 'GET', 'navigate')).toEqual({ strategy: 'navigation-fallback' })
+    },
+  )
+
+  it('leaves other same-origin GETs network-only', () => {
+    expect(route('/health')).toEqual(networkOnly)
+  })
+})
+
+describe('cache names', () => {
+  it('all start with mealquest-', () => {
+    for (const name of Object.values(cacheNames)) expect(name).toMatch(/^mealquest-/)
+  })
+})
+
+describe('staleCaches', () => {
+  it('deletes only MealQuest caches that are not current', () => {
+    const current = ['mealquest-precache-v1', ...Object.values(cacheNames)]
+    const names = [
+      ...current,
+      'mealquest-precache',
+      'mealquest-api-v0',
+      'workbox-precache-v2-https://mealquest.test/',
+      'other-app-cache',
+      'my-mealquest-cache',
+    ]
+    expect(staleCaches(names, current)).toEqual(['mealquest-precache', 'mealquest-api-v0'])
+  })
+})
+
+describe('markCacheFallback', () => {
+  it('copies the cached response with the cache fallback header set', async () => {
+    const cached = new Response('{"id":"01J9ZR"}', {
+      status: 200,
+      statusText: 'OK',
+      headers: { 'Content-Type': 'application/json' },
+    })
+    const marked = markCacheFallback(cached)
+    expect(marked.status).toBe(200)
+    expect(marked.statusText).toBe('OK')
+    expect(marked.headers.get('Content-Type')).toBe('application/json')
+    expect(marked.headers.get(cacheFallbackHeader)).toBe('1')
+    expect(await marked.json()).toEqual({ id: '01J9ZR' })
+  })
+})

web/src/sw/routes.ts

@@ -0,0 +1,108 @@
+// Decides how the service worker handles each request. This module is pure —
+// no Workbox, no service worker globals — so the tests can assert every URL
+// class without a worker; src/sw.ts maps each route to a Workbox strategy.
+//
+// Security rule: /auth/*, /api/v1/settings/*, /api/v1/jobs/* and every
+// non-GET request are network-only and never reach a cache. Paths are matched
+// as the server sees them — percent-decoded, before and after dot segments are
+// resolved — so /%61uth/login is /auth/login; a malformed encoding is
+// network-only.
+
+export type Route =
+  // Network with a 3 s timeout, then the last cached response.
+  | { strategy: 'network-first'; cacheName: typeof cacheNames.api }
+  // Cached response when there is one, else the network; entries expire.
+  | { strategy: 'cache-first'; cacheName: typeof cacheNames.media | typeof cacheNames.fonts }
+  // Network only, nothing cached: the worker leaves the request to the browser.
+  | { strategy: 'network-only' }
+  // Network only, nothing cached; offline, the precached index.html.
+  | { strategy: 'navigation-fallback' }
+
+export interface RouteRequest {
+  method: string
+  url: URL
+  mode: RequestMode
+}
+
+// Bumping the version renames every cache; activate then deletes the old ones.
+export const cacheVersion = 'v1'
+export const cachePrefix = 'mealquest-'
+
+export const cacheNames = {
+  api: `${cachePrefix}api-${cacheVersion}`,
+  media: `${cachePrefix}media-${cacheVersion}`,
+  fonts: `${cachePrefix}fonts-${cacheVersion}`,
+} as const
+
+export const networkTimeoutSeconds = 3
+
+// cacheFallbackHeader marks a network-first response answered from the cache
+// because the server could not be reached in time, so the app can show the
+// offline indicator even while the browser reports that it is online.
+export const cacheFallbackHeader = 'X-MealQuest-Cache-Fallback'
+
+// markCacheFallback copies a cached response with cacheFallbackHeader set.
+export function markCacheFallback(cached: Response): Response {
+  const headers = new Headers(cached.headers)
+  headers.set(cacheFallbackHeader, '1')
+  return new Response(cached.body, { status: cached.status, statusText: cached.statusText, headers })
+}
+
+const neverCached = ['/auth', '/api/v1/settings', '/api/v1/jobs']
+const networkFirst = ['/api/v1/plans', '/api/v1/shopping', '/api/v1/dinners', '/api/v1/recipes', '/api/v1/home']
+
+// True when path is prefix itself or a path below it: /api/v1/plans matches
+// /api/v1/plans and /api/v1/plans/2026-W40, never /api/v1/plansx.
+function under(path: string, prefix: string): boolean {
+  return path === prefix || path.startsWith(`${prefix}/`)
+}
+
+// The pathname percent-decoded, as the server's router sees it, or undefined
+// when the encoding is malformed.
+function decodePath(pathname: string): string | undefined {
+  try {
+    return decodeURIComponent(pathname)
+  } catch {
+    return undefined
+  }
+}
+
+// Resolves "." and ".." segments the way the server's path.Clean does, so a
+// decoded %2F cannot carry a request out of a reserved prefix:
+// /api/v1/plans/../settings cleans to /api/v1/settings.
+function cleanPath(path: string): string {
+  const segments: string[] = []
+  for (const segment of path.split('/')) {
+    if (segment === '' || segment === '.') continue
+    if (segment === '..') segments.pop()
+    else segments.push(segment)
+  }
+  return `/${segments.join('/')}`
+}
+
+const networkOnly: Route = { strategy: 'network-only' }
+
+export function routeFor(request: RouteRequest, origin: string): Route {
+  const { method, url, mode } = request
+  if (method !== 'GET') return networkOnly
+  if (url.origin !== origin) return networkOnly
+  const path = decodePath(url.pathname)
+  if (path === undefined) return networkOnly
+  const cleaned = cleanPath(path)
+  const reserved = (prefix: string) => under(path, prefix) || under(cleaned, prefix)
+  if (neverCached.some(reserved)) return networkOnly
+  if (networkFirst.some((prefix) => under(path, prefix))) {
+    return { strategy: 'network-first', cacheName: cacheNames.api }
+  }
+  if (under(path, '/media')) return { strategy: 'cache-first', cacheName: cacheNames.media }
+  if (path.endsWith('.woff2')) return { strategy: 'cache-first', cacheName: cacheNames.fonts }
+  if (reserved('/api')) return networkOnly
+  if (mode === 'navigate') return { strategy: 'navigation-fallback' }
+  return networkOnly
+}
+
+// The caches activate deletes: MealQuest caches that are no longer current.
+// Caches without the mealquest- prefix belong to someone else and are kept.
+export function staleCaches(names: readonly string[], current: readonly string[]): string[] {
+  return names.filter((name) => name.startsWith(cachePrefix) && !current.includes(name))
+}

web/src/sw/worker.test.ts

@@ -0,0 +1,45 @@
+// The service worker itself needs worker globals, so these tests read its
+// source: they pin the parts routes.ts cannot express — the API cache's
+// strategy, the font strategy's expiration, the font route's place ahead of
+// the precache route and network-only requests left to the browser.
+import { describe, expect, it } from 'vitest'
+import source from '../sw.ts?raw'
+
+describe('service worker source', () => {
+  it('serves the API cache with the strategy that marks cache fallbacks', () => {
+    expect(source).toContain('[cacheNames.api]: createApiStrategy(),')
+  })
+
+  it('gives the fonts cache a CacheFirst strategy with an expiration plugin', () => {
+    expect(source).toMatch(
+      /\[cacheNames\.fonts\]: new CacheFirst\(\{\s*cacheName: cacheNames\.fonts,\s*plugins: \[\s*new ExpirationPlugin\(\{ maxEntries: \d+, maxAgeSeconds: [^}]+\}\)/,
+    )
+  })
+
+  it('falls back to the precached font when the network fails', () => {
+    expect(source).toContain('handlerDidError: async ({ request }) => matchPrecache(request.url)')
+  })
+
+  it('registers the font route before the precache route', () => {
+    const fontRoute = source.indexOf("registerRoute(isFont, handle, 'GET')")
+    const precache = source.indexOf('precacheAndRoute(self.__WB_MANIFEST)')
+    expect(fontRoute).toBeGreaterThanOrEqual(0)
+    expect(precache).toBeGreaterThan(fontRoute)
+  })
+
+  it('leaves network-only requests to the browser instead of answering them', () => {
+    // Chrome stalls a navigation whose Clear-Site-Data response (POST
+    // /auth/logout) the worker answered, so the worker must not match it.
+    expect(source).toMatch(
+      /function answered\(options: \{ request: Request; url: URL \}\): boolean \{\s*return routeOf\(options\)\.strategy !== 'network-only'/,
+    )
+    expect(source).toContain('registerRoute(answered, handle, method)')
+    expect(source).not.toContain('registerRoute(() => true')
+  })
+
+  it('activates a waiting worker when the update prompt sends SKIP_WAITING', () => {
+    expect(source).toMatch(
+      /self\.addEventListener\('message', \(event\) => \{\s*if \(event\.data\?\.type === 'SKIP_WAITING'\) void self\.skipWaiting\(\)/,
+    )
+  })
+})