Service Worker 不从缓存中返回文件 [英] Service worker doesn't return file from cache

问题描述

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

I'm trying to cache a single page webapp with a service worker. It should get all it's files from the cache and update that cache only when a new service worker-version is published.

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

With a precache function i'm writing some files to the cache as follows:

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

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

(I've tried to cache with and without "/" before the paths, and even with absolute paths. Makes no difference)

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

In Chrome's Cache Storage, the content of all those files is exactly as it should be. But when I try to serve the files from cache on reload of the page, none of the requests match with the cache, they all get rejected, even when I'm still online.

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');
            }
        });
    )
});

捕获函数中的 index.html 被正确提供，然后请求其他文件，如/js/script.js.这些请求在控制台中显示如下:

The index.html from the catch-function gets served correctly, and in turn requests the other files, like /js/script.js. Those request show up like this in the console:

请求{方法:'GET'，网址:'https://myurl.com/js/script.js', ...referrer: 'https://myurl.com' }

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

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

But they do not return a response, only a notice like this shows:

https://myurl.com/js/script.js 的 FetchEvent" 导致网络错误响应:一个不是响应的对象被传递给了 responseWith().

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().

我在这里遗漏了什么吗?

Am I missing something here?

推荐答案

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

Thanks to the link from Rajit https://developer.mozilla.org/en-US/docs/Web/API/Cache/match I've found that the caches.match() function accepts an options-object.

我已将 service worker 中的那一行更新为

I've updated that line in my service worker to

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

所以它包含缓存名称和一个忽略 VARY 标头匹配，现在它返回正确的文件.

so it includes the cache-name and an ignores VARY header matching, and now it returns the correct files.

这篇关于Service Worker 不从缓存中返回文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！