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

Question

Github页面在所有服务内容上设置非常积极的缓存标头(Cache-Control: max-age=864001天,Expires提前1个月).

如果您更新页面并推送到github,那么重新访问已经拥有缓存副本的页面的人将无法获得新页面而无需实际清理其浏览器缓存.

如何在页面中运行的脚本确定它是陈旧的并强制更新？

步骤可能是:

1. 确定你在github页面上运行:easy,parse window.locationforgithub.com/
2. 确定网页的当前版本:很难,Git并不让你嵌入SHA1 在一个COMMITED页面; 没有RCS $id$.那你怎么知道你的版本是什么？
3. 获取github中的当前版本; 很难,github摆脱了未经身份验证的v2 API.推送到github和github之间也有时间脱节.那么你怎么知道你可以得到什么版本？
4. 确定你是陈旧的,如何使页面无效并强制重新加载？ 很难,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]

所以你的浏览器知道它是一个缓存清单,应该始终检查新版本.