Keep PWA builds coherent by bypassing the HTTP cache
The service worker populated a new build's cache with plain addAll(), which the browser may satisfy from its HTTP cache — and static assets were served without Cache-Control, so Safari's heuristic caching could hold app.js for days. Together that could install a mixed build: a fresh index.html whose buttons reference listeners a stale app.js never registers. Install now fetches assets with cache: "reload", and the server marks all static assets no-cache (revalidation is a cheap 304; fast/offline loads are the SW cache's job anyway).
This commit is contained in:
@@ -16,8 +16,14 @@ const ASSETS = [
|
||||
];
|
||||
|
||||
self.addEventListener("install", (event) => {
|
||||
// cache: "reload" bypasses the browser's HTTP cache, so a new build always
|
||||
// caches assets fetched fresh from the server. Without it, addAll could mix
|
||||
// a fresh index.html with a heuristically-cached stale app.js and install a
|
||||
// build whose markup references listeners the old script never registers.
|
||||
event.waitUntil(
|
||||
caches.open(CACHE).then((cache) => cache.addAll(ASSETS))
|
||||
caches.open(CACHE).then((cache) =>
|
||||
cache.addAll(ASSETS.map((u) => new Request(u, { cache: "reload" })))
|
||||
)
|
||||
);
|
||||
// No skipWaiting() here: a new worker stays in "waiting" while an old one is
|
||||
// controlling a tab, so the page can prompt before swapping assets out from
|
||||
|
||||
Reference in New Issue
Block a user