问题:

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