我们应该如何以及何时写入 Service Worker 中的缓存？

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 并且可以清除旧缓存），并清除 cache-v1 在 activate 事件上。但这又产生了新的问题，即两个 service worker 同时运行在同一个 Registration ID 下。有关更多信息，请参见另一个 SO 问题：

Answer 1

两个 service worker 运行同时在技术上不是问题——它按设计工作。（请参阅我对的回答）确保关闭其他可能激活了旧版本服务工作者的选项卡。

您运行陷入不同缓存与网络场景之间不可避免的权衡之中。如果您还没有通读 the offline cookbook，在尝试确定哪种缓存策略最适合您的特定资源时，这是一个很好的起点。

我们应该如何以及何时写入 Service Worker 中的缓存？

How and When should we write to cache in Service Workers?

javascript

caching

service-worker