javascript - 如何注册来自不同子域的服务 worker

标签 javascript service-worker progressive-web-apps

我有两个子域:https://abc.xxxx.comhttps://xyz.xxxx.com .所以我的问题:

1). is it possible to register a service worker for https://xyz.xxxx.com from https://abc.xxxx.com ? if yes then how?

2). if http://abc.xxxx.com (http insecure) then anyway to register a service worker for https://xyz.xxxx.com from http://abc.xxxx.com like in iframe or something....

这是一个真实的情况,我面临着我的多个子域。任何帮助表示赞赏。提前致谢。

最佳答案

以下是我认为应该解决您在问题中提出的各个要点的一些一般性答案:

  • 每个注册的 service worker 都有一个关联的 scope ,它规定了 service worker 可以控制的网页集。 scope service worker 的名称是一个 URL,并且该 URL 必须与注册 service worker 的页面具有相同的来源,并且必须是对应于与页面相同的路径级别的 URL 或者向下一级或多级的路径.默认 scope对应于与服务 worker 脚本位置相同的路径级别。由于此限制,无法调用 navigator.serviceWorker.register(...)从一个(子)域上的页面开始,最终得到一个控制另一个(子)域上的页面的服务 worker 。

  • 有一些限制可以防止您抛出 https: <iframe>http: 上页面并使用它来注册服务人员。参见 DOMException when registering service worker inside an https iframe

  • 虽然我不知道它与您的问题直接相关,明确调用 fetch()对于 http: Service Worker 代码中的资源将导致当前版本的 Chrome 失败,因为混合内容 fetch() service worker 中不允许使用 s。我不知道这方面的事情是否已 100% 解决,并且 this open bug仍然相关。

如果您的页面同时存在于 abc.123.com 上和 xyz.123.com并且您希望两组页面都由服务 worker 控制,那么您需要有两个单独的服务 worker 注册。每次注册都需要为您的服务工作人员 JS 文件的副本,该文件托管在与顶级页面对应的相应域中,并且所有页面和服务工作人员脚本都需要通过 https: 访问。 .

也就是说,您可以通过包含跨域 <iframe> 来启动针对不同域的服务工作线程注册。在页面上,但主机页面和 <iframe>需要通过 https: 提供服务.正常的服务 worker 范围限制适用,因此,例如,如果您想为另一个域注册一个服务 worker ,它将覆盖整个 https://other-domain.com/。范围,您需要确保正在注册的服务 worker 脚本的位置在顶层,例如https://other-domain.com/service-worker.js , 不在 https://other-domain.com/path/to/service-worker.js .这是例如 AMP project 使用的方法。通过 <amp-install-serviceworker> element .

关于javascript - 如何注册来自不同子域的服务 worker ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31871787/

相关文章:

iOS PWA 闪屏?

android - Flutter 平台特定依赖项

javascript - 即使在输入正确的值后 HTML 表单仍显示错误

javascript - firebase 云函数不会存储名为 "__session"以外的 cookie

javascript - Chrome 应用程序将 JSON 作为字符串读取

android - 如何在 Cordova Android 应用程序中使用服务人员?

firebase - 如何使用新部署的站点版本 (Firebase) 从用户的浏览器中删除先前部署中注册的服务 worker ?

javascript - Web Audio API createMediaElementSource 破坏音频标签

service-worker - ServiceWorkerRegistration.active 首次未设置(Chrome)

reactjs - npm run build in react 后没有 service-worker.js 文件