Service Worker Fetching Cached Assets Failure

Question

Hello every one i'm new in service worker and i'm facing this error

The FetchEvent for "<My Local URL>" resulted in a network error response: the promise was rejected.

i don't know what it means

this is what happens when i click offline and refresh Offline Issue From Network Tab

and here is my code

self.addEventListener('install', function(event) 
{
console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
  caches.open('static')
      .then(function(cache) {
      console.log('[Service Worker] Precaching App Shell');
      cache.add('/src/js/app.js')
    })
  )
});

self.addEventListener('activate', function(event) {
  console.log('[Service Worker] Activating Service Worker ....', event);
  return self.clients.claim();
});

self.addEventListener('fetch', function(event) {
event.respondWith(
  caches.match(event.request)
    .then(function(response) {
      if (response) {
        return response;
      } else {
        return fetch(event.request);
      }
    })
 );
});

Any Clue I'll Be Appreciated.

Answer 1

In the install event of your service worker, you add to the Cache Storage API only one item /src/js/app.js. And when you try to check how your app works offline, the first thing that is going to be fetched is HTML response for the main page and since it was not added to the cache, you are getting such results.

So you need to add to the Cache Storage all required assets for offline mode, for example, something like this:

self.addEventListener('install', function(event) 
{
console.log('[Service Worker] Installing Service Worker ...', event);
event.waitUntil(
  caches.open('static')
      .then(function(cache) {
      console.log('[Service Worker] Precaching App Shell');
      cache.addAll([
         '/src/js/app.js',
         '/src/css/app.css',
         '/src/index.html'
     ]);
    })
  )
});

...

Please check the path to the assets accordingly to your app. Hope it will help you!