启用 Application Cache

上篇更改域名解析之后,本站裸域名改成 A 记录到 IP,也就是不能享受 CDN 加速了。由于现在站点目录下全是静态页,HTML5 的脱机数据功能说不定会带来更好的用户体验,于是尝试启用了,记录一下折腾过程。

启用 HTML5 Application Cache 的步骤全摘自网络,自己只是当了一次小白,具体的原理不明。具体步骤分 3 步:

  1. 创建一个 cache.appcache 文件,并确保文件具有正确的内容;
  2. 在服务器上设置内容类型;
  3. 所有的 HTML 文件都指向 cache.appcache。

创建 appcache 文件

新建 cache.appcache 文件,写入类似以下类容:

CACHE MANIFEST
#v1
CACHE:
index.html
404.html
favicon.ico
robots.txt
humans.txt
apple-touch-icon.png
css/normalize.min.css
css/main.css
css/bootmetro-icons.min.css
img/pho-cat.jpg
img/pho-huangshan.jpg

NETWORK:
*

注:首行须确保为 CACHE MANIFEST。# 表示注释,有文章或 css、js、img 等内容变化时需要更新 cache.appcache 以使来访浏览器更新 cache.appcache 中列出的条目,所以更新注释是一个简便方法。我的 cache.appcache

设置内容类型

在 .htaccess 文件中添加以下内容(我没有 .htaccess,所以没添加)

AddType text/cache-manifest .manifest

将 HTML 页面指向清单文件 cache.appcache

在页首的 <html> 中添加 manifest="/cache.appcache"(假设该文件放置在根目录)。即:

<html manifest="/cache.appcache">

完成以上 3 个步骤,来访浏览器在下载完列表中文件后会通过直接访问本地缓存,从而使网页打开速度更快,甚至在离网的情况下仍能直接访问页面缓存。

使用 js 让来访浏览器及时刷新缓存

发布新文章时我尝试了更改 cache.appcache 的注释,但浏览器仍显示旧的信息,必须手动清除浏览器缓存。显然,这样把事情弄得更麻烦了,所以我在页面添加了如下类容以使浏览器自动强制刷新,带来的问题是强制刷新过程很明显,可能会使用户体验下降。

<script type="text/javascript">
window.addEventListener('load', function(e) {
  window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
        window.location.reload();
    } else {}
  }, false);
}, false);
</script>

先试用一段时间再说,不行就把它撤了。

参考文章

附:Cache Manifest Validator

Update

  • 2014.04.01 由于没能处理好 appcache 对于加载元素的缓存与更新之间的矛盾,放弃使用 Application Cache 转投 localstorage
文章作者
发布时间
最后修改
2014-04-01 10:25
分类
标签