Рецепты по приготовлению офлайн-приложений

self.addEventListener('fetch', event => {
    event.respondWith(
        caches.open('mysite-dynamic')
            .then(cache => cache.match(event.request)
                .then(response => {
                    const fetchPromise = fetch(event.request)
                        .then(networkResponse => {
                            cache.put(event.request, networkResponse.clone())
                            return networkResponse
                        })
                        return response || fetchPromise
                    }))
    )
})

self.addEventListener('fetch', event => {
  const cache$ = caches.open('mysite-dynamic');

  const refreshCache = () => Promise.all([
    fetch(event.request),
    cache$
  ]).then(([networkResponse, cache]) => {
    cache.put(event.request, networkResponse.clone())
    return networkResponse;
  });

  event.respondWith(
    cache$
      .then(cache => cache.match(event.request))
      .then(cacheResponse => {
        const refreshedCache$ = refreshCache();
        return cacheResponse || refreshedCache$;
      })
  )
})

Тут стоит предупредить, что нужно осторожно обращаться с респонсами. Если вы попробуете один респонс (без клонирования) отправить в кеш и вернуть из fetch, то в ряде случаев будете наблюдать битый респонс в браузере (во всяком случае в Хроме).