我刚开始尝试使用服务工作者从我的web服务器缓存文件。我使用的正是谷歌建议的这里代码。我将服务工作者脚本上传到我的站点根文件夹,并在我希望服务工作者缓存文件的页面中包含到它的链接。
我的印象是,服务工作者只缓存urlsToCache
变量中的文件,而服务工作者只能在调用(链接到)服务工作者脚本的页面上工作。
我的网站上有几个页面,我不想让服务人员在上面做任何事情。然而,它似乎仍然是被引用的。所讨论的页面根本不包含指向服务工作人员脚本的链接。我注意到,每次使用POST方法运行AJAX命令时,我的控制台中都会收到以下错误:
TypeError:请求方法'POST‘不受支持 at service-worker.js:40 匿名
第40行是代码片段:cache.put(event.request, responseToCache);
我的AJAX调用所指向的url也不包含指向服务工作者脚本的链接。
所以我的问题是两个人。
1.)有人了解我收到的错误信息并知道如何修复吗?
2.)为什么我的服务工作者脚本一开始就没有链接到脚本的页面上运行呢?
下面是我使用的完整服务工作者脚本:
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
'assets/scripts/script1.js',
'assets/scripts/script2.js',
'assets/scripts/script3.js'
];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
if (response) {
return response;
}
var fetchRequest = event.request.clone();
return fetch(fetchRequest).then(
function(response) {
// Check if we received a valid response
if(!response || response.status !== 200 || response.type !== 'basic') {
return response;
}
var responseToCache = response.clone();
caches.open(CACHE_NAME)
.then(function(cache) {
cache.put(event.request, responseToCache);
});
return response;
}
);
})
);
});
发布于 2017-10-27 11:54:10
一旦安装了一个服务工作者,它就会独立于您的网站运行,这意味着所有的请求都将通过获取-均衡器,您的服务工作者也控制着其他页面。
不仅缓存urlsToCache,服务工作者在获取响应时也会动态缓存响应(第38-41行),这也将为您的第一个问题找到答案。您的代码缓存与http方法无关的所有响应,但正如错误消息所述,不能缓存http POST响应。
https://stackoverflow.com/questions/46911887
复制相似问题