Offline Support for Recipe Web App

Register a Workbox-generated SW that precaches the app shell (HTML, JS/CSS bundles, fonts, icons, an offline.html fallback). Confirm the app boots with the network disabled. Prerequisites: HTTPS everywhere, web app manifest present.

• Add Workbox to the build (e.g. workbox-webpack-plugin / vite-plugin-pwa depending on the bundler).
• Register in app entry: navigator.serviceWorker.register('/sw.js') behind a feature check, after load.
• Navigation fallback to the cached shell for SPA routes; offline.html for anything unhandled.
• Kill switch: keep a trivial sw.js that self-unregisters, deployable if a bad SW ships.

// sw.js (Workbox, injectManifest mode)
import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
import { registerRoute, NavigationRoute } from 'workbox-routing';

precacheAndRoute(self.__WB_MANIFEST);
registerRoute(new NavigationRoute(createHandlerBoundToURL('/index.html')));

Done when: DevTools offline mode → app loads to its home screen; Lighthouse PWA "works offline" check passes.

Cache API responses and images so any recipe the user has viewed is readable offline.

• GET /api/recipes?… (lists, search): StaleWhileRevalidate, cache name api-lists, max ~50 entries / 24h.
• GET /api/recipes/:id: NetworkFirst with networkTimeoutSeconds: 3, cache api-recipe.
• Recipe images: CacheFirst, cache images, ExpirationPlugin({ maxEntries: 150, maxAgeSeconds: 30*86400, purgeOnQuotaError: true }).
• Never cache authenticated user-profile endpoints or non-GET requests here.

registerRoute(
  ({url}) => url.pathname.startsWith('/api/recipes/'),
  new NetworkFirst({ cacheName: 'api-recipe', networkTimeoutSeconds: 3 })
);

Done when: view a recipe online, go offline, reopen it — text and images render.

Mirror recipe JSON into IndexedDB so the app can search/filter offline and render proper UI states instead of spinners.

• Schema: recipes (keyPath id, indexes on title, ingredients, updatedAt), meta (last sync time), outbox (Phase 5).
• Data layer reads: IndexedDB-first render, network revalidate, write-through on fetch success (single getRecipe(id) function so components don't know about caching).
• UI: global offline banner driven by navigator.onLine + fetch failures; "cached · updated 2h ago" timestamp on recipe pages; distinguish "offline and not cached" from "not found".

Done when: offline search over previously synced recipes returns results; uncached recipe shows a friendly offline message.

Let the user pin recipes (or a whole collection like "This week's meal plan") for guaranteed offline availability, not just what they happened to browse.

• Download button on recipe page → fetch full recipe JSON + all images, store JSON in IndexedDB and images in a dedicated saved-images cache exempt from LRU expiration.
• Show per-recipe saved state and total storage used (navigator.storage.estimate()).
• Request persistent storage: navigator.storage.persist() after first save, so the browser won't evict under pressure.
• "Manage offline recipes" list with per-item delete.

Done when: saved recipe survives cache eviction test (clear runtime caches, keep saved cache) and opens fully offline.

Queue small mutations (favorite, rating, cooking notes, shopping-list ticks) made offline and replay them when connectivity returns.

• Write path: optimistic local update in IndexedDB → append {id, method, url, body, createdAt} to outbox → attempt network.
• On failure, register Background Sync tag outbox-flush; fallback replay on online event and on app start.
• Idempotency: client-generated operation UUIDs; server ignores duplicates (requires small API change — coordinate).
• Conflicts: last-write-wins for favorites/ratings; notes carry baseUpdatedAt and surface a "keep mine / keep server" prompt on mismatch.
• UI: pending-sync indicator ("2 changes waiting"), clears on flush.

Done when: favorite a recipe in airplane mode, kill the tab, reconnect — change reaches the server exactly once.

Make the SW lifecycle safe to operate long-term.

• Update toast: listen for waiting SW, offer "Refresh", post SKIP_WAITING message, reload on controllerchange.
• Cache versioning: bump cache-name prefix on breaking schema changes; delete stale caches in activate.
• Telemetry: SW install/activate errors, cache hit rate, outbox flush failures.
• Tests: Playwright with context.setOffline(true) covering — cold offline start, offline recipe read, save-for-offline, outbox replay, SW update flow. Run in CI.

Done when: CI offline suite green; deploying a new version shows the refresh toast on an open session.