Simple Caching Strategy for Service Workers

sw.js

const cacheName = 'mycache';

self.onFetch = event => {
  const request = event.request;
  
  const networkResponsePromise = fetch(request).catch(_ => {});
  const cachedResponsePromise = caches.match(request);
  
  event.respondWith(async function () {
    const cacheResponse = await cachedResponsePromise;
    if (cacheResponse) return cacheResponse;
    
    const networkResponse = await networkResponsePromise;
    if (networkResponse) return networkResponse.clone();
    
    throw new Error(`Neither the network nor the cache has a response for ${request.url}`);
  }());
  
  event.waitUntil(async function () {
    const networkResponse = await networkResponsePromise;
    if (networkResponse) {
      const cache = await caches.open(cacheName);
      cache.put(request, networkResponse.clone());
    }
  }());
}