Service Worker应通过清单注册还是脚本注册？

针对问题1：注册方式的选择与权衡 #

两种方式的核心差异

• 脚本注册（JS方式）：

  • 优势：灵活性极强，可以在任意时机触发注册（比如用户交互后、页面加载完成后），能直接获取registration对象，实时监听所有状态变化，还能根据业务逻辑处理注册失败的情况（比如提示用户刷新、重试）。
  • 劣势：需要编写额外的JS代码，依赖页面脚本的执行，如果页面加载时脚本阻塞，可能会延迟Service Worker的注册时机。

• Manifest声明式注册：

  • 优势：完全声明式，不需要额外JS代码，浏览器会自动处理注册流程，尤其适合PWA场景——当用户将应用添加到主屏幕时，浏览器会自动读取Manifest并注册Service Worker，体验更流畅。
  • 劣势：控制权较弱，无法自定义注册时机，而且默认情况下不能直接拿到registration对象。

如何获取Manifest注册的registration对象？

其实即使是通过Manifest注册的Service Worker，你依然可以通过navigator.serviceWorker.getRegistration()方法来获取已注册的实例，代码示例：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.getRegistration('/') // 传入对应的scope
    .then(registration => {
      if (registration) {
        // 这里就能拿到registration对象，和脚本注册的一样处理
        let serviceWorker;
        if (registration.installing) {
          serviceWorker = registration.installing;
          // 处理installing状态
        } else if (registration.waiting) {
          serviceWorker = registration.waiting;
          // 处理waiting状态
        } else if (registration.active) {
          serviceWorker = registration.active;
          // 处理active状态
        }
        if (serviceWorker) {
          serviceWorker.addEventListener('statechange', e => {
            // 监听状态变化
          });
        }
      }
    });
}

会不会错过状态事件？

确实存在这种可能性——如果Service Worker在你的脚本调用getRegistration()之前就已经完成了安装/激活，那你就会错过对应的statechange事件。不过你可以通过检查registration对象的当前状态（比如registration.active是否存在）来补救，直接处理当前的状态即可。另外，浏览器会保留Service Worker的状态信息，所以即使错过了初始事件，你依然能获取到最终的状态。

针对问题2：缓存相关的影响 #

Manifest缓存对Service Worker的影响

当浏览器缓存了Manifest文件后，它会根据Manifest里的serviceworker配置来获取对应的脚本文件。这里需要注意：

• 如果Manifest被缓存，浏览器可能不会频繁检查Manifest的更新，这可能会延迟Service Worker的更新时机。不过浏览器有默认的缓存刷新机制，也可以通过设置Manifest的HTTP缓存头（比如Cache-Control: no-cache）来强制浏览器每次都检查Manifest的更新。
• Service Worker脚本本身的缓存规则不受Manifest缓存的直接影响，它依然遵循Service Worker的更新规则（比如24小时强制更新、脚本文件哈希变化触发更新）。

24小时规则是否依然适用？

是的，即使你没有把Service Worker脚本存入离线缓存，24小时强制更新规则依然有效。这个规则是浏览器内置的，目的是防止Service Worker长期停留在旧版本，不管脚本是否被缓存，浏览器都会每隔24小时尝试检查一次Service Worker的更新。

关于update_via_cache的解释

这个字段用来控制浏览器在检查Service Worker更新时，是否使用缓存的脚本文件，有三个可选值：

• none：浏览器检查更新时，会直接向服务器请求最新的Service Worker脚本，完全不使用缓存。
• imports：浏览器只会在检查Service Worker的导入脚本（比如通过importScripts()引入的文件）时使用缓存，主脚本会直接请求服务器。
• all：浏览器检查更新时，会优先使用缓存的主脚本和导入脚本，只有缓存过期时才会请求服务器。

这个字段的核心作用是平衡更新及时性和网络请求开销，比如设置为none可以确保每次都获取最新的脚本，但会增加网络请求；设置为all可以减少请求，但可能会延迟更新。

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