How to use service-worker if resources are on diff

Question

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

Answer 1

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

Answer 2

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/'
      ]);
    })
  );
});