如何让运行中的PWA更新index.html并推送更新通知？

核心逻辑：利用Service Worker的更新机制 #

Service Worker默认仅在注册阶段检测更新，且旧SW会一直控制页面直到所有相关页面关闭，新SW才会激活。要同步index.html的更新，关键在于主动触发SW检查更新、通知用户，以及让新SW能立即接管页面。

具体实现步骤 #

1. 主动检测Service Worker更新 #

在主页面的JS中，页面加载时或定期触发SW注册检查，浏览器会自动对比新旧SW的哈希值，有变化则触发更新流程：

// 页面加载时启动检查
window.addEventListener('load', () => {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        // 监听新SW安装事件
        registration.addEventListener('updatefound', () => {
          const newWorker = registration.installing;
          newWorker.addEventListener('statechange', () => {
            // 新SW安装完成且当前有旧SW在控制页面时，提示用户
            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
              showUpdatePrompt();
            }
          });
        });
      });
  }
});

// 可选：添加手动检查更新的按钮逻辑
document.getElementById('check-update-btn')?.addEventListener('click', () => {
  navigator.serviceWorker.getRegistration().then(reg => reg?.update());
});

2. 提示用户并触发更新 #

当检测到新版本后，给用户弹出提示框，用户确认后激活新SW并刷新页面：

function showUpdatePrompt() {
  const prompt = document.createElement('div');
  prompt.style.cssText = `
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    padding: 12px 24px; background: #2d3748; color: white; border-radius: 6px;
    z-index: 9999; display: flex; gap: 12px;
  `;
  prompt.innerHTML = `
    发现新版本 <button id="update-btn" style="padding: 6px 12px; border: none; border-radius: 4px;">立即更新</button>
  `;
  document.body.appendChild(prompt);

  document.getElementById('update-btn').addEventListener('click', () => {
    navigator.serviceWorker.getRegistration().then(reg => {
      if (reg?.waiting) {
        // 给等待中的新SW发消息，让它跳过等待直接激活
        reg.waiting.postMessage({ type: 'SKIP_WAITING' });
        window.location.reload();
      }
    });
    prompt.remove();
  });
}

3. 在Service Worker中处理激活逻辑 #

在sw.js里监听消息事件，收到指令后跳过等待阶段，并接管所有打开的页面：

// 接收页面发来的激活指令
self.addEventListener('message', (event) => {
  if (event.data?.type === 'SKIP_WAITING') {
    self.skipWaiting();
  }
});

// 激活后立即控制所有已打开的页面
self.addEventListener('activate', (event) => {
  event.waitUntil(clients.claim());
});

4. 确保index.html的缓存更新 #

调整SW的缓存策略，优先从网络获取index.html，失败再用缓存，同时更新缓存副本：

// sw.js的fetch事件处理
self.addEventListener('fetch', (event) => {
  const request = event.request;
  // 针对index.html的特殊缓存策略
  if (request.url.includes('index.html')) {
    event.respondWith(
      fetch(request)
        .then(response => {
          // 将新的index.html存入缓存
          caches.open('app-cache-v1').then(cache => {
            cache.put(request, response.clone());
          });
          return response;
        })
        .catch(() => caches.match(request)) // 网络失败时用缓存
    );
  } else {
    // 其他资源采用缓存优先策略
    event.respondWith(
      caches.match(request).then(cachedRes => cachedRes || fetch(request))
    );
  }
});

关键注意事项 #

• 修改index.html后，必须确保SW文件本身有变化（哪怕是添加一行注释），因为浏览器通过SW文件的哈希值判断是否需要更新。
• 不要强制静默刷新页面，优先让用户选择更新时机，避免打断用户操作。
• 若index.html内容完全硬编码，要避免SW一直返回旧缓存，必须配合网络请求更新缓存副本。

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