在 github 页面上确定页面已过时

Question

Github 页面在所有提供的内容上设置了非常激进的缓存标头（ Cache-Control: max-age=86400 1 天，提前 1 个月Expires ）。

如果您更新页面并推送到 github，那么重新访问已经获得缓存副本的页面的人将不会在没有实际清理浏览器缓存的情况下获得新页面。

在页面中运行的脚本如何确定它已过时并强制更新？

步骤可能是：

1. 确定你在 github 页面上运行： easy , parse window.location for github.com/
2. 确定页面的当前版本： hard ，git 不允许您将 sha1嵌入到提交的页面中； 没有 RCS $id$ 。 那么你怎么知道你是什么版本呢？
3. 在 github 中获取当前版本； hard ， github 摆脱了未经身份验证的 v2 API。 推送到 github 和 github 也开始发布之间存在时间上的脱节。 那么你怎么知道你能得到什么版本呢？
4. 确定您已过时，如何使页面无效并强制重新加载？ hard ， window.location.reload(true)在 Safari/Chrome 中不起作用，例如...

所以它的解决这些步骤； 当然可能有另一种方式？

Answer 1

为了更好地控制您网站的缓存，您可以使用 HTML5 缓存清单。 看：

• 在 HTML5 Rocks 上使用应用程序缓存的初学者指南
• 在 Mozilla Developer Network 上使用应用程序缓存
• 在 Wikipedia 上以 HTML5 缓存清单
• 离线 Web 应用程序W3C 工作组说明
• WHATWG 的离线 Web 应用程序

您可以使用window.applicationCache.swapCache()来更新网站的缓存版本，而无需手动重新加载页面。

这是来自HTML5 Rocks的代码示例，解释了如何将用户更新到您网站的最新版本：

// Check if a new cache is available on page load.
window.addEventListener('load', function(e) {

  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
      // Browser downloaded a new app cache.
      // Swap it in and reload the page to get the new hotness.
      window.applicationCache.swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

}, false);

为避免混淆，我将添加 GitHub 为 cache.manifest 文件设置正确的 HTTP 标头：

Content-Type: text/cache-manifest
Cache-Control: max-age=0
Expires: [CURRENT TIME]

所以你的浏览器知道它是一个缓存清单，并且应该总是检查它是否有新版本。

Answer 2

正如 Tyler Rick 在对最佳答案的评论中指出的那样，应用程序缓存 API 已被弃用。

从好的方面来说，如果你在测试一个新的 Github 页面站点时来到这里，缓存过期现在是更合理的 600 或 10 分钟 - 所以只需在本地测试你的更改，然后在 github 上测试时耐心一点 - 不需要深入研究应用程序缓存，或者实际上，做任何额外的工作。