注册ServiceWorker后调用controller.postMessage报错：无法读取null的postMessage属性

错误原因 #

navigator.serviceWorker.controller返回null，说明当前页面还未被ServiceWorker控制。ServiceWorker注册成功只是完成了注册流程，此时它可能还处于安装或激活阶段，尚未接管当前页面；首次注册时，默认不会自动控制已打开的页面，需要刷新或主动触发接管。

解决方案 #

1. 等待ServiceWorker就绪后再发送消息 #

使用navigator.serviceWorker.ready这个Promise，它会在ServiceWorker完成注册并激活后才resolve，此时可以安全获取可用的Worker实例：

navigator.serviceWorker.register('/serviceWorker.js')
  .then(() => navigator.serviceWorker.ready)
  .then(registration => {
    // 优先用控制当前页面的Worker，否则用已激活的Worker
    const targetWorker = navigator.serviceWorker.controller || registration.active;
    if (targetWorker) {
      targetWorker.postMessage({'hello': 'world'});
    } else {
      console.log('暂无可用的ServiceWorker实例，请刷新页面重试');
    }
  })
  .catch(err => console.error('ServiceWorker注册失败:', err));

2. 让ServiceWorker激活时主动接管页面 #

在ServiceWorker脚本中添加activate事件监听，调用clients.claim()主动接管所有已打开的页面，首次注册后无需刷新就能控制页面：

// serviceWorker.js
self.addEventListener('activate', event => {
  event.waitUntil(clients.claim()); // 激活后立即接管所有客户端页面
});

// 监听message事件接收页面消息
self.addEventListener('message', event => {
  console.log('收到页面消息:', event.data);
  // 可选：回复消息给页面
  event.source.postMessage({'reply': '已收到你的消息'});
});

3. 页面监听ServiceWorker控制状态变化 #

如果需要在ServiceWorker开始控制页面时自动发送消息，可以监听controllerchange事件：

navigator.serviceWorker.register('/serviceWorker.js')
  .catch(err => console.error('注册失败:', err));

// 页面被ServiceWorker控制时触发
navigator.serviceWorker.addEventListener('controllerchange', () => {
  if (navigator.serviceWorker.controller) {
    navigator.serviceWorker.controller.postMessage({'hello': 'world'});
  }
});

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