Chrome中跨站重定向后navigator.serviceWorker.ready无法resolve求解决办法

问题场景 #

页面从其他网站重定向到当前站点后，调用navigator.serviceWorker.ready返回的Promise始终处于pending状态，无论等待多久都不会resolve。但刷新页面后再次调用该方法，Promise会立即fulfilled并返回ServiceWorkerRegistration实例。

原因分析 #

这是Chrome的已知行为：跨站重定向会触发浏览器的安全限制，暂时限制Service Worker的上下文初始化流程，导致ready状态无法正常触发，以此避免潜在的跨站安全风险。

可行解决办法 #

1. 主动检测并触发Service Worker就绪状态 #

页面加载完成后，主动检查Service Worker的注册状态，手动监听激活事件来获取就绪实例，无需依赖ready Promise：

async function ensureServiceWorkerReady() {
  // 先检查是否已有注册的Service Worker
  let registration = await navigator.serviceWorker.getRegistration();
  
  if (!registration) {
    // 未注册则先完成注册
    registration = await navigator.serviceWorker.register('/sw.js');
  }

  // 如果已有激活的worker，直接返回
  if (registration.active) {
    return registration;
  }

  // 监听worker激活事件
  return new Promise(resolve => {
    const handleUpdate = () => {
      const installingWorker = registration.installing;
      installingWorker.addEventListener('statechange', () => {
        if (installingWorker.state === 'activated') {
          resolve(registration);
          // 移除监听避免内存泄漏
          registration.removeEventListener('updatefound', handleUpdate);
        }
      });
    };
    registration.addEventListener('updatefound', handleUpdate);
  });
}

// 使用示例
ensureServiceWorkerReady().then(reg => {
  console.log('Service Worker 已就绪:', reg);
});

2. 直接利用controller判断已激活的Service Worker #

如果重定向后已有激活的Service Worker，navigator.serviceWorker.controller会直接指向它，可跳过ready Promise直接使用：

if (navigator.serviceWorker.controller) {
  console.log('已存在激活的Service Worker:', navigator.serviceWorker.controller);
  // 在这里执行需要Service Worker的逻辑
} else {
  // 没有激活的worker时，注册并等待就绪
  navigator.serviceWorker.register('/sw.js')
    .then(reg => reg.ready)
    .then(reg => {
      console.log('Service Worker 注册并就绪:', reg);
    });
}

3. 重定向后自动刷新页面（兜底方案） #

如果上述方法都无法解决，可以在页面加载时判断是否来自跨站重定向，触发一次页面刷新（注意添加标记避免无限刷新）：

const navigationEntry = performance.getEntriesByType('navigation')[0];
// 判断是否是跨站重定向
const isCrossSiteRedirect = navigationEntry.type === 'redirect' && 
  new URL(document.referrer).origin !== window.location.origin;

if (isCrossSiteRedirect) {
  const refreshFlag = 'redirect_refreshed';
  if (!localStorage.getItem(refreshFlag)) {
    localStorage.setItem(refreshFlag, 'true');
    window.location.reload();
  } else {
    localStorage.removeItem(refreshFlag);
  }
}

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