调用Service Worker的skipWaiting时如何强制所有客户端页面重新加载

解决方法 #

skipWaiting + clients.claim 仅完成新Service Worker的激活接管，已打开的客户端页面已加载的资源仍驻留在内存中，不会自动从新SW的缓存拉取资源，需要主动通知所有客户端页面刷新才能生效。

步骤1：修改Service Worker激活逻辑，激活后向所有客户端发更新通知 #

在原有activate事件的clients.claim()执行完成后，遍历所有已连接的客户端发送更新消息：

self.addEventListener('activate', event => {
  event.waitUntil(
    clients.claim().then(() => {
      // 获取所有打开的客户端页面
      return clients.matchAll({
        type: 'window',
        includeUncontrolled: true
      })
    }).then(clientsList => {
      // 向每个客户端发送更新通知
      clientsList.forEach(client => {
        client.postMessage({
          type: 'SW_UPDATED',
          version: version // 替换为你自己的版本变量
        })
      })
    })
  )
})

步骤2：客户端页面监听更新消息，执行刷新操作 #

在页面的JS逻辑中添加Service Worker消息监听，收到更新通知后触发页面刷新，可根据业务需求选择自动刷新或提示用户手动刷新：

方案A：自动刷新（注意避免表单等场景的用户数据丢失）

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.addEventListener('message', event => {
    if (event.data.type === 'SW_UPDATED') {
      // 加标记避免无限刷新
      if (!sessionStorage.getItem('sw_reloading')) {
        sessionStorage.setItem('sw_reloading', '1')
        // 可传入true强制跳过浏览器HTTP缓存，直接走新SW的缓存逻辑
        location.reload()
      } else {
        sessionStorage.removeItem('sw_reloading')
      }
    }
  })
}

方案B：提示用户手动刷新（体验更友好）

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.addEventListener('message', event => {
    if (event.data.type === 'SW_UPDATED') {
      // 自行实现提示UI，比如顶部悬浮条
      const updateTip = document.createElement('div')
      updateTip.style.cssText = 'position:fixed;top:0;left:0;right:0;background:#1677ff;color:white;padding:8px;text-align:center;z-index:9999'
      updateTip.innerHTML = '应用已更新，<button id="sw-refresh-btn" style="margin-left:8px;padding:2px 8px;border:none;border-radius:4px;cursor:pointer">点击刷新</button>'
      document.body.appendChild(updateTip)
      document.getElementById('sw-refresh-btn').addEventListener('click', () => {
        location.reload()
      })
    }
  })
}

注意事项 #

• 如果你的新SW缓存逻辑中包含旧缓存清理步骤，建议将清理逻辑放在activate事件中clients.claim()之前执行，避免新SW激活后还能读到旧缓存资源。
• 自动刷新方案适合无强用户交互的页面，有表单输入、编辑类的页面建议使用手动刷新方案避免用户数据丢失。

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