我们应该如何以及何时写入服务工作者中的缓存？

Question

• 缓存来自应用程序的所有请求，而无需显式指定urlsToCache 。 因此，我将在fetch事件下缓存内容。
• 响应来自缓存的请求。
• 成功获取时更新缓存。

原来，

this.addEventListener('fetch', function(event) {
    var fetchReq = event.request.clone(),
        cacheReq = event.request.clone();
    event.respondWith(fetch(fetchReq).then(function(response) {
        var resp = response.clone();
        caches.open(CACHE_NAME).then(function(cache) {
            req = event.request.clone();
            cache.put(req, resp);
        });
        return response;
    }).catch(function() {
        return caches.match(cacheReq);
    }));
});

离线情况处理得很好。 但是这里的问题是连接缓慢。 用户必须等到提取超时或抛出错误才能从缓存中获取响应。

self.addEventListener('fetch', function(event) {
    var cacheRequest = event.request.clone();
    event.respondWith(caches.match(cacheRequest).then(function(response) {
        if(response) return response;
        var fetchRequest = event.request.clone();
        return fetch(fetchRequest).then(function(response) {
            var responseToCache = response.clone();
            caches.open(cache_name).then(function(cache) {
                var cacheSaveRequest = event.request.clone();
                cache.put(cacheSaveRequest, responseToCache);
            });
            return response;
        });
    }));
});

有了缓存优先级，响应就很好了。 但是这里的问题是代码更新时。 当更新通过sw提供的/public/main.css ，在页面重新加载时仅提供缓存，不提供更新的内容。

我还尝试将cache_name从cache-v1修改为cache-v2 （以便sw二进制差异存在并且更新sw并可以清除旧的缓存），并在activate事件时清除cache-v1 。 但是，这产生了新的问题，即两个服务人员使用相同的Registration ID同时运行。 关于这个的更多信息是在另一个SO问题中： 如何停止老年服务人员？

Answer 1

从技术上讲，两个同时工作的服务人员不是问题，而是按设计的方式工作。 （请参阅我对如何停止较老的服务人员的答复？ ）请确保您关闭了其他选项卡，这些选项卡可能激活了较旧的服务人员版本。

您在这里遇到了不同的缓存与网络方案之间不可避免的折衷。 如果您还没有阅读过脱机食谱 ，那么这是尝试确定哪种缓存策略最适合您的特定资源的一个很好的起点。