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
1360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
