javascript - iFrame 中的 Service Worker-6ren

javascript - iFrame 中的 Service Worker

转载作者：行者123 更新时间：2023-12-02 23:15:18

24

4

我正在尝试在 iframe 内初始化服务工作线程。我知道服务 worker 在起源时有安全限制，但据我所知，设置 base 应该可以解决这个问题。

<html>
   <base href="http://127.0.0.1:9090">
   <script>
     if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('/sw.js').then(function(reg) {

            if(reg.installing) {
              console.log('Service worker installing');
            } else if(reg.waiting) {
              console.log('Service worker installed');
            } else if(reg.active) {
              console.log('Service worker active');
              console.log(self)
            }
          }).catch(function(error) {
            // registration failed
            console.log('Registration failed with ' + error);
          });
        });
      }
   </script>

错误:注册失败，出现 InvalidStateError:无法注册 ServiceWorker:文档处于无效状态。

如果我修改基础，它会提示来源不同，因此服务工作人员与基础 href 有所联系。我在这里缺少什么？

感谢您的帮助

最佳答案

<base>元素不会更改文档的来源。您可以通过记录 self.origin 来测试这一点.

什么<base>但是，确实可以更改用于解析相对 URL 的基本 URL。在这种情况下，您的 Service Worker 脚本是相对 URL。所以不是相对于 self.location它相对于新基地。

这意味着如果您给出 <base>如果是跨域 URL，那么您的 Service Worker 脚本也将是跨域的。当您尝试注册时，这将触发错误。

关于javascript - iFrame 中的 Service Worker，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57189366/

24

4

0

service-worker - 在一个域中推荐一个顶级 Service Worker 或多个 Service Worker？
如果一个域有多个团队和多个 Web 应用程序，那么注册 Service Worker 来管理整个站点的最佳建议是什么？具有范围的顶级服务 worker /或子域中的多个服务 worker ？由于一个域
service-worker - 用于网络流量分析的服务 worker
我开发了一个应用程序来分析播放 YouTube 视频时的网络流量。它使用 chrome.webRequest，我使用 onHeadersReceived 事件计算流量。我想使用 service wo
service-worker - 如何将更新部署到在客户站点上运行的服务 worker ？
假设我提供了不同网站使用的推送通知服务。此服务需要在我的客户站点上安装服务 worker 。我希望架构具有一些属性: 完全静态资源。安装service worker文件和配置JS片段等过程只需要完成一
service-worker - 如何在用户脚本中使用服务 worker
我要缓存某人网站中的特定请求，那么我发现 service worker 是一个不错的选择。但我找不到任何方法通过 tampermonkey 注入(inject)一个 service worker
service-worker - 刷新时激活更新的服务 worker
当 Service Worker 更新时，它不会以正确的方式控制页面；它进入“等待”状态，等待被激活。令人惊讶的是，更新后的 Service Worker 甚至在刷新页面后都无法控制选项卡。谷歌解释
service-worker - 从 Service Worker 中获取 Service Worker id 或 date
有谁知道是否有办法在 service worker 中获取此号码或日期: 将我的服务 worker 缓存命名为 cache-1182 会很方便或 cache-20171127171448 我想在安装事
javascript - Uncaught ReferenceError : Worker is not defined while trying to create a Worker within another Worker in Chrome
这link说: Workers may spawn more workers if they wish. So-called sub-workers must be hosted within the
angular - 如何使用Angular的safety-worker.js卸载Service Worker？
有许多关于使用 ngsw-worker.js 安装 ServiceWorker 的分步指南；然而，甚至没有关于使用 safety-worker.js 卸载 ServiceWorker 的分步指南。 s
service-worker - Service Worker 中未触发定期同步
我正在尝试为我的网站使用后台定期同步。我正在使用 localhost 并在 1*1000 毫秒时注册 periodicsync 事件，但这根本不会触发。我看过这个demo ，但即使我将该网站安装为应
celery 多名 worker ，但只有一名击败 worker
我试图让用户安排一个周期性任务。我还在一个容器中运行多个 celery worker 。我对该容器的命令过去是这样的: celery worker -c 4 -B -l INFO -A my.cele
service-worker - Service Worker 的目的是什么？
从我所看到的，你甚至可以缓存一个网页。根据此文档:https://www.mnot.net/cache_docs/#BROWSER ，表示可以缓存在浏览器缓存中。我看到即使是 serviceworke
service-worker - 为什么服务 worker 缓存所有图像？
我只是在测试 Service Worker 的功能以了解其工作原理。所以现在我遇到了一个问题。 var CACHE_NAME = 'my-site-cache-v1'; var urlsToCache
service-worker - 如何阻止年长的 Service Worker？
下图显示安装了两名工作人员 - 一名处于事件状态，另一名未处于事件状态(刚刚安装)。注册 service worker 更改 service-worker.js并重新加载页面。逻辑是 Servic
service-worker - service worker 在第一次加载时获取事件
我正在尝试学习渐进式 Web 应用程序的一些基础知识，并且在我阅读的其中一篇教程中学习 [在安装了 service worker 并且用户导航到不同的页面或刷新后，service worker 将开始
service-worker - Service Worker 与网页之间的通信
我正在开发一个应用程序，其目标是定期(例如每小时)向用户发送通知。我的想法是使用一个可以在选项卡关闭后运行的服务 worker ，并继续向用户发送这些通知。网页需要能够与 Service Work
service-worker - Service Worker 和透明缓存更新
我正在尝试为一个简单但旧的 Django Web 应用程序安装 ServiceWorker。我开始使用示例 read-through caching example from the Chrome t
service-worker - 在开发模式下禁用 Service Worker。
在我们开发的情况下，我们提供来自 https://localhost 的文件因为该应用程序托管在 salesforce.com 中。在 chrome service worker 中，chrome 会
service-worker - 服务 worker 在浏览器离线时保存表单数据
我是服务人员的新手，并且浏览了各种文档(Google，Mozilla，serviceworke.rs，Github，StackOverflow questions)。最有用的是ServiceWorke
温暖 worker 的Go worker 模式
我正在解决一个问题，我有一组“热情的 worker ”。这意味着它们被维护在内存中，维护自己的上下文并且是可调用的。我一直在研究各种 Go Worker 实现，但都依赖于闭包或返回结果的简单计算函数。
service-worker - Service Worker 未在非根路径上使用
我有一个部署到静态服务器的非根路径的网络应用程序。即MyApp构建时部署到路径/文件夹 https://example.com/myapp . MyApp正在使用 vue 和 webpack 所以我添

首页

博学

6Ren·AI

商城

javascript - iFrame 中的 Service Worker