html5离线web应用程序 | 莫克力学习博客

HTML5提供了本地缓存使用的API，使得我们可以开发离线应用。传统的Web应用程序一般是利用网页缓存，网页缓存有缺点也有优点。下面是本地缓存和网页缓存的对比：

如果用户没有连接网络，就不能使用Web应用程序，相比离线浏览 - 用户可在应用离线时使用它们
网页缓存不可靠，不安全，本地缓存安全可靠，可以指定具体缓存的内容
本地缓存为整个Web应用，网页缓存为单个网页
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

为了让整个Web应用离线也能工作，就需要把HTML，CSS，JS等进行本地缓存。

manifest文件

Web应用程序的本地缓存是通过每个页面的manifest文件来管理的。manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

###manifest 文件组成部分（三个）

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存，可以为通配符，表示没有在manifest文件中指定的都不会进行本地缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

缓存更新

缓存一般会保持原有状态，直至：

用户清空浏览器缓存
manifest 文件被修改（参阅下面的提示）
由程序来更新应用缓存

实例

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

浏览器与服务器的交互过程

首次访问网站时的交互过程如下：

浏览器请求访问网站，即发送url；
服务器返回请求网页，例如：index.html；
浏览器解析网页，请求页面上所有资源文件，包括HTML文件、图像文件、CSS文件、JS文件以及manifest文件；
服务器返回所有资源文件；
浏览器处理manifest文件，请求manifest中所有要求本地缓存的文件，包括index.html页面本身，即使刚才已经请求过这些文件。如果你要求本地缓存所有文件，这将是一个比较大的重复的请求过程；
服务器返回所有要求本地缓存的文件；
浏览器对本地缓存进行更新，存入包括页面本身在内的所有要求本地缓存的资源文件，并且触发一个事件，通知本地缓存被更新。

　
本地缓存更新完毕，再次打开浏览器访问该网站，而且manifest文件没有被修改过，它们的交互过程如下：

浏览器再次请求访问网站；
浏览器发现这个页面被本地缓存，于是使用本地缓存中index.html页面；
浏览器解析index.html页面，使用所有本地缓存中的资源文件；
浏览器向服务器请求manifest文件；
服务器返回一个304代码，通知浏览器manifest没有发生变化。

只要页面上的资源文件被本地缓存过，下次浏览器打开这个页面时，总是先使用本地缓存中的资源，然后请求manifest文件。

　
如果再次打开浏览器时，manifest文件已经被更新过了，那么浏览器与服务器之间的交互过程如下：

浏览器再次请求访问网站；
浏览器发现这个页面被本地缓存，于是使用本地缓存中的index.html页面；
浏览器解析index.html页面，使用所有本地缓存中的资源文件；
浏览器向服务器请求manifest文件；
服务器返回更新过年manifest文件；
浏览器处理manifest文件，发现该文件已被更新，于是请求所有要求进行本地缓存的资源文件，包括index.html页面本身；
服务器返回要求进行本地缓存的资源文件；
浏览器对本地缓存进行更新，丰入所有新的资源文件。并且触发一个事件，通知本地缓存被更新。

注意，即使资源文件被修改过了，在上面的第三步中已经装入的资源文件是不会发生变化的，例如图片不会突然变成新的图片，脚本文件也不会突然使用新的脚本文件，

applicationCache对象

applicationCache对象代表本地缓存，可以用它来通知用户本地缓存中已经被更新，也允许用户手工更新本地缓存。

updateready事件

manefest跟新会触发applicationCache对象的updateready事件，通知本地缓存已经被更新。可以利用该事件告诉用户本地缓存已经被更新，用户需要手工刷新页面来得到最新版本的应用程序。

applicationCache.addEventListener("updateready", function(event) {  
 // 本地缓存已被更新，通知用户。  
alert("本地缓存已被更新，可以刷新页面来得到本程序的最新版本。");  
}, false);

swapCache()

applicationCache对象的swapCache()方法来控制如何进行本地缓存的更新及更新的时机。

 applicationCache.addEventListener("updateready", function(event) {  
 // 本地缓存已被更新，通知用户。  
alert("正在更新本地缓存……");  
 applicationCache.swapCache();  
 alert("本地缓存更新完毕，可以刷新页面使用最新版应用程序。");  
 }, false);

比较updateready事件与swapCache()方法：

updateready表示资源从服务器上请求过来了，自动跟新
swapCache()表示updateready事件发生后，用户自己跟新
如果不使用swapCache()方法，本地缓存一样会被更新，但是，更新的时候不一样。如果不调用该方法，本地缓存将在下一次打开本页面时被更新；如果调用该方法，则本地缓存将会被立刻更新。
尽管使用swapCache()方法立刻更新了本地缓存，但是并不意味着我们页面上的图像和脚本文件也会被立刻更新，它们都是在重新打开本页面时才会生效

applicationCache对象的事件

applicationCache对象的事件除了具有update方法与swapCache()方法，还具有其他一系列事件。　