web 离线程序，也是离线缓存，重点就是缓存文件，在用户离线的时候不至于只看到一个白屏。开始！
先让服务器支持缓存，这里只说Apache网络服务器mac版的配置。
在 应用程序/xampp/xamppfiles/etc下的mime.types添加这一行（应该是最后一行）：
test/cache-manifest manifest
别忘了重启Apache。
先看这个HTML文件
<!DOCTYPE html> <html manifest="./main.manifest"> <head> <mata charset="utf-8"> <title>form test</title> </head> <body> <p>V1.0</p> </body> </html>
注意到 manifest="./main.manifest" 这段代码了吧，浏览器会根据main.manifest这个文件的内容去缓存文件，
现在看看 main.manifest文件
CACHE MANIFEST #开头必须写这一行，告诉浏览器这是缓存文件设置 # 下面这一行虽然是注释，但是决定了浏览器是否更新缓存 # version 1.0 CACHE: # 这后面是要缓存的文件 demo1.html hello.js NETWORK: # 这后面是不要缓存的文件 notOffline.php * # * 的含义是除了要缓存的全部不缓存 FALLBACK: # 在线使用第一个文件，不在线使用第二个文件 online.js offline.js
注意，首页也就是上面写的那个html文件会被默认缓存。
如果不写CACHE、NETWORK或者FALLBACK，默认为CACHE，而且这三个顺序不一，也可以在后面追加，因为识别范围是从这个关键字到下个关键字之间。
这时候访问浏览器，页面完美展现。然后去修改掉那个html文件
<!DOCTYPE html> <html manifest="./main.manifest"> <head> <mata charset="utf-8"> <title>form test</title> </head> <body> <p>V1.0</p> <p>这里被修改了！</p> </body> </html>
刷新页面，发现并没有变化，因为浏览器还在使用缓存文件，那怎么刷新呢，只需要修改main.manifest文件中的 version 1.0 -> version 1.1，这个版本号随意修改，要让浏览器知道版本号变化了，然后刷新页面，还没变化，在刷新，好了，变了！
分析下过程。
一、第一次访问。
1、浏览器请求demo.com。
2、服务器返回index.html。
3、浏览器请求页面上的其他资源，包括main.manifest文件。
4、服务器返回请求的资源。
5、浏览器根据main.manifest文件请求要缓存的文件。
6、服务器返回资源。
7、浏览器更新本地缓存，触发一个事件，通知本地缓存被更新。
二、缓存未更新的访问过程
1、浏览器请求demo.com。
2、浏览器发现index.html被缓存，使用缓存的index.html。
3、浏览器使用其他index.html要使用且已经被缓存的文件。
4、浏览器请求main.manifest文件。
5、服务器返回304，告知浏览器manifest没有发生变化。
三、缓存被更新的访问过程
1、浏览器请求demo.com。
2、浏览器发现index.html被缓存，使用缓存的index.html。
3、浏览器使用其他index.html要使用且已经被缓存的文件。
4、浏览器请求main.manifest文件。
5、服务器返回更新过的main.manifest文件。
6、浏览器处理main.manifest文件，发现已被更新，请求要缓存的文件，包括index.html。
7、服务器返回文件。
8、浏览器更新本地缓存，触发一个事件，告知本地缓存被更新。
（这里注意，缓存被更新，但是已经展现出来的页面并不会使用新资源，必须刷新页面后才可以，这就是为什么上面出现第一次刷新后页面不更新的情况）
触发的那个事件是这个事件：
applicationCache.addEventListener('updateready', function(){
alert("OK");
}, true);