v147 · Service Workers · Navigation

Reload Detector

Demonstrates how a Service Worker uses FetchEvent.request.isReloadNavigation to distinguish a user-triggered reload from a normal page navigation — enabling smarter cache strategies that bypass stale-while-revalidate on intentional reloads.

Checking Service Worker support…

Simulate different navigation types and see how a Service Worker would respond using isReloadNavigation.

Current page load type

cache strategy based on reload type

Service Worker decision table

navigation (HTML) isReload → network-first (bypass cache)
navigation (HTML) isNavigate → stale-while-revalidate
critical API endpoints isReload → force fresh fetch
static assets (JS/CSS) either → cache-first (long TTL)
user data (JSON) isReload → network + update cache

service worker code

// service-worker.js  (Chrome 147+)
self.addEventListener('fetch', event => {
  const { request } = event;

  if (request.mode === 'navigate') {
    // isReloadNavigation: true for Ctrl+R, F5, location.reload()
    // isHistoryNavigation:  true for back/forward
    if (request.isReloadNavigation) {
      // User explicitly refreshed — bypass cache
      event.respondWith(fetch(request));
    } else {
      // Normal navigation — serve from cache, revalidate
      event.respondWith(
        caches.match(request).then(cached =>
          cached ?? fetch(request)
        )
      );
    }
  }
});

references