title: ServiceWorker not working offline
body: <p>I have a simple service worker</p>
  
  <h3>Install</h3>
  
  <pre><code>self.addEventListener('install', function(event) {
    console.log('Service Worker Install...');
    // pre cache a load of stuff:
    event.waitUntil(
      caches.open(CURRENT_CACHES.prefetch)
        .then(function(cache) {
        return cache.addAll([
          '/android-chrome-192x192.png',
          '/android-chrome-512x512.png',
          '/apple-touch-icon.png',
          '/browserconfig.xml',
          '/favicon-16x16.png',
          '/favicon-32x32.png',
          '/favicon.ico',
          '/favicon.png',
          '/mstile-150x150.png',
          '/safari-pinned-tab.svg',
          '/app.css',
          '/bundle.js',
          '/sw.js'
        ])
        .then(function(){
          console.log('Caches added');
        })
        .catch(function(error){
          console.error('Error on installing');
          console.error(error);
        });
      })
    )
  });
  </code></pre>
  
  <h3>Activate</h3>
  
  <pre><code>self.addEventListener('activate', function(event) {
    console.log('Service Worker Activate...');
    // Delete all caches that aren't named in CURRENT_CACHES.
    var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
      return CURRENT_CACHES[key];
    });
  
    event.waitUntil(
      caches.keys().then(function(cacheNames) {
        return Promise.all(
          cacheNames.map(function(cacheName) {
            if (expectedCacheNames.indexOf(cacheName) === -1) {
              // If this cache name isn't present in the array of "expected" cache names, then delete it.
              console.log('Deleting out of date cache:', cacheName);
              return caches.delete(cacheName);
            }
          })
        );
      })
    );
  });
  </code></pre>
  
  <h3>Fetch</h3>
  
  <pre><code>self.addEventListener('fetch', function(event) {
    console.log('Service Worker Fetch...');
  
    event.respondWith(
      caches.match(event.request)
        .then(function(response) {
          if(event.request.url.indexOf('facebook') &gt; -1){
            return fetch(event.request);
          }
          if(response){
            console.log('Serve from cache', response);
            return response;
          }
        return fetch(event.request);
      })
      .catch(function(error){
        console.error('Error on fetching');
        console.error(error);
      })
    );
  });
  </code></pre>
  
  <p>Although this works, and I see in my caches everything cached correctly:</p>
  
  <p><a href="https://i.stack.imgur.com/HbHbU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HbHbU.png" alt="enter image description here"></a></p>
  
  <p>When I turned the network off, and refresh, I am getting:
  <strong>An unknown error occurred when fetching the script.</strong> for the service worker.</p>
  
  <p><a href="https://i.stack.imgur.com/mFfov.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mFfov.png" alt="enter image description here"></a></p>
  
  <p><strong>Isnt supposed that the service worker will be already there? Why it has to be re-fetched?</strong></p>