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

【问题标题】：Why some browsers won't update https page after I deploy changes?为什么有些浏览器在我部署更改后不会更新 https 页面？
【发布时间】：2016-08-20 19:37:13
【问题描述】：

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

我已将我的测试站点部署到 Firebase（默认为 https）
网站是 HTML5
这不是这个特定站点的问题（尝试了不同的站点 1.simple 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）并再次部署站点时，在以下情况下我不会看到更改：

火狐：

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

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

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

如果我只是按 f5。

CHROME 和 Opera

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

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

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

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

EDGE 浏览器

完美运行（这怎么可能？？）以防万一：

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

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

我该如何解决这个问题？如何让 Chrome、Firefox、Opera 查找更改并在需要时对其进行更新（或者只是忽略缓存并在没有任何缓存的情况下每次都加载它）？

我是否需要在 firebase.json 中添加一些属性来查找页面上的更改并将更新的页面发送给访问者？请帮忙，我花了大约 16 个小时进行研究，但找不到解决方案

【问题讨论】：

标签： html firebase frontend browser-cache firebase-hosting

【解决方案1】：

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

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

类似：

location.reload(true);

【讨论】：

谢谢亨利，我试过了，它工作了（如果你在执行后立即删除脚本），但不幸的是，这不是最佳方式，因为谁愿意等待观看页面加载每次两次:)，但是那个方法给了我一些有用的信息，我以前不知道这个重新加载功能，所以，还是谢谢你

【解决方案2】：

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

同时使用这两者将使用 Firebase 数据填充客户端数据并在云端发生变化时自动更新。

这是.on()的文档：

【讨论】：

感谢您提供的信息，但我已经看过该文档，但我不明白如何使用它，因为我是 Web 开发新手。总之问题解决了。

【解决方案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，为了手动控制缓存时间，但它没有做任何事情

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

【讨论】：