Question

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

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

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

请求{方法：'获取'，网址：'https://myurl.com/js/script.js'，...推荐人：'https://myurl.com'}

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

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

我在这里错过了什么吗？

Answer 1

感谢Rajit https://developer.mozilla.org/en-US/docs/Web/API/Cache/match的链接，我发现ibm_ner_recognition函数接受了一个options-object。

我已将服务工作者中的那一行更新为

caches.match()

所以它包含cache-name和忽略VARY头匹配，现在它返回正确的文件。

Answer 2

我遇到了同样的问题，并且似乎已经通过使用ignoreVary:true参数解决了。该文档明确指出cacheName会忽略Cache.match()参数

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

2 个答案: