iOS主屏幕添加的PWA无法自动更新问题咨询

• iOS主屏幕PWA的缓存体系和Safari浏览器完全隔离，二者的Service Worker缓存、静态资源缓存、manifest缓存分属不同沙箱，浏览器端的更新逻辑不会同步到主屏幕PWA中。
• iOS对主屏幕PWA的manifest文件默认缓存周期最长可达1年，只要manifest未被识别出内容变更，系统就不会触发PWA资源校验，哪怕站点资源已更新，主屏幕PWA仍会调用旧缓存启动。
• iOS独立PWA环境下的Service Worker更新逻辑存在限制：默认仅在PWA冷启动时才会触发更新校验，且如果Service Worker文件的字节差小于20字节，系统会判定文件无变更，直接跳过更新流程。

1. 强制manifest变更触发更新 #

• 每次发布新版本时修改manifest文件内容，可在start_url、name字段后追加版本参数，比如将"start_url": "/index.html"改为"start_url": "/index.html?v=2.1.0"，确保iOS能识别到manifest变更，主动触发资源校验。
• 配置manifest文件的HTTP响应头为Cache-Control: no-cache，禁止服务器或CDN缓存manifest文件，保证每次请求都能拉取最新版本。

2. 优化Service Worker更新逻辑 #

• 每次发版时给Service Worker文件名添加版本哈希，或在Service Worker代码内部定义全局版本变量，每次更新修改变量值，避免系统因文件差异过小跳过更新校验。
• 在PWA首页主动触发更新检查，参考代码如下：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(reg => {
      // 每1小时主动检查更新
      setInterval(() => reg.update(), 1000 * 60 * 60);
      reg.addEventListener('updatefound', () => {
        const newWorker = reg.installing;
        newWorker.addEventListener('statechange', () => {
          if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
            // 可自定义更新提示，触发后重载页面应用新版
            window.location.reload();
          }
        });
      });
    });
}

3. 静态资源缓存优化 #

• 所有静态资源（JS、CSS、图片等）文件名添加版本哈希，保证新版本发布后资源路径变更，不会读取旧缓存。
• 配置静态资源的HTTP响应头为Cache-Control: max-age=31536000, immutable，避免不必要的缓存校验，同时确保更新后可通过新路径加载资源。

4. 主屏幕PWA启动强制绕过缓存 #

• 添加启动参数判断逻辑，强制主屏幕打开的PWA加载带最新版本号的地址，绕过旧缓存：

// 判断是否为iOS主屏幕启动的PWA
if (window.navigator.standalone === true) {
  const latestVer = '2.1.0'; // 每次发版更新该版本号
  if (!window.location.search.includes(`v=${latestVer}`)) {
    window.location.replace(`${window.location.origin}${window.location.pathname}?v=${latestVer}${window.location.hash}`);
  }
}

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