首先，我们建立一个html文件，类似这样：
<!DOCTYPE html> <html lang="en" manifest="manifest.appcache"> <head> <meta charset="UTF-8"> <title>APP CACHE</title> <link rel="stylesheet" type="text/css" href="test.css"> </head><!-- text/cache-mainfest --> <body> <img src="img/1.jpg"> <img src="img/2.jpg"> <script type="text/javascript"> window.addEventListener(‘load‘, function(e){ console.log(window.applicationCache.status); }) </script> </body> </html>
可能有些代码看不懂，我们先看最简单的，第一行配置了一个manifest=”manifest.appcache”（注意是mani不是main），这是使用app cache首先要配置的，然后我们在这个html文件里引入了两个img做为测试用，然后监听了load时间来查看看application的status，关于applicationCache的api，可以查看。
然后在相同目录下新建一个manifest.appcache文件，注意关于路径要和html页面配置时一致即可。
CACHE MANIFEST
#version 1.3
CACHE:
img/1.jpg
img/2.jpg
test.css
NETWORK:
*
关于manifest.appcache文件，基本格式为三段： CACHE， NETWORK，与 FALLBACK，其中NETWORK和FALLBACK为可选项，而第一行CACHE MANIFEST为固定格式，必须写在前面。
CACHE:（必须）
标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。例如：aa.css，http://www.baidu.com/aa.js.
NETWORK:（可选）
这一部分是要绕过缓存直接读取的文件，可以使用通配符＊，,也就是说除了上面的cache文件，剩下的文件每次都要重新拉取。例如＊，login.php。
FALLBACK:（可选）
指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。该段落的每条记录都列出两个 URI—第一个表示资源，第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。例如*.html /offline.html。
manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置
OK，上面文件配置完成之后，application cache就可以运行了。
查看console：
可以看到，一下子这么多log，但是除了4是我们console的log之外，其他的都是appcache自己打的，因为我们配置了manifest，系统会默认打出appcache的log。关于status的值：
| 可选值 | 匹配常量 | 描述 |
| 0 |
appCache.UNCACHED |
未缓存 |
| 1 |
appCache.IDLE |
闲置 |
| 2 |
appCache.CHECKING |
检查中 |
| 3 |
appCache.DOWNLOADING |
下载中 |
| 4 |
appCache.UPDATEREADY |
已更新 |
| 5 |
appCache.OBSOLETE |
失效 |
然后，通过log，我们看到一些文件已经被缓存，我们可以查看chrome Resources来查看：
可以看到我们的test.html文件也已经被缓存下来了，type是master，顾名思义一个管理着，而manifest.appcache文件为manifest类型。此时我们的appcache已经完成。我们可以尝试把网线断了，或者把服务器关了，同样，我们的项目仍然可以访问，这就是离线缓存。此时console：
证明直接从缓存拿去文件：
浏览器发现manifest文件本身发生变化，便会根据新的manifest文件去获取新的资源进行缓存。
当manifest文件列表并没有变化的时候，我们通常通过修改manifest注释的方式来改变文件，从而实现更新。
window.applicationCache.addEventListener(‘updateready‘, function(){ console.log(‘updateready!‘); window.applicationCache.swapCache();//应用更新后的缓存来替换原来的缓存 });
清除浏览器缓存再试一次，这次我们在console里调用window.applicationCache.update();，看看发生了什么：
updateready事件触发了，同样，appcache也更新了缓存，其中swapCache方法的意思是重新应用更新后的缓存来替换原来的缓存！，到这里后基本的appcache也差不多了。
完！
原文：http://www.cnblogs.com/shuiyunsf/p/6257037.html