Service worker - network first then cache with fallback to static page

Question

I want to add service worker to my site to offer a good offline experience to my site users. (Site back-end is PHP)

I\'m still new to Javascript promises and service

Answer 1

In your fetch event listener:

.catch(function(err) {
      // Fallback to cache
      return caches.match(event.request);
  })

caches.match(event.request) in fact returns a Promise that resolves to undefined if no match is found from the cache.

Check for undefined and return offline.php from cache:

return caches.match(event.request)
  .then(function(res){
    if (res === undefined) { 
      // get and return the offline page
    } 
    return res;
})