v149 · Web APIs · Reload Detection Demo

Reload Detection Demo

This page registers a service worker that logs every navigation request with its isReloadNavigation value. Use the buttons below to navigate normally or reload, then observe the difference in the log.

Checking service worker support and registration…

current navigation

isReloadNavigation (this page load)

checking…

Service worker status

checking…

trigger navigation types

Normal navigation (link click)
Service worker navigation log
Waiting for service worker to relay navigation info…

service worker code

// sw.js
self.addEventListener('fetch', event => {
  const req = event.request;
  if (req.mode !== 'navigate') return; // only log navigations

  // Chrome 149+: isReloadNavigation distinguishes reload from navigate
  const isReload = req.isReloadNavigation;

  // Relay to page via BroadcastChannel
  const bc = new BroadcastChannel('nav-log');
  bc.postMessage({
    url: req.url,
    isReloadNavigation: isReload,
    mode: req.mode,
    timestamp: Date.now(),
  });

  // Caching strategy based on reload
  event.respondWith(
    isReload
      ? fetch(req)                           // reload: always network
      : caches.match(req).then(c => c || fetch(req)) // navigate: cache-first
  );
});

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗