Service Worker 从缓存中获取然后更新缓存

Question

我在我的 service worker 中使用了以下逻辑（用我自己的话）：

If cache exists, use it, but also update cache from the network for later

event.respondWith( // on `fetch`
    caches.open(CACHE)
        .then(function(cache) {
            return cache.match(request);
        })
        .then(function(matching) {
            if (matching) {
                requestAndUpdateCache(event);
                return matching;
            }
            ...

除了使用缓存响应进行响应外，我还运行这个函数调用了requestAndUpdateCache。

function requestAndUpdateCache(event){
    var url = event.request.url + '?t=' + new Date().getTime();
    fetch(url)
        .then(function(response){
            if (response && response.status === 200){
                caches.open(CACHE)
                    .then(function(cache){
                        cache.put(event.request, response.clone());
                    });
            }
        }, function(error){
            console.log(error);
        });
}

问题：此函数及其位置是否对完成上述逻辑有意义？

Answer 1

您所描述的是一种在重新验证时过时的策略。

Jake Archibald 的 The Offline Cookbook. There's a section 是寻找不同 Service Worker 缓存策略实现的规范地点，其中涵盖了 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) {
          cache.put(event.request, networkResponse.clone());
          return networkResponse;
        })
        return response || fetchPromise;
      })
    })
  );
});

Service Worker 从缓存中获取然后更新缓存

Service Worker get from cache then update cache

javascript

caching

service-worker