服务工作线程不从缓存返回文件

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

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

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。这些请求在控制台中显示如下：

请求 { 方法: 'GET', url: 'https://myurl.com/js/script.js https://myurl.com/js/script.js'，...引荐来源：'https://myurl.com https://myurl.com' }

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

的 FetchEvent 为“https://myurl.com/js/script.js https://myurl.com/js/script.js" 导致网络错误响应：一个不是 Response 的对象被传递给 respondWith()。

我在这里错过了什么吗？

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

我已将我的服务人员中的该行更新为

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

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