Building an offline-first PWA with Workbox — 学习笔记

When I made N1 Lab installable, the hard part wasn't the manifest — it was deciding what deserves to work offline and what can politely fail. This note is the record of that decision, mostly so future me stops re-deriving it.

中文も混ぜて書く。例えば：離線快取的重點不是「全部存下來」，而是先分清楚 应用外壳 和数据。アプリの殻とデータを分けて考えると、戦略は自然に決まる。

Two caching strategies, not five

The app shell uses precacheAndRoute, and everything else falls into a single runtime rule. Fewer strategies means fewer cache-invalidation surprises.

TYPESCRIPT

registerRoute(
  ({ url }) => url.pathname.startsWith('/api/grammar'),
  new StaleWhileRevalidate({ cacheName: 'grammar-v2' })
);

What I cache, in order

App shell — HTML, JS, CSS, fonts

Grammar data — the reason the app exists

Images — nice to have, evicted first

Offline support is a promise, not a feature. Only promise what you can keep on a subway with no signal.

The full setup lives in the N1 Lab repository, and Workbox's own strategy docs cover the rest.

Version cache names — grammar-v2 beats a purge script

Test offline in the browser, not in your head

Ship, then watch what actually gets cached

That's the whole system. Boring on purpose — the interesting part is the app it keeps alive.

SAVED · END

WRITTEN BYK

← Back to Writing