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

问题描述

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

Github pages sets very aggressive cache headers (Cache-Control: max-age=86400 1 day, Expires 1 month ahead) on all served content.

如果你更新你的页面并推送到 github，如果没有真正清理他们的浏览器缓存，重新访问已经获得缓存副本的页面的人将无法获得新页面.

If you update your pages and push to github, people revisiting the pages who have already got cached copies will not get the new pages without actually cleaning their browser cache.

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

How can a script running in a page determine that it is stale and force an update?

步骤可能是:

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

1. determine you are running on github pages: easy, parse window.location for github.com/
2. determine current version of page: hard, git doesn't let you embed the sha1 in a commited page; no RCS $id$. So how do you know what version you are?
3. get the current version in github; hard, github got rid of non-authenticated v2 API. And there's a time disconnect between pushing to github and github getting around to publishing too. So how do you know what version you could get?
4. having determined you're stale, how do invalidate a page and force reload? hard, window.location.reload(true) doesn't work in Safari/Chrome, for example...

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

So its solve-these-steps; of course there may be another way?

推荐答案

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

To have a better control of the caching of your website you can use the HTML5 cache manifest. See:

• 在 HTML5 Rocks 上使用应用程序缓存的初学者指南
• 使用 Mozilla 开发者网络上的应用缓存
维基百科上的
• HTML5 中的缓存清单
• 离线 Web 应用程序 W3C 工作组说明
WHATWG 的
• 离线网络应用程序

• A Beginner's Guide to Using the Application Cache on HTML5 Rocks
• Using the application cache on Mozilla Developer Network
• Cache manifest in HTML5 on Wikipedia
• Offline Web Applications W3C Working Group Note
• Offline Web applications at WHATWG

您可以使用窗口.applicationCache.swapCache() 无需手动重新加载页面即可更新网站的缓存版本.

You can use the window.applicationCache.swapCache() to update the cached version of your website without the need for manually reloading the page.

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

This is a code example from HTML5 Rocks explaining how to update users to the newest version of your site:

// 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 标头:

To avoid some confusion I'll add that GitHub sets the correct HTTP headers for cache.manifest files:

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

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

so your browser knows that it's a cache manifest and that it should always be checked for new versions.

这篇关于在 github 页面上确定页面已过时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！