技术问询：能否从同源友好iframe中注册Service Worker？

答案是肯定的——同域的友好iframe完全可以注册Service Worker，下面我来详细解释原因和实操细节：

核心逻辑：源（Origin）的权限共享 #

Service Worker的注册权限是基于源来控制的，同域iframe和宿主页面属于同一个源（协议、域名、端口完全一致），所以iframe拥有和主页面相同的Service Worker操作权限。不管是在主页面还是iframe中注册，最终的Service Worker都会绑定到这个共同的源上，作用于源下的所有页面资源。

关于register()方法的路径参数 #

你提到的传入完整绝对路径是完全可行的，只要这个路径属于当前源（比如http://myowndomain.com/sw.js），浏览器会正常识别并完成注册。当然你也可以传入相对路径，iframe的文档上下文会自动将其解析为对应源的绝对路径，比如在iframe中执行navigator.serviceWorker.register('./sw.js')，会自动映射为当前源下的/path/to/iframe/sw.js（取决于iframe的页面路径）。

实操代码示例 #

在同域iframe的脚本中，可以这样注册Service Worker：

// 检查浏览器是否支持Service Worker
if ('serviceWorker' in navigator) {
  // 等待页面加载完成后注册
  window.addEventListener('load', async () => {
    try {
      // 注册Service Worker，这里可以传入绝对路径或相对路径
      const registration = await navigator.serviceWorker.register('/sw.js');
      console.log('Service Worker注册成功，作用域:', registration.scope);
    } catch (error) {
      console.error('Service Worker注册失败:', error);
    }
  });
}

如果需要自定义Service Worker的作用域，可以在第二个参数中指定：

// 注册时指定作用域为根目录下的/blog路径
const registration = await navigator.serviceWorker.register('/sw.js', {
  scope: '/blog/'
});

注意：自定义的作用域必须是当前源下的子路径，不能跨域或超出源的范围。

额外注意点 #

因为是同域友好iframe，注册后的Service Worker会对整个源生效——包括宿主页面、其他同域iframe，以及后续打开的同域页面。也就是说，iframe注册的Service Worker和主页面注册的效果是完全一致的，本质上都是为当前源绑定了一个Service Worker。

内容的提问来源于stack exchange，提问作者Boaz Hoch