时间戳

首页 > 解决方案 > 为什么从其他子域调用时我的离线缓存子域页面没有加载？

javascript - 为什么从其他子域调用时我的离线缓存子域页面没有加载？

问题描述

快速提问：

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

然后我有另一个带有页面 domainA.project.company.com/hello.html 的子域“domainA.project.company.com”

所以，两个页面都有相同的主机......

现在：mypage.html 已完全缓存。为什么 - 离线时 - 从 domainA 页面导航到该 url 时不显示“mypage.html”？我以为它被缓存了？

以及如何使用服务人员来实现这一点？

需要的流程是：

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 我可以看到来自该来源的所有缓存......所以我认为这就足够了:)我只是想不通:-)

希望有人对如何完成这项工作有一个想法……（祈祷！）

标签： javascriptcachingprogressive-web-appsservice-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”。所以添加

request.destination === "iframe"

失踪。

现在一切都按预期工作。

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

      document.domain = "company.com";

到我的部分。

推荐阅读