从其他子域调用时，为什么我的离线缓存子域页面没有加载? [英] Why isn't my offline cached subdomain page not loading when called from other subdomain?

问题描述

快速问题:

我有一个服务工作者缓存来自子域domainB.project.company.com"的页面；说明:domainB.project.company.com/mypage.html这有效，我可以看到资产 + html 被缓存在我的 Chrome 开发工具中.

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.

然后我有另一个子域domainA.project.company.com"；用一页domainA.project.company.com/hello.html

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...

现在:mypage.html 已完全缓存.为什么 - 当离线时 - 不是mypage.html"?从 domainA 页面导航到该 url 时显示?我以为它被缓存了?

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?

如何使用 Service Worker 实现这一点?

And how can this be achieved using service workers?

需要的流程是:

domainA.project.company.com/hello.html 有一个指向 domainB.project.company.com/mypage.html 的链接.domainB.project.company.com/mypage.html 已完全缓存.用户下线从 domainA.project.company.com/hello.html 用户需要能够看到缓存页面 domainB.project.company.com/mypage.html我可以看到来自那个来源的所有缓存......所以我认为这就足够了:)我就是想不通:-)

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!)

推荐答案

解决方案如下:

这是我最初的服务人员:

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",
  })
);

但是因为我在 iframe 中加载了页面，所以 request.destination 是iframe".所以添加

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

request.destination === "iframe" 

不见了.

现在一切都按预期进行.

Now everything is working as intended.

而且我还添加了 - 在所有子域上 -

And I also added - on all subdomains -

      document.domain = "company.com";

到我的 - 部分.

这篇关于从其他子域调用时，为什么我的离线缓存子域页面没有加载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！