温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Service Workers
browser-cache caching javascript service-worker

javascript - 服务人员

发布于 2020-05-03 16:57:35

我有一个简单的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变量中指示的两个文件以外的所有资源,应始终从网络请求这两个文件。我如何实现此目的?然后,我该如何验证确实如此呢?

查看更多

提问者
Plastic
被浏览
39
failedCoder 2020-02-14 20:50

您可以先在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
     );
  }