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

时间:2019-05-11 15:28:28

标签: firebase firebase-hosting

网站通过Firebase托管进行托管。

但是问题是,每当我们访问该网站时,假设www.website.com我们至少需要刷新两次以加载该网站。

2 个答案:

答案 0 :(得分:5)

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

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

答案 1 :(得分:1)

服务人员

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

在特定的浏览器上(在本地)禁用

如果您只想将其关闭以在Chrome中进行开发,则在加载网站后,您可以进入dev tools>Application>Service Workers。到达该网站后,该网站的服务工作人员会有多个复选框。您可以检查Update on reloadBypass 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 site上了解有关服务工作者的更多信息。 这是github问题的link,CRA的作者在其中解释了如何禁用服务工作者。