networkFallbackOnCache

networkFallbackOnCache.js

const apiCacheName = 'api-cache-v1';

self.addEventListener('fetch', event => {
  console.log('The user request: ', event.request.url);
  const url = new URL(event.request.url);

  if(url.hostname === 'happy-news-nmnepmqeqo.now.sh') {
    event.respondWith(cacheFallbackOnNetwork(event.request, apiCacheName));
  }
});

function networkFallbackOnCache(request, cacheName) {
  return updateCache(request, cacheName)
    .catch(() => fromCache(request, cacheName));
}

async function fromCache(request, cacheName) {
    const cache = await caches.open(cacheName);
    return cache.match(request);
}

async function updateCache(request, cacheName) {
    const cache = await caches.open(cacheName);
    const response = await fetch(request);
    if (response.ok) {
        await cache.put(request, response.clone());
    }
    return response;
}