一、基本概念

离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览。

二、使用方法

1. MIME type 声明

首先,因为manifest文件必须是一个MIME type为text/cache-manifest类型的存在。文件后缀名可以自定义(建议为.appcache)所以我们需要现在服务端将.appcache后缀的文件类型声明为text/cache-manifest。以apache为例,我们需要在httpd.conf中加上:

AddType text/cache-manifest .appcache

2. 在HTML文件中引入manifest文件

<!-- clock.html --> 
<!DOCTYPE html> 
<html manifest="clock.appcache">

其中manifest文件的后缀名必须为.appcache,并且和引入该manifest的页面同源

3. manifest文件语法

CACHE MANIFEST 
# 上面这行是必须的 

# 这是一行注释 
# 在这个文件中的任何地方都可以添加 
# 它们全部都会被忽略 
# 在注释之前可以有空格 
# 但必须是在单行前 

# 空行也会被忽略 

# 这些列在最开始的文件都是需要被缓存的 
# 或者是那些列在"CACHE:"里的, "CACHE"头必须写在这些文件之前,如同 
# 下面写好的那样 
images/sound-icon.png 
images/background.png 
# 注意,每个文件必须单独一行 

# 在线白名单中出现的这个文件,它不会被缓存,并且, 
# 对该文件的引用,将绕过缓存,总是会 
# 从网络中获取目标(或在用户离线时,尝试从网路上获取) 
NETWORK: 
comm.cgi 

# 这是另一块要缓存的文件,这次只有一个css文件 
CACHE: 
style/default.css

我们也可以书写成这样:

CACHE MANIFEST 
#version 1.0 
CACHE: 
style/default.css 
images/sound-icon.png 
images/background.png 
NETWORK: 
*
  • CACHE MANIFEST:这个是必须的,并且一定要写在manifest文件开头
  • CACHE:缓存清单列表,此处列出的为需要进行离线缓存的资源文件
  • NETWORK: 白名单列表,需要与服务端进行交互获取的资源文件,此处必须列出除缓存清单列表以外所有的资源地址(可以使用通配符*星号代替),否则没有列出的资源文件将加载失败

引入manifest的页面,即使没有被列入缓存清单中,仍然会被用户代理缓存。并且无法通过白名单列表去除。

(缓存清单的文件列表可以使用绝对路径或绝对URL地址)

开启离线缓存后,我们可以在chrome中打开f12来看看资源加载有啥区别

可以看出,使用离线缓存后的资源,资源请求的状态码都变为200,并且在size栏中都被标明为(form cache),加载速度也是显而易见的。

4. 缓存如何更新?

资源被离线缓存后,无论我们在后端如何更改资源文件,客户端都不会拉取到修改过的文件。

原来,只有当manifest文件被更新后(修改文件任何地方,包括注释等),客户端才会更新离线缓存文件,并且每次都会更新全部的缓存文件,包括没有被修改的资源文件,但一般这些文件都会走304的缓存策略。

另外,在服务端修改manifest文件后,客户端第一次访问页面需要再刷新一次才能获取最新的资源。因为对于浏览器来说,manifest的加载是要晚于其他资源的. 这就导致check manifest的过程是滞后的。发现manifest改变,所有浏览器的实现都是紧随这做静默更新资源,以保证下次pv,应用到更新。(这一点很蛋疼,但还是有解决办法,请继续往下看)。

5. 离线缓存对象和事件处理

在javascript中我们可以通过window.applicationCache来访问缓存对象,对象中包含了一个status属性以及若干的待监听的事件处理器。

 

其中status属性代表的是当前离线应用的状态,它可能的值为:

  • UNCACHED (0):未启用离线应用
  • IDLE (1):已开启离线应用,但本地缓存的资源是最新的,并且未标记为废弃资源
  • CHECKING (2):当前更新缓存的状态为“检查中”
  • DOWNLOADING (3):当前更新缓存的状态为“下载资源中”
  • UPDATEREADY (4):当前更新缓存的状态为“更新完毕”
  • OBSOLETE (5):已开启离线应用,但缓存资源都已标记为废弃

离线缓存事件:

  1. checking:在第一次下载manifest文件时,或者检查是否需要更新时触发
  2. noupdate:manifest文件未修改,不需要下载新的缓存文件时触发
  3. downloading:准备更新缓存之前,或者第一次下载资源之前触发
  4. progress:下载资源时触发,每下载一个资源都会触发一次
  5. cached:页面首次启用离线缓存,并且离线缓存下载完毕时触发
  6. updateready:资源更新完毕时触发
  7. obsolete:加载manifest文件时遇到401或404错误时触发
  8. errorEvent加载manifest文件时遇到401或404错误时触发

这样,我们就可以通过updateready事件来让离线缓存更新后自动刷新页面了,虽然还是比较挫:

applicationCache.addEventListener(‘updateready’, function(){ 
location.href=”test.html”; 
}, false);

6. 离线缓存的下线

要将离线缓存下线,我们只需要将服务端的manifest文件删除即可,同时也要将HTML中的  manifest="manifest.appcache" 删除(不删也可以,会在console控制台报错,但不会影响页面访问),删除后用户再第一次访问还是原来的缓存页面,还需要再刷新一次。

 推荐课程:HTML+CSS基础入门培训、 PHP语言编程基础培训