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

Question

网站托管在 Firebase 上。

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

---

更新：

不确定可能是什么问题

1. 使用 Firebase 托管来托管我们的网站，我们有一个自定义 URL，它被重新路由到该 URL。 (*1)

2. npm run build 创建生产版本

3. 通过firebase deploy部署

---

问题：

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

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

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

正如 Frank 在 cmets 中列出的，这不是 Firebase 的问题，那么它是来自 React（Create-React-App）的问题吗？

---

参考资料：

*1 - 两种路由都试过了，自定义路由和 Firebase 托管提供的路由，都出现了问题。

Answer 1

服务工作者

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

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

如果您只是想在 Chrome 中关闭它以进行开发，一旦您加载了您的网站，您可以进入dev tools>Application>Service Workers。到达那里后，该网站的服务人员有几个复选框。您可以查看Update on reload 和Bypass for network。

全局禁用

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

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

到

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

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

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

Answer 2

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

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