service-worker - Service Worker 和透明缓存更新

Question

我正在尝试为一个简单但旧的 Django Web 应用程序安装 ServiceWorker。我开始使用示例 read-through caching example from the Chrome team

这很有效，但并不理想，因为我想在需要时更新缓存。基于阅读此处所有其他服务 worker 的答案，有两种推荐的方法可以做到这一点。

使用一些服务器端逻辑来了解您显示的内容何时更新，然后更新您的 Service Worker 以更改预缓存的内容。例如，这就是 sw-precache 所做的。

每当您依赖更新的资源时，只需更新 service worker JS 文件中的缓存版本(请参阅上面缓存示例中 JS 文件中的注释)。

对我来说也不是很好的解决方案。首先，这是一个愚蠢的遗留应用程序。我没有 sw-precache 依赖的应用程序堆栈。其次，其他人更新将显示的数据(它基本上是一个带有详细信息页面的事物列表)。

我想尝试 Jake Archibald 在他的 offline cookbook 中建议的“使用缓存，但从网络更新缓存”。但我不能让它工作。

我最初的想法是我应该能够在我的服务 worker 中返回缓存的版本，但是如果网络可用，则将一个更新缓存的函数排队。例如，在 fetch 事件监听器中是这样的

// If there is an entry in cache, return it after queueing an update
console.log(' Found response in cache:', response);
setTimeout(function(request, cache){
    fetch(request).then(function(response){
        if (response.status < 400 && response.type == 'basic') {
            console.log("putting a new response into cache");
            cache.put(request, response);
        }   
    })  
},10, request.clone(), cache);

return response;

但这不起作用。页面卡在加载中。

上面的代码有什么问题？达到我的目标设计的正确方法是什么？

Answer 1

听起来像 https://jakearchibald.com/2014/offline-cookbook/#stale-while-revalidate非常接近您要查找的内容

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.open('mysite-dynamic').then(function(cache) {
      return cache.match(event.request).then(function(response) {
        var fetchPromise = fetch(event.request).then(function(networkResponse) {
          // if we got a response from the cache, update the cache
          if (response) {
            cache.put(event.request, networkResponse.clone());
          }
          return networkResponse;
        });

        // respond from the cache, or the network
        return response || fetchPromise;
      });
    })
  );
});