Why isn't my offline cached subdomain page not loading when called from other subdomain?

问题

Quick question:

I have a service worker that caches a page from subdomain "domainB.project.company.com" Expl: domainB.project.company.com/mypage.html This works, I can see the assets + html being cached in my Chrome Dev Tools.

Then I have another subdomain "domainA.project.company.com" with a page domainA.project.company.com/hello.html

so, both pages have the same host...

Now: the mypage.html is fully cached. Why - when offline - isn't the "mypage.html" shown when navigating to that url from the domainA page? I thought it was cached?

And how can this be achieved using service workers?

The flow that needs to be is:

domainA.project.company.com/hello.html has a link to domainB.project.company.com/mypage.html. domainB.project.company.com/mypage.html is fully cached. user goes offline from domainA.project.company.com/hello.html the user needs to be able to see the cached page domainB.project.company.com/mypage.html I can see all caches from that origin... so I thought that it would be enough :) I just can't figure it out :-)

Hopefully someone has an idea on how to get this done... (fingers crossed!)

回答1:

service workers are scoped by origin and folder level. This is a security feature.

You are using different origins.

Why is this a feature?

You do not want a bad website to see your cached data and scrape it for bad purposes. You can only see what is within your origin.

You also cannot access cached content or control pages on folders above where your service worker resides. This is why you always place your service worker at the root of your site origin, not a subfolder.

回答2:

The solution was the following:

This was my initial service-worker:

importScripts(
  "https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js"
);

const { skipWaiting, clientsClaim } = workbox.core;
const { registerRoute } = workbox.routing;
const { StaleWhileRevalidate } = workbox.strategies;

skipWaiting();
clientsClaim();

registerRoute(
  ({ request }) => {
    console.log(" request ", request.destination);
    return (
      request.destination === "document" ||
      request.destination === "image" ||
      request.destination === "script" ||
      request.destination === "style" ||
      request.destination === "font"
    );
  },
  new StaleWhileRevalidate({
    cacheName: "wvg-forms",
  })
);

But because I loaded the page in an Iframe, the request.destination is "iframe". So adding