the introduction of serviceWorker on the network that we have seen so far is, without exception, caching resources that belong to the same domain as the page. What if the cache is cross-domain? Here is a configuration for local resources:

<script>
if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    navigator.serviceWorker.register("serviceworker.js").then(function(registration) {
      console.log("ServiceWorker registration successful with scope: ", registration.scope);
    }).catch(function(err) {
      console.log("ServiceWorker registration failed: ", err);
    });
  });
}
</script>

//serviceworker.js:
var CACHE_NAME = "hello-v1.3";
var urlsToCache = [
  "/hello/",
  "style.css?v=2017.11.25",
  "css3-mediaqueries.js",
  "iconfont.eot?v=3",
  "iconfont.svg?v=3",
  "iconfont.ttf?v=3",
  "iconfont.woff?v=3"
];

self.addEventListener("install", function(event) {
  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;
        }
        return fetch(event.request);
      }
    )
  );
});

self.addEventListener("activate", function(event) {
  var cacheWhitelist = "hello-v";
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheName.indexOf(cacheWhitelist) != -1 && cacheName != CACHE_NAME) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});