Github pages sets very aggressive cache headers (Cache-Control: max-age=86400
1 day, Expires
1 month ahead) on all served content.
Github页面在所有服务内容上设置非常积极的缓存标头(Cache-Control:max-age = 86400 1天,提前1个月到期)。
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.
如果您更新页面并推送到github,那么重新访问已经拥有缓存副本的页面的人将无法获得新页面而无需实际清理其浏览器缓存。
How can a script running in a page determine that it is stale and force an update?
如何在页面中运行的脚本确定它是陈旧的并强制更新?
The steps might be:
步骤可能是:
- determine you are running on github pages: easy, parse
window.location
forgithub.com/
- 确定你在github页面上运行:easy,parse window.location for github.com/
- 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? - 确定当前版本的页面:硬,git不允许你将sha1嵌入到提交的页面中;没有RCS $ id $。那么你怎么知道你的版本是什么?
- 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?
- 获取github中的当前版本;很难,github摆脱了未经身份验证的v2 API。推送到github和github之间也有时间断开连接。那么你怎么知道你可以得到什么版本?
- 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... - 确定你是陈旧的,如何使页面无效并强制重新加载?硬,window.location.reload(true)在Safari / Chrome中不起作用,例如......
So its solve-these-steps; of course there may be another way?
所以它解决了这些步骤;当然可能有另一种方式?
1 个解决方案
#1
36
To have a better control of the caching of your website you can use the HTML5 cache manifest. See:
为了更好地控制网站的缓存,您可以使用HTML5缓存清单。看到:
- A Beginner's Guide to Using the Application Cache on HTML5 Rocks
- 在HTML5 Rocks上使用应用程序缓存的初学者指南
- Using the application cache on Mozilla Developer Network
- 在Mozilla Developer Network上使用应用程序缓存
- Cache manifest in HTML5 on Wikipedia
- 在Wikipedia上的HTML5中缓存清单
- Offline Web Applications W3C Working Group Note
- 离线Web应用程序W3C工作组注意
- Offline Web applications at WHATWG
- WHATWG的离线Web应用程序
You can use the window.applicationCache.swapCache()
to update the cached version of your website without the need for manually reloading the page.
您可以使用window.applicationCache.swapCache()更新网站的缓存版本,而无需手动重新加载页面。
This is a code example from HTML5 Rocks explaining how to update users to the newest version of your site:
这是来自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);
To avoid some confusion I'll add that GitHub sets the correct HTTP headers for cache.manifest files:
为了避免一些混淆,我将添加GitHub为cache.manifest文件设置正确的HTTP头:
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.
所以你的浏览器知道它是一个缓存清单,应该总是检查新版本。
#1
36
To have a better control of the caching of your website you can use the HTML5 cache manifest. See:
为了更好地控制网站的缓存,您可以使用HTML5缓存清单。看到:
- A Beginner's Guide to Using the Application Cache on HTML5 Rocks
- 在HTML5 Rocks上使用应用程序缓存的初学者指南
- Using the application cache on Mozilla Developer Network
- 在Mozilla Developer Network上使用应用程序缓存
- Cache manifest in HTML5 on Wikipedia
- 在Wikipedia上的HTML5中缓存清单
- Offline Web Applications W3C Working Group Note
- 离线Web应用程序W3C工作组注意
- Offline Web applications at WHATWG
- WHATWG的离线Web应用程序
You can use the window.applicationCache.swapCache()
to update the cached version of your website without the need for manually reloading the page.
您可以使用window.applicationCache.swapCache()更新网站的缓存版本,而无需手动重新加载页面。
This is a code example from HTML5 Rocks explaining how to update users to the newest version of your site:
这是来自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);
To avoid some confusion I'll add that GitHub sets the correct HTTP headers for cache.manifest files:
为了避免一些混淆,我将添加GitHub为cache.manifest文件设置正确的HTTP头:
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.
所以你的浏览器知道它是一个缓存清单,应该总是检查新版本。