How to use service-worker if resources are on different domains?

问题

As we know service worker is registered from the root of the project folder but, is there any way to fetch some static resources (css, js) from different domain(s)?

Example :

myWebsite.com // main url (e.g. index.html)
abc.com/css/style.css // css file path
xyz.com/js/jsFile.js //javascript file path

回答1:

Any request that comes from the page (except iframe sub-resources) will pass through the service worker. These resources can be from the same or different origin. You can cache these resources so that they are available offline however as a developer you can't manipulate or inspect the contents of them unless the resources have the correct CORS header set.

For example, in your install event, you can Cache a remote file that is not on your domain.

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open('airhorner').then(function(cache) {
      return cache.addAll([
        'https://paul.kinlan.me/'
      ]);
    })
  );
});

回答2:

It is by default possible to fetch and cache cross-origin resources according to the specification:

the [cross-origin] objects stored are Response objects with the type attribute set to "opaque" [...] less expressive API than Responses typed "basic"; the bodies and headers cannot be read or set, nor many of the other aspects of their content inspected

来源：https://stackoverflow.com/questions/33890124/how-to-use-service-worker-if-resources-are-on-different-domains

标签

javascript

service-worker