使用html5的离线缓存技术

突然想用html5的离线缓存,但是一直没有成功,在各种群里问发现很多人都没什么经验,最终终于在各种论坛找到解决方案了。下面就简单记录一下相关情况。

一、离线缓存的优点

我们都知道离线缓存主要是用来减少web应用对网络的依赖的,也就是说让你能偶在没网的情况下也能使用(当然是某些功能)。初看有点像传统的缓存,但是还是有很大不同的,首先离线缓存可以缓存整个应用,而普通的则是缓存单个界面;离线缓存的更新更加方便,可以动态通知,而传统缓存则是通过返回状态码来判断更新的;离线缓存还可以指定有网和没网分别加载什么文件,这点传统的缓存则做不到。

二、基本使用

离线网络应用程序的核心是一个 content type (内容类型) 为 cache-manifest 的文本文件。这个文件保存了应用程序中需要离线存储的文件(HTML, CSS, JavaScript, 图片等)。举一个简单的例子

CACHE MANIFEST
./index.html
./demo.css
./demo.js
./logo.png
这里定义的就是一个manifest文件,这个文件同其他文件放在相同的文件夹下,第一行类似是文件类型定义,它必须是写这个,然后下面定义了需要缓存的文件。当然虽然这里没有写manifest文件,但它默认是进行缓存的。
从别处摘了一份书写规范:
  1. 首行必须是 CACHE MANIFEST。
  2. 其后,每一行列出一个需要缓存的资源文件名。
  3. 可根据需要列出在线访问的白名单。白名单中的所有资源不会被缓存,在使用时将直接在线访问。声明白名单使用 NETWORK:标识符。
  4. 如果在白名单后还要补充需要缓存的资源,可以使用 CACHE:标识符。
  5. 如果要声明某 URI 不能访问时的替补 URI,可以使用 FALLBACK:标识符。其后的每一行包含两个 URI,当第一个 URI 不可访问时,浏览器将尝试使用第二个 URI。
  6. 注释要另起一行,以 # 号开头

然后我们需要在每个网页中加入

<html manifest="xxx.manifest"> 

三、服务器的配置

如果你认为现在你的工作就完成了,那你就错了,其实主要还是服务器的配置问题,不同的服务器有不同的方法。我使用的是apache。配制方法是在conf/mime.types加入一段代码:

test/cache-manifest manifest

然后你就可以使用html5强大的离线缓存功能了

四、更新问题

貌似是有各种更新的方法,不过我最喜欢的还是最简单的一种,也就是在manifest文件中加入一行版本号,这样更新的时候就直接更新了。

五、限制

目前的关于大小的限制如下:

  • Safari桌面浏览器(Mac以及 Windows)没有限制
  • Mobile Safari限制为10MB
  • Chrome限制为5MB
  • Android浏览器对应用程序缓存大小没有限制
  • Firefox桌面版有无限的应用程序缓存大小
  • Opera的应用程序缓存大小可以由用户管理,但有一个默认大小50M

可以使用这个网站来检验你的manifest文件是否正确

六、怎样查看离线缓存

chrome: chrome://appcache-internals

firefox:  about:cache



                            

你可能感兴趣的:(html5)