问题描述
我有一个简单的服务工作者，它将两个资源（index.html，app.js）添加到缓存中（在安装时），删除旧缓存（在激活时）并从缓存中提供资源（如果存在），否则从网络（取回）。为了让新服务工作者注册并删除旧缓存，我使用每个新资源版本增加了CACHE_NAME中的版本号：
I have a simple service worker, that adds two resources (index.html, app.js) to the cache (on install), deletes old caches (on activate) and serves the resources from cache if present, else from the network (on fetch). To get the new service worker registered and to delete old caches I increase the version number in CACHE_NAME with each version of new resources:
var CACHE_NAME = 'test-cache-v4';
var urlsToCache = ['./','./app.js'];
self.addEventListener('install', function (event) {
event.waitUntil(
caches.open(CACHE_NAME)
.then(function (cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
return self.skipWaiting();
});
self.addEventListener('activate', function(event) {
event.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== CACHE_NAME) {
return caches.delete(key);
}
}));
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open(CACHE_NAME).then(function(cache){
return cache.match(event.request)
.then(function(response) {
if (response) {
console.log('SERVED FROM CACHE');
return response;
}
return fetch(event.request).then(function(response){
console.log('Response from network is:', response);
return response;
});
}
)
})
);
});
在我的本地主机上，服务人员工作正常。
On my localhost the service worker works perfectly fine.
但是在服务器上由
return cache.match(event.request)
总是未定义。因此，资源永远不会从缓存中提供，而是始终来自网络。
is always undefined. As a result the resources are never served from cache but always from network.
即使在Chrome的开发工具应用程序选项卡中，我也可以看到新的注册服务工作者工作正常，缓存存储充满了我的新缓存资源（请求指向index.html和app.js的URL）。我还认为我已经使用Cache-Control no-cache正确处理了Web服务器配置调整。
This happens even though in Chrome's dev tools "Application" tab I can see that registration of the new service worker works fine and "Cache Storage" gets filled with my new cache resources (request URLs to index.html and app.js). I also think that I have handled the web server config tweaks correctly with Cache-Control no-cache.
如果我改变
return cache.match(event.request)
到
return cache.match(event.request.url)
服务工作者也可以工作在服务器上。
the service worker also works on the server.
但是，我想了解为什么看起来正确的语法并且在我能找到的所有示例中使用的语法在服务器上不起作用。
However, I would like to understand why the syntax that seems right to me and is used in all the examples I can find does not work on the server.
一个区别是我通过https直接访问localhost和服务器。
One difference is that I access localhost directly and the server over https.
编辑：另一个区别是来自服务器的资源被压缩（Header => content-encoding：gzip）。
Another difference is that resources from the server are compressed (Header => content-encoding:gzip).
是否可以将这些差异与其中一个相关联？
Could it be linked to one of these differences?
非常感谢任何想法！
推荐答案
1。 no-cache
尝试取消服务器中的缓存机制，我在远程Apache服务器中找到这些代码（通过HTTPS提供）：
1. no-cache
Try to cancel cache mechanism in your server, i found these code in my remote Apache server (served over HTTPS):
<filesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header append Vary User-Agent env=!dont-vary
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</filesMatch>
我的本地主机不通过HTTPS提供，示例
正常工作。
My localhost is not served over HTTPS, and the example How to Setup a Basic Service Worker works fine on it.
显示参数应该是您尝试在缓存中查找的请求。但是 cache.match（event.request.url）也适用于localhost和远程Apache Server。缓存没有问题。
Cache.match() - Web APIs | MDN shows that parameter should be the Request you are attempting to find in the Cache. But cache.match(event.request.url) works as well in localhost and remote Apache Server. Caching has no problem.
在localhost（无gzip）和远程Apache服务器（gzip）中测试后，两个缓存文件都没有任何错误。所以gzip不是其中一个原因。
After test in localhost(no gzip) and remote Apache server(gzip), both caching files without any error. So gzip is not one of the reason.
这篇关于Service Worker：cache.match（request）返回undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！