html5 Application Cache——加快简历二次访问速度-阿里云开发者社区

开发者社区> 开发与运维> 正文

html5 Application Cache——加快简历二次访问速度

简介:

上篇博客(在github上写个人简历——最简单却又不容易的内容罗列)介绍了我在github上放的一个个人在线简历,有朋友看了后告诉我一个很大缺陷,使用github挺慢的,每次看的时候都很慢,第一反应这问题我可解决不了,后来想到是否可以利用缓存,至少第二次看的时候会快一些,但缓存机制大部分依赖于浏览器,而且默认都用了,还是很慢,所以此路不通。

application cache

忽然灵光一现(原谅我愚笨,其实应该很快想到的),前段日子在看html5的东西,当时觉得application cache没有太大用处,又肤浅了,用在这个需求实在太合适了。那么是什么是application cache呢?

application cache是html5引入的本地存储方案之一,和我们平常浏览器缓存类似,application cache在本地存储页面资源,我们先不用着急看application具体怎么使用,首先看看传统浏览器缓存有哪些问题。

一:浏览器缓存是不可靠的,我们不直到当前哪些资源被缓存,也不知道会被缓存多久,因为浏览器会随时因为空间或时间原因舍弃某些缓存,加入新的缓存文件。

二:虽然有浏览器缓存,但我们不能依赖浏览器缓存完全离线访问web

application cache解决了这两个主要问题,application cache允许开发者指定页面哪些资源需要被缓存,虽然也有空间大小限制,但是可以通过程序更改,可以控制缓存生命周期,安全可靠的让web离线使用,这么神奇,看看是怎么做到的吧

manifest 文件

要向使用application cache 需要为页面的html标签添加manifest属性,属性值是manifest文件路径,可以使用同源的绝对地址,也可以使用相对地址。

<!doctype html>
<html lang="zh" manifest="main.manifest">
</html>

 

application cache是通过mannifest文件来管理的,manifest文件是简单的文本文件,内容是需要被缓存供离线使用的文件列表,及不需要被缓存或读取缓存失败的文件控制。mannifest文件可以使用任意拓展名,但需要在服务器中添加MIME类型匹配,使用apache比较简单,如果使用.manifest作为拓展名在apache配置文件中添加

AddType text/cache-manifest .appcache

 

使用IIS的话通过界面找到添加MIME窗口添加即可

如何配置

下面是一个manifest文件的示例

main.manifest

复制代码
 1 CACHE MANIFEST
 2 #version 0.2.0
 3 #date: Nov 24 2013
 4 
 5 CACHE:
 6 css/reset.css
 7 css/main.css
 8 js/jquery.js
 9 images/bg.png
10 images/bg_hl.jpg
11 images/icons/yes.png
12 images/icons/top.png
13 offline.html
14 
15 NETWORK:
16 *
17 
18 FALLBACK:
19 index.html offline.html
复制代码

 

1. 文件的第一行必须是 CACHE MANIFEST

2. #开头的行作为注释语句,所以文件中关于版本和日期都是注释,为了方便维护

3. 网站的缓存不能超过5M

4. 文件资源路径可以使用绝对路径也可以使用相对路径

5. 文件列表中任意一个缓存失败都会导致整个缓存失效,浏览器hui按没有application cache处理

6. 既可以站点使用同一个minifest文件,也可以每个页面使用一个

 

然后看一下CACHE、NETWORK、和FALLBACK三条指令语句

CACHE:指明需要缓存的资源文件,浏览器会自动缓存带有manifest属性的html页面,所以yinyongwmanifest文件的页面不用写在里面

NETWORK:不需要缓存的文件,名字就叫网络工作嘛,可以使用通配符

FALLBACK:无法访问缓存文件的备选文件,也可以使用通配符,上边例子的配置,读取不到index.html的话就会跳转至offline.html

看看效果

在在线简历中使用application cache后,访问一下

 

 可以在控制台看看application cache,果真我们希望缓存的内容都被缓存了,试试离线好不好使,由于不知道github是不是支持及其定义的manifest文件拓展名是什么,只好在自己本地试试了,在电脑上配置好,用手机访问,然后断开手机网络,刷新一下。

刷新了八下依旧好使哎,手机离线也能看,就不截图了。当清除掉application cache并且关掉网络的时候,页面果真到了offline.html

 

更新

这样不依赖与浏览器的缓存机制也有个问题,怎么更新文件告知客户端呢,总不能永远使用一份缓存啊。简单的方法我们可以更新manifest文件,修改注释的版本号或者日期就可以,这样浏览器就会重新缓存文件,值得注意的是需要minifest文件本身更改(注释都可以),而缓存文件清单中的文件本身比如offline.html更新浏览器是不会重新缓存的。

这样我们修改了服务器的manifest文件后用户多刷几遍页面就可以了,但未免低级了一些,我们可以通过application cache 提供的接口来检查更新

application cache 在window上注册了一个applicationCache对象

status属性标明当前application cache状态

0:UNCACHED(未缓存)

1:IDEL(空闲的)

2:CHECKING(正在检查)

3:DOWNLOADING(正在下载)

4:UPDATEREADY(准备更新)

5:OBSOLETE (已过时)

另外对象有几个事件,看名字就能知道时做什么的。

对象有三个重要方法

update:尝试检查下载新application cache,当然得服务器更新了manifest文件才会下载

swapCache:当status变为UPDATEREADY时就可以更新本地application cache了

abort:取消正在进行的application cache更新

即使下载完新的缓存,也不意味这页面会更新,我们需要重新加载一次页面,可以通过这样的方式来使页面第一时间更新缓存

复制代码
applicationCache.onupdateready=function(e) {
      applicationCache.swapCache();
      if (confirm('页面已更新,是否加载新内容?')) {
        window.location.reload();
      }
    };
复制代码

 

当然也可以设个轮询函数定时调用update方法检查更新,这里不演示了

最后

虽然没有如愿在github上使用application cache,但我已经把代码push到了我的github上,有兴趣同学可以down下来看看,了解到了application cache的使用也算是收获颇丰,小伙儿伴儿在你的个人主页上试试application cache吧。

 

    本文转自魏琼东博客园博客,原文链接:http://www.cnblogs.com/dolphinX/p/3439970.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章