[英]Service Workers - selectively choose resources
我有一个简单的 Service Worker 实现,如下所示:
var CACHE_NAME = "app-cache-v1";
var urlsToCache = ["./style/main.css", "./app.ts.js"];
self.addEventListener("install", function(event) {
event.waitUntil(
caches.open(CACHE_NAME).then(function(cache) {
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener("activate", function(event) {
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
return caches.delete(cacheName);
})
);
})
);
});
self.addEventListener("fetch", function(event) {
event.respondWith(
fetch(event.request).catch(function() {
return caches.match(event.request);
})
);
});
我的目标是缓存除urlsToCache
变量中指示的两个文件之外的所有资源,这两个文件应该始终从网络请求。我怎样才能做到这一点? 我如何才能验证它实际上是这样?
在决定使用什么缓存策略之前,您可以在 fetch 事件处理程序中检查请求的 url:
self.addEventListener("fetch", function(event) {
const url = new URL(event.request.clone().url);
if (urlsToCache.indexOf(url.pathname) !== -1) { // check if current url exists in your array
event.respondWith(
// without cacheing
);
} else {
event.respondWith(
// with cacheing
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.