至少需要刷新2次才能加载页面

Question

网站托管在Firebase上。但是问题是，每当我们访问该网站时，www.website.com都需要至少刷新两次以加载该网站。更新：不知道可能是什么问题使用Firebase Hosting托管我们的网站，我们有一个自定义URL，该URL会被重新路由到该URL。（*1）npm run build 创建生产版本通过部署 firebase deploy问题：用户尝试在第一次尝试中打开页面，但没有加载任何内容，但会看到以下错误：Uncaught SyntaxError: Unexpected token <               firebase-app.js:1在第二次尝试页面正确加载。正如Frank在评论中列出的那样，这不是Firebase的问题，那么它来自React（Create-React-App）吗？参考：*1 -尝试了两种路由，自定义路由和Firebase托管提供的路由，并且两者都出现了问题。

Answer 1

可能您的问题是某些资源已缓存。如果您重新加载一次，浏览器将仅重新加载主URL。如果重新加载两次，其他资源将被刷新。因此，这可能是一些奇怪的行为。

有一些技巧，例如，如果您可以更改js文件的网址，请将其从http：//yoursite/folder/file.js更改为http：//yoursite/folder/file.js？_ = TIMESTAMP，其中TIMESTAMP是一个时间戳，例如从js上的new Date（）。getTime（）或php上的time（）获得的（每种语言都有获取时间戳的方法）。该_参数将使缓存无效。如果可行，则可以使用更优雅的方法告诉浏览器根据您的需要处理缓存。

Answer 2

服务人员

如果使用create-react-app，则问题在于可能有一个服务人员可能会缓存页面以供脱机使用。在CRA v2.0（与之前的版本不同react-scripts）之前，默认情况下启用了Service Worker 。重新加载可能需要几次重新加载才能获得新内容，因为两次重新加载之间一直存在于浏览器中的服务工作者实际上是在为您的托管服务寻找新内容。默认情况下，它总是从缓存中立即加载，直到有机会访问服务器以检查新内容。默认情况下，使用进入过时的网页几秒钟后，浏览器的控制台将输出New content available! Please reload.。下次刷新会将新内容拉到浏览器的缓存中。

在特定的浏览器上禁用（本地）

如果您只想将其关闭以在Chrome中进行开发，则在加载网站后，您可以进入dev tools>Application>Service Workers。到达该网站后，该网站的服务工作人员会有多个复选框。您可以检查Update on reload和Bypass for network。

全局禁用

但是，如果要永久禁用服务工作者，则必须先从所有现有的注册用户中注销他们。如果仅删除名为的文件service-worker.js，它将不会为已经访问过您网站的用户取消注册该文件，这是有问题的。为了从已经访问过您网站的客户端中删除服务工作者，您必须取消注册。在index.js文件src夹根目录下的文件中，您需要对此进行更改

import registerServiceWorker from './registerServiceWorker';
registerServiceWorker();

至

import { unregister } from './registerServiceWorker';
unregister();

您正在执行的操作是阻止它进一步注册服务工作者（通过删除该registerServiceWorker函数），并阻止其通过调用该unregister函数注销任何现有服务工作者。服务工作者可能在任何数量的浏览器上，所以最好取消注册，而不是仅删除该registerServiceWorker功能。

您可以在create-react-app docs网站上阅读有关服务工作者的更多信息。这是github问题的链接，CRA的作者在其中解释了如何禁用服务工作者。