离线缓存,就是将指定的网页文件(例如css、js)保存到本地,当用户没有网络时,依旧可以通过浏览器使用这些文件。
从网站所有者的角度来说,增加离线缓存功能,能够让用户更好的使用网站。
1 配置manifest文件
2 通过JS进行缓存的控制
将需要离线缓存的文件罗列下来,存储于后缀名为manifest的文件当中。 在HTML文件中引入manifest文件
基本语法:
代码实例:
缓存的各类属性和事件,均绑定在“applicationCache”上。
applicationCache.status
用于表示当前的缓存状态,取值范围为0~5。
0代表未缓存,通常是这些页面没有运用离线缓存技术,就是这个状态。
1代表空闲,当缓存是最新的时候为1,不需要做什么操作。
2代表检查中,即浏览器在检查manifest文件是否为最新。
3代表下载中,当前有更新,并且正在下载。
4代表更新就绪,代表当前有更新,并且已经下载完毕。等待下次载入页面的时候,进行更新。
5代表缓存过期。即找不到正确的缓存文件时候,会变成5。
update 用于主动更新缓存
updateready 当有新的缓存,并更新完毕之后,会触发此事件
progress 进度事件,当进行缓存的下载时,会不断的触发该事件
progress中的event对象包含:loaded和total。loaded代表当前已经
加载完成的文件,total为总共需要更新的文件数。
checking 正在检查
downloading 正在下载
obsolete 缓存过期
cached 空闲,缓存为最新状态
error 报错
noupdate 检查更新结束,不需要更新
部分事件使用案例代码: