iFrame 中的 Service Worker

pup*_*701 5 html javascript iframe service-worker

我正在尝试在 iframe 内初始化服务工作者。我知道服务人员在起源时有安全限制,但据我了解,设置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>
Run Code Online (Sandbox Code Playgroud)

错误: Registration failed with InvalidStateError: Failed to register a ServiceWorker: The document is in an invalid state.

如果我修改基础,它会抱怨起源不同,因此服务工作人员在某种程度上与基础 href 有关。我在这里缺少什么?

感谢您的帮助

Ben*_*lly 5

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

然而,所做<base>的是更改解析相对 URL 的基本 URL。在这种情况下,您的 Service Worker 脚本是相对 URL。因此,而不是相对于其self.location相对于新基地。

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

  • 您可以在 iframe 中注册 Service Worker(除非有某些策略阻止 iframe 访问存储/cookies/等)。不过,iframe 必须具有真实的来源。因此,您无法在沙盒 iframe 中注册 Service Worker。理论上,您应该能够使用 Blob URL 在 iframe 中注册 Service Worker,但该 Blob URL 将从其创建上下文继承源。不过,这个案例还没有经过充分的测试,如果它有问题我也不会感到惊讶。 (3认同)