javascript - Service Worker 不从缓存中返回文件

Question

我正在尝试使用服务 worker 缓存单页 Web 应用程序。它应该从缓存中获取所有文件，并仅在发布新的服务 worker 版本时更新该缓存。

使用预缓存功能，我正在将一些文件写入缓存，如下所示:

function precache() {
return caches.open(CACHE).then(function(cache) {
    return cache.addAll([
        'index.html',
        'js/script.js',
        'img/bg.png',
        'img/logo.svg',
        ...
    ]);
});
}

(我尝试在路径前使用和不使用“/”进行缓存，甚至使用绝对路径。没有区别)

在 Chrome 的缓存存储中，所有这些文件的内容都与它应该的完全一样。但是，当我尝试在重新加载页面时从缓存中提供文件时，没有任何请求与缓存匹配，它们都被拒绝了，即使我仍然在线。

self.addEventListener('fetch', function(evt) {
    evt.respondWith(
        caches.match(evt.request).then(function(response) {
            if(response){
                return response;
            } else {
                reject('no result');
            }
        }).catch(function(){
            if(evt.request.url == 'https://myurl.com'){
                return caches.match('/index.html');
            }
        });
    )
});

来自 catch 函数的 index.html 得到正确的服务，然后请求其他文件，比如/js/script.js。这些请求在控制台中显示如下:

Request { method: 'GET', url: 'https://myurl.com/js/script.js', ... referrer: 'https://myurl.com' }

但是他们没有返回响应，只有这样的通知显示:

The FetchEvent for "https://myurl.com/js/script.js" resulted in a network error response: an object that was not a Response was passed to respondWith().

我是不是漏掉了什么？

Answer 1

感谢来自 Rajit 的链接 https://developer.mozilla.org/en-US/docs/Web/API/Cache/match我发现 caches.match() 函数接受一个选项对象。

我已经将我的 Service Worker 中的那一行更新为

caches.match(evt.request,{cacheName:CACHE,ignoreVary:true}).then(function(response) {

因此它包含缓存名称和忽略 VARY header 匹配，现在它返回正确的文件。