Firebase 托管 - 强制浏览器在新部署时重置缓存？

Posted 2023-02-23

【中文标题】Firebase 托管 - 强制浏览器在新部署时重置缓存？

【英文标题】：Firebase hosting - force browser to reset cache on new deploys?

【发布时间】：2018-03-21 21:28:39

【问题描述】：

我有一个使用 create-react-app 构建并托管在 Firebase 托管上的网站。我可以做些什么来指定浏览器缓存需要在新部署后更新，理想情况下仅适用于自上次部署以来已更改的页面、资产和样式表？

有没有办法访问部署 ID 并将其（或任何其他唯一标识符）包含在标头中，以便浏览器可以比较它在本地存储或缓存中的内容并确定是否需要硬刷新？我查看了 Firebase Deploying 和 Full config 文档，但没有提及如何访问托管元数据，例如上次部署时间。

将Cache-Control 值设置为max-age=[any number] 似乎并不理想，因为它忽略了下一次部署的发生时间（除非有固定的时间表，否则可能不知道从什么时候开始）。

【参考方案1】：

我想通了。不得不根据this Github comment更新firebase.json文件：

  "hosting": 
    "headers": [
       "source":"/service-worker.js", "headers": ["key": "Cache-Control", "value": "no-cache"] 
    ]
  

【讨论】：

Firebase 文档在这里：firebase.google.com/docs/hosting/full-config#headers

这里的缓存控制文档：developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

这是仅在您部署新版本时清除缓存还是在每次用户访问该站点时清除？

我相信它只会清除新部署的缓存，但已经有一段时间了，所以我很容易出错。可能最好检查发布的 Firebase 文档链接 @btd，因为它们会更新

单独的问题但相同的主题，如果您重新部署但一定百分比的用户从未刷新页面，因此仍然加载了陈旧的 .js 文件怎么办？在进行影响进入 firestore 的数据的部署时，我特别担心这一点（例如，以前的 .js 文件用 4 个字段更新 firestore doc，然后用填充 5 个字段的新内容更新......）

【参考方案2】：

请在您的 firebase.json 中设置“max-age=0”。

    "headers": [
        
            "source": "/service-worker.js",
            "headers": [
                
                    "key": "Cache-Control",
                    "value": "no-cache, no-store, must-revalidate"
                
            ]
        ,
        
            "source": "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
            "headers": [
                
                    "key": "Cache-Control",
                     "value": "max-age=0"
                
            ]
        
    ]

【讨论】：

解释原因并为答案提供更多细节会很有用。