Service Worker 根据某些条件运行事件 waitUntil()

Question

我正在尝试在后台更新缓存的服务工作者中实现cache-then-network 策略。我想避免不必要的fetch 请求，所以想出了以下解决方案-

function cache_then_network(event) {
    var updated = false;
    event.respondWith(
        caches.open(staticCacheName)
            .then(cache => cache.match(event.request)
                .then((response) => {
                    if (response) {
                        return response;
                    }
                    else {
                        return fetch(event.request)
                        .then((response) => {
                            const resClone = response.clone();
                            return caches.open(staticCacheName)
                                .then((cache) => {
                                    cache.put(event.request, response);
                                    updated = true;
                                    return resClone;
                                })
                        })
                    }
                })
            )
    )
    if (!updated) {
        event.waitUntil(update(event.request))
    }
}

update 函数通过使用网络获取请求来更新缓存。问题是updated 变量始终为假，导致update 函数每次都运行。

我对服务人员不太熟悉，代码基本上是从多个来源拼接而成的。所以欢迎替代/更好的解决方案。我的最终目标是先缓存，在后台从网络中获取，并设置一个标志来告知内容是否已更改。

Answer 1

Service Worker offline-cookbook 有所有答案 -

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