Why doesn't my PWA update?

Service workers cache assets. By default, the browser only checks for SW updates every 24h. Even when it finds one, the new SW waits for all tabs to close before activating. Users see the old version until full session restart.

How do I force update?

In the SW, call skipWaiting and clients.claim. In your runtime listen for ‘controllerchange’, reload. Or show an ‘Update available’ button that triggers SW.update + reload.

Where to update cache version?

Construct’s sw.js uses a cacheVersion variable. Bumping it on each release ensures the SW reinstalls and refetches assets. Without this, the old cached files persist.

Fix: Construct 3 PWA Update Not Refreshing Cache

Quick answer: Bump cacheVersion in sw.js on every release. Add skipWaiting + clients.claim. On controllerchange, reload to apply the new version immediately.

A Construct 3 web game with PWA install reports players stuck on an old version after a patch. New users get the latest; existing PWA installs cache aggressively and don’t refresh.

Service Worker Lifecycle Recap

Browser finds new sw.js (byte-different): installs in background.
New SW enters “waiting” state.
Becomes active only when no existing tabs/SW are using the old version.
Until then, old SW serves cached assets.

This is why “just close the tab” doesn’t suffice for PWAs — the SW persists.

Fix 1: Skip Waiting

// sw.js
self.addEventListener('install', e => {
    self.skipWaiting();
});
self.addEventListener('activate', e => {
    e.waitUntil(clients.claim());
});

New SW activates immediately on install. clients.claim takes over open tabs.

Fix 2: Reload on Controller Change

// runtime entry script
navigator.serviceWorker.addEventListener('controllerchange', () => {
    location.reload();
});

When the new SW takes control, reload to use new assets. Users see one quick refresh.

Fix 3: Cache Version Bump

const cacheVersion = 'v1.2.5';   // bump every release
const cacheName = `game-cache-${cacheVersion}`;

self.addEventListener('activate', e => {
    e.waitUntil(caches.keys().then(keys =>
        Promise.all(keys.filter(k => k !== cacheName).map(k => caches.delete(k)))
    ));
});

Old caches deleted on activation. Disk doesn’t accumulate stale assets.

Polite Approach: Update Banner

Auto-reload during play interrupts users. Better:

navigator.serviceWorker.addEventListener('controllerchange', () => {
    showUpdateBanner(() => location.reload());
});

Banner: “Update available — refresh to apply”. User clicks when convenient.

Verifying

Deploy a new build. Open PWA — SW finds the update. Banner appears or auto-reload happens. New version active. caches.keys() in DevTools shows only the latest version.

“PWAs cache by design. Bump versions and skip waiting to ensure updates roll out cleanly.”

For frequent patches, build a small update notification UI — users tolerate “updated” banners but hate forced mid-game reloads.