service worker not loading in offline

Question

I'm building a progressive web app and the service worker looks like this:

    CURRENT_CACHE = 'V3';
    FILES_TO_CACHE = [
        '/index.html',
        '/js/bcheck.js',
        '/js/mss.js',
        '/js/vendor.js'
    ];

    console.info('in file');
    self.addEventListener('install', function (event) {
        console.info('installed');
        event.waitUntil(caches.open(CURRENT_CACHE).then(function(cache){
            return cache.addAll(FILES_TO_CACHE);
        }));
    });
    self.addEventListener('activate', function (event) {
        console.info('activated');
        event.waitUntil(caches.keys().then(function (cachesNames) {
            return Promise.all(cachesNames.map(function (cacheName) {
                if (cacheName !== CURRENT_CACHE) {
                    return caches.delete(cacheName);
                }
            }))
        }));
    });

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

                        return fetch(event.request);
                    }
                )
        );
    });

I see that after the installation I get all my files cached, but when I put the server offline and reload nothing works, it like the service is offline and nothing loads.

Thanks for the help

• I work with local server HTTP on localhost

Answer 1

You might be trying for localhost:port/ but you cached /index.html. Try accessing localhost:port/index.html or add this / to your FILES_TO_CACHE in serviceWorker code and retry.

Answer 2

You need to tell your Service Worker what to do in the case where you are offline. As your fetch function is currently constructed, it has no idea what to do. Try something like this. You should be able to copy and past this directly into your service worker file, clear out the service worker in your browser, and then

`//Borrowed from https://github.com/TalAter/UpUp
function onFetch(event) {
  event.respondWith(
    // try to return untouched request from network first
    fetch(event.request).catch(function() {
      // if it fails, try to return request from the cache
      return caches.match(event.request).then(function(response) {
        if (response) {
          return response;
        }
        // if not found in cache, return default offline content for navigate requests
        if (event.request.mode === 'navigate' ||
          (event.request.method === 'GET' && event.request.headers.get('accept').includes('text/html'))) {
          console.log('[Serviceworker]', "Fetching offline content", event);
          return caches.match('/index.html');
        }
      })
    })
  );
}`

Answer 3

For Service worker working offline properly it should Strictly be in Https try working with Https. and You can check it in lighthouse.(LightHouse is a tool for checking the PWA Service -Worker).