部署到Firebase Hosting的Vue应用生产环境部分设备未更新如何解决

1. 优先配置Firebase Hosting缓存规则（核心） #

这是解决缓存问题的根本手段，修改你项目根目录的firebase.json文件，在hosts节点下新增headers配置，区分入口文件和静态资源的缓存策略：

{
  "hosting": {
    "public": "dist",
    "headers": [
      {
        "source": "**/*.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate, max-age=0"
          }
        ]
      },
      {
        "source": "**/*.@(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000, immutable"
          }
        ]
      }
    ]
  }
}

配置说明：

• 所有html文件（核心是入口index.html）完全不缓存，每次用户访问都会请求服务端拉取最新版本，html里引用的静态资源自带哈希后缀，只要html是最新的，加载的资源自然是对应版本的
• 带哈希的静态资源设置一年强缓存，因为只要文件内容变化哈希就会变化，不会出现缓存旧版本的问题，同时能提升加载速度

2. 主动清理残留Service Worker #

虽然你删掉了PWA相关代码，但之前访问过的用户浏览器里已经注册的Service Worker依然会控制页面请求，需要在当前版本的入口JS（通常是src/main.js）最顶部添加注销逻辑：

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.getRegistrations()
    .then(registrations => {
      registrations.forEach(reg => reg.unregister())
    })
}

这段代码会在用户打开页面时自动注销所有已注册的Service Worker，清除之前PWA配置带来的缓存影响。

3. 针对Safari的补充适配 #

Safari（尤其是移动端版本）的缓存策略比其他浏览器更激进，可以在public/index.html的<head>标签里补充缓存控制meta标签，进一步降低缓存概率：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

针对已经缓存了旧版本的移动端Safari用户，还可以引导用户在「设置-Safari-高级-网站数据」里找到你的域名，删除对应数据即可拉取最新版本。

4. 部署后验证 #

部署完成后可以通过命令行工具查看响应头是否生效，执行：
curl -I 你的网站域名
检查返回的Cache-Control字段是否和你配置的一致，确认规则生效。

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