我们应该如何以及何时在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;
        });
    }));
});

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

我也尝试修改cache_name到cache-v2从cache-v1(使SW二元差异存在,SW更新和旧的缓存可以被清除),并清除cache-v1对activate事件.但它引发了两个服务工作者同时在同一时间运行的新问题Registration ID.更多关于这个问题的另一个问题是:如何阻止老年服务工作者？

Answer 1

同时运行的两名服务人员在技术上不是问题 - 它按设计工作.(参见我对如何阻止老年服务人员的回答？)确保关闭可能使旧版服务工作者处于活动状态的其他选项卡.

您在这里遇到了不同缓存与网络方案之间不可避免的权衡.如果您尚未阅读离线手册,那么在尝试确定哪种缓存策略最适合您的特定资源时,这是一个很好的起点.