Service Worker 和透明缓存更新 [英] Service Worker and transparent cache updates

问题描述

我正在尝试为一个简单但陈旧的 Django Web 应用程序安装 ServiceWorker.我开始使用示例 从Chrome 团队

I am trying to install a ServiceWorker for a simple, yet old, Django web app. I started working with the example read-through caching example from the Chrome team

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

This works well but isn't ideal because I want to update the cache, if needed. There are two recommended ways to do this based on reading all the other service-worker answers here.

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

1. Use some server-side logic to know when the stuff you show has updated and then update your service worker to change what is precached. This is what sw-precache does, for example.

只要更新您依赖的资源，只需更新 Service Worker JS 文件中的缓存版本(请参阅上面缓存示例中 JS 文件中的注释).

Just update the cache version in the service worker JS file (see comments in the JS file on the caching example above) whenever resources you depend on update.

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

Neither are great solutions for me. First, this is a dumb, legacy app. I don't have the application stack that sw-precache relies on. Second, someone else updates the data that will be shown (it is basically a list of things with a details page).

我想尝试 Jake Archibald 在他的 离线食谱，但我无法让它正常工作.

I wanted to try out the "use cache, but update the cache from network" that Jake Archibald suggested in his offline cookbook but I can't quite get it to work.

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

My original thinking was I should just be able to return the cached version in my service worker, but queue a function that would update the cache if the network is available. For example, something like this in the fetch event listener

// 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;

但这行不通.页面卡在加载中.

But this doesn't work. The page gets stuck loading.

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

whats wrong with the code above? Whats the right way to get to my target design?

推荐答案

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

It sounds like https://jakearchibald.com/2014/offline-cookbook/#stale-while-revalidate is very close to what you're looking for

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;
      });
    })
  );
});

这篇关于Service Worker 和透明缓存更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！