Question

我的问题是，在我手动按f5之前，浏览器不会显示更新页面（有时）

我将测试网站部署到Firebase（默认情况下为https）
网站为HTML5
这不是这个特定网站的问题（试过不同的网站1.简单的html，css网站和2. gulp等聚合物入门套件。）

为了解决问题，我试图将此代码添加到HEAD（没有解决问题）

<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="Cache-Control" content="max-age=0">

当我更改任何内容时（假设使用随机文本添加p-tag）并再次部署该网站，我将不会看到案例中的更改如下：

FIREFOX：

以下情况不显示更新的页面：

在新标签页中输入网站名称
或点击书签标签
我点击书签栏上的第二（第3，...等）时间
或在新标签页中手动输入第二（第3，...等）时间

在以下情况下显示更新的页面：

如果我只按f5。

CHROME和Opera

以下情况不显示更新的页面：

在新标签页中输入网站名称
或点击书签栏中的网站

在以下情况下显示更新的页面：

我第二次点击书签栏
或在新标签页中第二次手动输入
如果我只按f5

EDGE浏览器

在以下情况下完美地工作（怎么可能？）

在新标签页中输入网站名称
或点击书签栏中的网站
如果我只按f5。

为什么EDGE浏览器是唯一一个更新页面内容的浏览器，http-equiv只能用于IE，EDGE还是什么？

如何解决该问题？如何让Chrome，Firefox，Opera查找更改并根据需要进行更新（或者只是忽略缓存并每次加载而不加缓存）？

我是否需要为firebase.json添加一些属性，以寻找页面上的更改并向访问者发送更新的页面？请帮助，我花了16个小时进行研究，但找不到解决方案

Answer 1

您的主机可能在服务器上有1小时的缓存延迟，这会覆盖您在HEAD中放置的任何内容。您应该使用Firebase

进行检查

或者，您可以在第一次使用Javascript加载页面后运行页面重新加载，这将获得与F5相同的效果。

类似的东西：

location.reload(true);

Answer 2

这取决于您的代码。如果是Firebase，您必须告诉它在感知到更改时更新您的DOM。我看不到你的代码，但这是我对这个问题的猜测。您可能正在使用ref.once('value',callback(snapshot){})。这行代码实际上只抽取一次数据，这有时是需要的，但在这种情况下不是。如果这是您的问题，则应使用ref.on('child_added',callback(snapshot){})和ref.on('child_changed',callback(snapshot)(){})。

同时使用这两者将填充客户端数据，Firebase数据和会在云端更改时自动更新。

以下是.on()的文档：

Answer 3

问题现在至少解决了。

如果你遇到同样的问题，正如@ Henry24建议的那样，只需等待一个小时即可完成。我试图添加此代码

{
   ...

  "rewrites": [ {
    "source": "!{/bower_components,/elements}/**",
    "destination": "/index.html"
  } ],

  "headers": [ {
    "source" : "/*.html",
    "headers" : [ {
      "key" : "Cache-Control",
      "value" : "max-age=0"
    } ]
} ]
}

到firebase.json，然后Gulp然后Firebase deploy，以便手动控制缓存时间，但它没有做任何事情

我所要做的只是等待一个小时，所有更改都会显示在页面上，因为浏览器需要一个小时才能放弃缓存。

为什么某些浏览器在部署更改后不会更新https页面？

3 个答案: