title: Service Worker Offline when Browser Back (requires Refresh)
body: <p>My service worker is really simple; just a method for caching fonts, JS, and a few other items to accelerate page performance and reduce data transfer.</p>
  
  <p>However, when live (<a href="https://heromuster.com/" rel="nofollow noreferrer">example</a>) navigating to a second page then using the browser's back button displays the OFFLINE page rather than TRYing first or using the natural browser cache.</p>
  
  <p>Relevant part of SW:</p>
  
  <pre class="lang-js prettyprint-override"><code>// Clear old caches when activated
  self.addEventListener('activate', function(e) {
    e.waitUntil(
      caches.keys().then(function(keyList) {
        return Promise.all(keyList.map(function(key) {
          if (key !== cacheName) {
            console.log('[ServiceWorker] Removing old cache', key);
            return caches.delete(key);
          }
        }));
      })
    );
    return self.clients.claim();
  });
  
  self.addEventListener('fetch', function(event) {
    event.respondWith(
      // Try the cache
      caches.match(event.request).then(function(response) {
        // Fall back to network
        return response || fetch(event.request);
      }).catch(function() {
        // If both fail, show a generic fallback:
        return caches.match('/offline.htm');
        // However, in reality you'd have many different
        // fallbacks, depending on URL &amp; headers.
        // Eg, a fallback silhouette image for avatars.
      })
    );
  });
  </code></pre>
  
  <p>This seems more likely (or possibly isolated to) Firefox (current version 59.0.2).</p>