ServiceWorker: Offline page not showing

Question

I am new to PWA/ServiceWorker (SW), and I need some help.

On fetch event listener, I check first if the assets are available on cache first. If it's available, I return it, if not, fetch the new assets, update the cache. However, when the page goes offline and the user navigates to a new page, I am not seeing my offline page, this is the error I am getting on the console:

The FetchEvent for "http://localhost:3000/about" resulted in a network error response: an object that was not a Response was passed to respondWith().

Below is my code below to understand it clearly ???? Thank you.

functions

fromCache = (request) => {
  return caches.open(CACHE).then(
    (cache) => {
      return cache.match(request).then(
        (matching) => {
          if (!matching || matching.status === 404) {
            return Promise.reject("fromCache no match");
          }
          return matching;
        }
      );
    }
  );
}

updateCache = (request, response) => {
  return caches.open(CACHE).then(
    (cache) => {
      return cache.put(request, response);
    }
  );
}

event listener

self.addEventListener("fetch", (event) => { 
  if (event.request.method !== "GET") {
    return;
  }
  event.respondWith(
    fromCache(event.request).then(
      (response) => {
        event.waitUntil(
          fetch(event.request).then(
            (response) => {
              return updateCache(event.request, response);
            }
          )
        );
        return response;
      },
      () => {
        return fetch(event.request)
          .then(
            (response) => {
              event.waitUntil(updateCache(event.request, response.clone()));
              return response;
            }
          )
          .catch(
            () => {
              if (event.request.destination !== "document" || event.request.mode !== "navigate") {
                return;
              }
              return caches.open(CACHE).then(
                (cache) => {
                  cache.match(offlineFallbackPage);
                }
              );
            }
          );
      }
    )
  );
});

Neo Genesis Neo Genesis · Accepted Answer · 2020-05-11T12:33:06

Heres how I fixed my issues 🙂

variable

const cacheName = 'neo-genesis';
const offlineFallbackPage = 'offline.html';
const skipCacheFrom = [
  'apple',
  'bing',
  'extension',
  ...
]

function

const isOnList = (property, list) =>
  list.some((item) => property.indexOf(item) !== -1);

event listener

self.addEventListener('fetch', (event) => {
  if (event.request.method === 'GET' && !isOnList(event.request.url, skipCacheFrom)) {
    event.respondWith(
      caches.match(event.request)
        .then(
          (cache) => (
            cache || fetch(event.request)
              .then(
                (response) => (
                  caches.open(cacheName)
                    .then(
                      (cache) => {
                        cache.put(event.request.url, response.clone());
                        return response;
                      }
                    )
                )
              )
          )
        )
        .catch(
          (error) => {
            if (event.request.destination !== 'document' || event.request.mode !== 'navigate') {
              console.log(`This device is offline!\n${error}`);
              return Promise.resolve();
            }
            return caches.match(offlineFallbackPage);
          }
        )
      );
  }
  return;
});

ServiceWorker: Offline page not showing

1 Answers