如何强制Service Worker在页面加载时更新应用并即时展示新版本？

完全可以实现你想要的流程——无需用户手动刷新，就能让页面获取到服务器上的新版本内容。下面是一步步的落地方案：

1. 页面加载时主动触发Service Worker更新检查 #

浏览器默认会在页面加载时检查Service Worker是否有更新，但缓存策略可能会干扰这个检查逻辑。我们可以手动调用registration.update()来确保触发更新检查：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('/sw.js');
      // 主动发起更新检查，确保不会错过服务器上的新版本
      await registration.update();
      console.log('已完成Service Worker更新检查');
    } catch (error) {
      console.error('Service Worker注册或更新失败:', error);
    }
  });
}

2. 让新Service Worker跳过等待直接激活 #

默认情况下，新的Service Worker需要等所有旧SW控制的页面关闭后才能激活。我们可以在SW的install事件里调用skipWaiting()，让它直接进入激活状态：

// sw.js
self.addEventListener('install', (event) => {
  // 跳过等待阶段，立即激活新的Service Worker
  self.skipWaiting();

  event.waitUntil(
    // 缓存新版本的所有应用资源
    caches.open('app-v2').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/assets/styles.css',
        '/assets/app.js'
        // 列出所有需要缓存的资源，确保覆盖新版本内容
      ]);
    })
  );
});

3. 激活后立即接管所有页面并清理旧缓存 #

在SW的activate事件里，我们需要完成两个关键操作：一是调用clients.claim()让新SW立即控制所有已打开的页面；二是清理旧版本的缓存，避免新旧资源冲突：

// sw.js
self.addEventListener('activate', (event) => {
  event.waitUntil(
    Promise.all([
      // 立即接管所有当前打开的页面，无需用户刷新
      self.clients.claim(),
      // 删除旧版本缓存，释放空间并避免资源混淆
      caches.keys().then((cacheNames) => {
        return Promise.all(
          cacheNames.filter(name => name !== 'app-v2').map(oldCache => caches.delete(oldCache))
        );
      })
    ])
  );
});

4. 页面监听SW状态变化，即时获取新内容 #

当新SW接管页面后，我们可以通过两种方式让页面无缝更新内容：

方式一：监听控制器变化事件 #

// 页面脚本
navigator.serviceWorker.addEventListener('controllerchange', () => {
  // 控制器切换说明新SW已生效，此时请求最新内容
  refreshPageContent();
});

async function refreshPageContent() {
  try {
    // 请求服务器最新内容
    const response = await fetch('/latest-content');
    const newData = await response.json();
    // 更新页面DOM，替换为新版本内容
    document.querySelector('.app-content').innerHTML = newData.content;
  } catch (err) {
    console.error('更新内容失败:', err);
  }
}

方式二：让SW主动发送更新通知 #

在SW的activate事件里添加消息发送逻辑：

// sw.js
self.addEventListener('activate', (event) => {
  event.waitUntil(
    Promise.all([
      self.clients.claim(),
      // 给所有受控页面发送更新通知
      self.clients.matchAll({ includeUncontrolled: true }).then(clients => {
        clients.forEach(client => {
          client.postMessage({ type: 'NEW_VERSION_ACTIVATED' });
        });
      }),
      // 清理旧缓存...
    ])
  );
});

然后页面监听消息并触发更新：

// 页面脚本
navigator.serviceWorker.addEventListener('message', (event) => {
  if (event.data.type === 'NEW_VERSION_ACTIVATED') {
    refreshPageContent();
  }
});

完整流程验证 #

1. 服务器部署新版本应用（包括更新后的SW脚本和所有资源）
2. 用户访问页面，页面主动触发SW更新检查
3. 浏览器发现新SW，完成安装后跳过等待直接激活
4. 新SW激活后立即接管页面，同时清理旧版本缓存
5. 页面通过控制器变化或SW消息触发内容更新，用户无需刷新就能看到新版本

你提到的“需要用户确认刷新”是SW的默认行为，但通过skipWaiting()和clients.claim()完全可以绕过这个步骤，实现无缝的版本更新。

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