Question

我正在尝试更新已部署到firebase的react.js网站。不使用隐身窗口或使用“开发工具”>“应用程序”>“清除存储”>“清除站点数据”，将无法访问更新的内容。

我敢肯定，这是与Firebase托管比与React更紧密相关的问题，但是React的service-worker.js文件和Firebase之间似乎存在潜在的干扰。因此，我将React标记为完整。

反应版本：16.8.6 Firebase CLI版本：7.1.0

我的步骤是：

更改代码
$ npm运行构建
$ firebase服务-仅托管|| Firebase部署-仅托管
访问.web.app或localhost：5000

期望：我将看到具有新更改的网站现实：我看到的是旧站点，没有新变化

研究和尝试的解决方案：

设置缓存控制标头

我尝试将firebase.json文件中service-worker.js的Cache-Control标头设置为“ no-cache”。 {“ source”：“ /service-worker.js”，“ headers”：[{“ key”：“ Cache-Control”，“ value”：“ no-cache”}]}}，

在此处的创建React App部署文档中明确提到了这一点： https://facebook.github.io/create-react-app/docs/deployment

在众多堆栈溢出问题中，例如此处的一个： Firebase hosting - force browser to reset cache on new deploys?

不幸的是，即使我的firebase.json文件如下所示，问题仍然存在。这使我相信可能会有一个新的，更新的问题。

与服务人员配合：我还围绕服务人员本身进行了研究。目前已将其设置为“取消注册”，但我已将其设置为“注册”并已部署多次，没有明显变化。

根据上面＃1的建议，我不确定是否必须将其设置为“注册”。

****firebase.json****

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
    ]
  }
}

****/src/index.js****

.....
const store = configureStore();
....

serviceWorker.unregister();


****directory structure****

/
firebase.json
firebase.src
build/
      /static
      service-worker.js
      index.html
      ....
....

Answer 1

最后，Reactjs和Firebase Hosting都不是问题的根源。如果有人遇到类似情况并且怀疑上面的配置（正确的配置）并使用它，我只是在发布此信息。

Redux-Persist的Persist Gate未能按预期工作，导致该应用在每次重新部署时均出现微小崩溃。崩溃发生在可以更新版本号之类的东西之前，使站点看起来好像没有收到更新。

清除缓存将解决Redux-Persist问题，因为它清除了本地存储中的数据，但这使我认为这不是浏览器缓存问题。

如果您正在使用Redux-Persist＆Persist Gate并看到一个非常类似的问题，请仔细看一下Persist Gate是否允许组件在补液前进行渲染。我通过将Redux中的_persist对象用作标志来解决了该问题

Answer 2

如果有人遇到问题。我通过删除根文件夹中的 .firebase 文件夹并将其添加到我的 .gitignore 来解决它。它会缓存之前构建的版本，以加快部署速度。

我在多站点配置方面遇到了一些问题。

Firebase部署-除非清除了网站数据，否则只有托管不会更新React.js Webapp内容

2 个答案: