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

Question

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

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

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

步骤可能是：

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

所以它的解决这些步骤；当然可能还有其他方法？

Answer 1

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

• A Beginner's Guide to Using the Application Cache 在 HTML5 Rocks 上
• Using the application cache Mozilla 开发者网络
• 维基百科上的Cache manifest in HTML5
• Offline Web ApplicationsW3C 工作组说明
• Offline Web applications WHATWG

您可以使用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]

因此您的浏览器知道它是一个缓存清单，并且应该始终检查它是否有新版本。