Request.isReloadNavigation

concepts

1. Reload Detection Demo

   A service worker logs every navigation request with its isReloadNavigation value. Navigate normally and then reload the page to see the difference in the log.

2. Service Worker Integration

   Shows how a service worker can use isReloadNavigation to implement a bypass-cache-on-reload strategy — fetching fresh from the network on reload, and serving from cache on normal navigation.

3. Cache-Bypass Dashboard

   Simulate Service Worker fetch handling for navigation vs. reload requests. Compare four bypass strategies — network-first, cache-bust, stale-then-refresh, selective bypass — and watch a live request log classify each fetch correctly.

4. History State Manager

   Simulated browser chrome with back, forward, and reload buttons across a three-page flow. Each navigation shows the computed isReloadNavigation value, the navigation type, and what a service worker would decide — helping you build intuition for the full navigation lifecycle.

5. Analytics Tracker

   Simulates four load-type events — fresh visit, reload, forward/back navigation, and programmatic navigation — and accumulates per-type counts. Horizontal bar chart and an event table show how isReloadNavigation combined with navigationType lets analytics code tag each load correctly.

6. Request Property Explorer

   Select from five navigation scenarios — normal, reload, back/forward, subresource fetch, API call — and inspect the full Request object available in a service worker fetch event handler. Key properties (isReloadNavigation, isHistoryNavigation, mode, cache, destination) are highlighted. A decision tree shows how a real caching strategy would branch on each scenario, with generated service worker code.

   Interactive Service Worker Reference

why it shipped

Service workers intercept all fetch events including navigation requests. A common caching strategy is "network first on reload, cache first otherwise" — browsers already implement this for HTTP caches via Cache-Control: no-cache on reload requests, but service workers had no way to distinguish reload navigations from regular navigations. Request.isReloadNavigation exposes this signal so service workers can implement the same behaviour explicitly.

the API

// In a service worker:
self.addEventListener('fetch', event => {
  const request = event.request;

  // isReloadNavigation: true when user pressed F5, Ctrl+R, or reload button
  console.log('isReloadNavigation:', request.isReloadNavigation);
  // → true  (reload)
  // → false (normal navigation or non-navigation fetch)

  if (request.mode === 'navigate' && request.isReloadNavigation) {
    // User is reloading — go to network, skip cache
    event.respondWith(fetch(request));
  } else {
    // Normal navigation — serve from cache if available
    event.respondWith(
      caches.match(request).then(cached => cached || fetch(request))
    );
  }
});

references

• ChromeStatus entry
• MDN — Request.isReloadNavigation
• Fetch spec — reload-navigation flag