title: Service Worker - Uncaught (in promise) TypeError: Failed to fetch
body: <p>I have made a web app and have used service worker in my app. It's all working fine when online. The files are all cached when we run the app for the first time. But I get this error when it goes offline.</p>
  
  <pre><code>Uncaught (in promise) TypeError: Failed to fetch
  </code></pre>
  
  <p>I don't know why this error is occurring!</p>
  
  <p>I have used pwabuilder.com for adding service worker and manifest to the web app.</p>
  
  <p>This is the pwabuilder-sw.js file:</p>
  
  <pre><code>self.addEventListener('install', function(event) {
  event.waitUntil(preLoad());
  });
  
  var preLoad = function() {
  console.log('[PWA Builder] Install Event processing');
  return caches.open('pwabuilder-offline').then(function(cache) {
      console.log('[PWA Builder] Cached index and offline page during 
  Install');
      return cache.addAll([
          '/manup.js',
          'pwabuilder-sw-register.js',
          'pwabuilder-sw.js',
          'manifest.json',
          '/js/angular.min.js',
          '/js/script.js',
          '/js/materialize.min.js',
          '/css/materialize.min.css',
          '/css/style.css',
          '/offline.html',
          '/index.html'
      ]);
  });
  }
  
  self.addEventListener('fetch', function(event) {
  console.log('The service worker is serving the asset.');
  event.respondWith(checkResponse(event.request).catch(function() {
      return returnFromCache(event.request)
  }));
  event.waitUntil(addToCache(event.request));
  });
  
  var checkResponse = function(request) {
  return new Promise(function(fulfill, reject) {
      fetch(request).then(function(response) {
          if (response.status !== 404) {
              fulfill(response)
          } else {
              reject()
          }
      }, reject)
  });
  };
  
  var addToCache = function(request) {
  return caches.open('pwabuilder-offline').then(function(cache) {
      return fetch(request).then(function(response) {
          console.log('[PWA Builder] add page to offline' + response.url)
          return cache.put(request, response);
      });
  });
  };
  
  var returnFromCache = function(request) {
  return caches.open('pwabuilder-offline').then(function(cache) {
      return cache.match(request).then(function(matching) {
          if (!matching || matching.status == 404) {
              return cache.match('offline.html')
          } else {
              return matching
          }
      });
  });
  }; 
  </code></pre>
  
  <p>This is the pwabuilder-sw-register.js file:</p>
  
  <pre><code>if (navigator.serviceWorker.controller) {
    console.log('[PWA Builder] active service worker found, no need to register')
  } else {
    //Register the ServiceWorker
    navigator.serviceWorker.register('pwabuilder-sw.js', {
      scope: './'
    }).then(function (reg) {
      console.log('Service worker has been registered for scope:' +
        reg.scope);
    });
  }
  </code></pre>
  
  <p>Any clues?!</p>