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

Question

网站托管在Firebase上。

但问题是，每当我们访问网站时，让我们说www.website.com我们需要刷新它至少两次才能加载网站。

---

更新：

不确定可能是什么问题

1. 使用Firebase Hosting托管我们的网站，我们有一个自定义URL，用于重新路由到该网站。 （ *1 ）

2. npm run build来创建生产版本

3. 通过firebase deploy

---

问题：

用户尝试在第一次尝试打开页面时尝试加载任何内容，但可以看到以下错误：

Uncaught SyntaxError: Unexpected token < firebase-app.js:1

在第二次尝试页面加载正确。

正如弗兰克在评论中列出的那样，Firebase不是问题，那么它是来自React（Create-React-App）的东西吗？

---

参考文献：

*1 - 尝试过Firebase托管提供的两条路线，自定义路线和路线，两者都有问题。

Answer 1

可能你的问题是某些资源被缓存了。 如果您重新加载一次浏览器将只重新加载主URL。 如果重新加载两次，其他资源将被刷新。 所以它可能是由此产生的一些奇怪的行为。

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

Answer 2

服务人员

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

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

如果您只想将其关闭以便在Chrome中进行开发，那么在加载网站后，您可以进入dev tools>Application>Service Workers 。 一旦你在那里，该网站的服务工作者有几个复选框。 您可以检查Update on reload和Bypass for network 。

全局禁用

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

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

至

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

您正在做的是阻止它进一步注册服务工作者（通过删除registerServiceWorker函数）并通过调用unregister函数取消注册任何现有的服务工作者。 服务工作者可能在任意数量的浏览器上，因此最好取消注册，而不是仅删除registerServiceWorker函数。

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