HTML5 之 离线缓存
HTML5的离线缓存又被称为应用缓存(application cache),为专门开发web离线应用而设计的,使web应用在离线的情况下仍能正常显示页面。虽然离线状态下不能进行一些和服务器的交互操作,但是缓存页面可加快下次访问的速度,减少下次访问时的服务请求,减轻服务器的压力。
Appcache是从浏览器的缓存中划分出一块空间,使用manifest描述文件列出想要缓存的资源,将资源缓存到该空间。
例如:下面是个最简单的例子,只要求缓存了一个js文件和一张背景图片。
CACHE MANIFEST
#comment
js/index.js
img/bg.png
要想将htm文件和描述文件关联起来可以在<html>标签使用manifest属性,来指定manifest文件的路径。
<html lang="en" manifest="demo.appcache">
manifest文件的结构:
- CACHE MANIFEST (必选) 标识出哪些文件需要缓存
- NETWORK (可选) 标识要绕过缓存直接从服务器读取的文件(不会被缓存,离线时不可用)
- FALLBACK(可选) 标识当资源无法访问时,浏览器使用的备用页面(例如404页面),类似于键值对
那么,浏览器是如何对缓存资源进行管理和加载的呢?
在线状态下,浏览器发现html标签里面如果有manifest属性,它首先会请求manifest文件,如果浏览器是第一次请求该页面,则会按照manifest文件里的清单缓存相应的资源。如果浏览器已经访问过该页面,并且缓存过相应的资源,那么浏览器就会先加载缓存过的离线资源,然后浏览器会请求新的manifest文件与旧的manifest文件作对比,如果发生改变,浏览器则会重新下载manifest文件中的资源。
下面是个简单的例子:
<!DOCTYPE html>
<html lang="en" manifest="demo.appcache">
<head>
<meta charset="UTF-8">
<title>HTML5应用缓存</title>
</head>
<body>
<img src="img/01.jpg" alt="cat">
<img src="img/02.jpg" alt="rabbit">
</body>
</html>
CACHE MANIFEST
#First ----------- 注释、描述
img/01.jpg
NETWORK:
*
FALLBACK:
*.html /404.html
将项目放进tomcat,打开服务器,通过localhost:8080访问,控制台输出如下:
页面正常显示两个图片。当关掉服务器后再次访问:
(从appcache中加载文档......)第二张图片无法正常显示。
再次打开服务器,刷新页面:
application cache有个对象的JavaScript API能让我们知道它的状态。
applicationCache对象,有个status属性,表示应用缓存当前的状态。
0:无与页面相关的缓存
1:闲置,缓存未更新
2:检查中,正在下载描述文件并检查更新
3:下载中,正在下载描述文件中列出的缓存清单
4:更新完成,可通过swapCache()来使用
5:废弃,应用缓存的描述文件已经不存在,该页面无法再访问应用缓存
相关事件:
- checking:在浏览器为应用缓存查找更新时触发
- error:在检查更新或下载资源期间发生错误时触发
- noupdate:在检查描述文件发现文件无变化时触发
- downloading:在开始下载应用缓存资源时触发
- progress:在下载应用缓存资源时不断地触发
- updateready:在新的应用缓存下载完毕后可通过swapCache( )使用时触发
- cached:应用缓存完整可用时触发
相关事件在上述例子中已有所体现。
该图片引自 https://blog.csdn.net/dj0379/article/details/53350309#commentBox