PWA清单修改未生效：更新无法应用问题求助

这问题我之前折腾过好一阵，太懂这种明明改了配置却死活不生效的憋屈了！核心原因其实是移动端PWA的启动屏资源会被系统强缓存，哪怕浏览器已经拉取了新的manifest，系统也不一定会更新本地存储的启动屏配置。下面给你几个实用的解决思路：

• 检查Manifest的缓存策略
  先确认服务器给manifest.json返回的响应头有没有设置过强缓存。打开Chrome DevTools的Network面板，刷新页面后查看manifest的请求：如果Cache-Control是max-age很大的数值或者immutable，那浏览器可能一直用的旧缓存。建议把Cache-Control改成no-cache或者max-age=0，强制浏览器每次都校验最新的manifest。

• 利用Service Worker触发更新
  如果你的PWA用了Service Worker，可以主动触发SW更新来连带刷新启动屏缓存。在页面里加一段简单的代码：

  navigator.serviceWorker.register('/sw.js').then(registration => {
    // 主动检查SW更新
    registration.update();
  });
  

  当SW更新激活后，会触发页面刷新，这时候系统通常会重新读取manifest的新配置。

• 手动清除移动端站点数据
  重启手机没用的话，试试直接清除对应站点的缓存：打开手机Chrome的「设置」→「隐私和安全」→「网站设置」→找到你的PWA站点→点击「清除缓存和存储数据」。之后重新打开PWA再添加到主屏幕，新的启动屏颜色应该就生效了。

• 给Manifest加版本标识
  在manifest.json里加一个自定义的version字段，比如：

  {
    "name": "My PWA",
    "version": "1.0.1", // 每次修改就更新这个版本号
    "background_color": "#new-color",
    // 其他配置...
  }
  

  部分浏览器会识别这个版本变化，触发启动屏资源的重新生成和缓存。

• 验证Manifest配置的正确性
  先在Chrome DevTools的「Application」→「Manifest」面板里检查预览：如果面板里的「Background color」和「Splash screen」已经显示新的颜色，那肯定是缓存问题；如果预览还是旧的，那得检查manifest的语法有没有错误，比如颜色值格式不对，或者和页面的theme-color meta标签冲突了。

总之，移动端PWA的启动屏缓存确实比较顽固，系统为了启动速度会优先用本地存储的资源，所以得从缓存策略、SW更新或者手动清缓存这几个方向入手，不用每次都卸载重装~

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