注册Service Worker后navigator.serviceWorker.controller为空，刷新后可访问？

• 核心原因：新注册的Service Worker默认不会立即接管当前页面
  注册Service Worker的流程是下载→安装→激活，但浏览器的默认规则是：只有页面重新加载时，激活后的Service Worker才会开始控制该页面。你刚注册完就获取controller，当前页面的加载过程并没有被这个新SW处理，所以自然返回null；哪怕等待15秒让SW完成激活，它也不会主动接管已打开的页面。

• 软刷新后正常的原因
  软刷新会触发页面重新加载，此时浏览器会检测到已激活的Service Worker，让它接管这个新加载的页面，所以navigator.serviceWorker.controller就能获取到对应的SW实例了。

• 如何让注册后立即控制当前页面
  如果想跳过刷新，让SW注册后马上接管当前页面，可以在Service Worker的activate事件中调用clients.claim()方法，强制激活后的SW接管所有已打开的客户端页面：

  // service-worker.js 中的代码
  self.addEventListener('activate', (event) => {
    event.waitUntil(self.clients.claim());
  });
  

  这样注册完成后，不用刷新页面，controller就能正常获取到值了。

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