离线web应用总结

应用程序缓存清单

在html标签中设置manifest属性，该属性指向一个缓存清单配置文件即可。
清单文件首行以字符串"CACHE MANIFEST"开头进行标记，剩余的就是要缓存的URL列表。
例子：

CACHE MANIFEST
# 上一行标识此文件是一个清单文件
# 下面的内容都是应用程序依赖的资源文件的URL
myapp.html
myapp.js
myapp.css
images/bg.png

区域标识符

CACHE:
此区域后面的内容就是要缓存的内容。

Network:
此内容之后标识的内容即不会缓存的内容，即总是从网络获取。

FALLBACK:
区域中的清单项每行都包含两个URL。第二个URL是指需要加载和存储在缓存中的资源，第一个URL是一个前缀。任何能够匹配到该前缀的URL都不会缓存起来，但是可能的话，它们会从网络中载入。如果从网络中载入这样一个URL失败的话，就会使用第二个URL指定的缓存资源来代替，从缓存中获取。
例子：

CACHE MANIFEST
# 缓存的内容
CACHE:
myapp.html
myapp.js
myapp.css
images/bg.png
# viedeos路径下资源加载失败的话会使用offlone_help.html处理
FALLBACK:
videos/ offline_help.html
# 不缓存的内容
NETWORK:
cgi/

缓存更新

一般通过修改版本号更新，但是更新不会马上生效，如果不主动操作，网页会在下次访问时生效。
主动使缓存更新的方式是监听缓存更新的相关事件，主动重载界面即可。代码如下：

//下面所有的事件处理程序都使用此函数显示状态信息
//由于都是调用status函数显示转改，因此所有的处理程序都返回fasle来阻止浏览器显示器默认状态信息
function status(msg){
    document.getElementById("statusline").innerHtml=msg;
    console.log(msg)
}
//每次应用程序载入时都会检查清单文件，也总会触发checking事件
window.applicationCache.onchecking=funtion(){
    status("Checking for a new version");
    return false;
}
//清单文件没有改动，同时应用程序也已经缓存了
window.applicationCache.onnoupdate=funtion(){
    status("this version is up-to-date");
    return false;
}
//如果还未缓存应用程序，或者清单文件有改动，那么触发downloading事件，
//同时意味着下载过程开始
window.applicationCache.ondownloading=funtion(){
    status("downloading new version");
    return false;
}
//在下载过程中会间断性的触发progress事件
window.applicationCache.onprogress=funtion(e){
    var progress="";
    if(e&&e.lengthComputable)
        progress=" "+Math.round(100*e.loaded/e.total)+"%";
    else
        progress=""
    status("downloading new version"+progress);    
    return false;
}
//当下载完成并且首次将应用程序下载到缓存中时，
//浏览器会触发"cached"事件
window.applicationCache.oncached = function（）{
    status（"This application is now cached locally"）;
    return false;
};

// 当下载完成并将缓存中的应用程序更新后，浏览器会触发"updateready"事件
// 要注意的是：触发此事件的时候，用户任然可以看到老版本的应用程序.
window.applicationCache.onupdateready = function（）{
    status（"A new version has been downloaded. Reload to run it"）;
    return false;
};

// 如果浏览器处于离线状态，检查清单列表失败，则会触发"error"事件
// 当一个未缓存的应用程序引用一个不存在的清单文件，也会触发此事件
window.applicationCache.onerror = function（）{
    status（"Couldn't load manifest or cache application"）;
    return false;
};

// 如果一个缓存的应用程序引用一个不存在的清单文件
// 会触发"obsolete"事件，同时会将应用从缓存中移除
// 之后都不会从缓存而是通过网络来加载资源
window.applicationCache.onobsolete = function（）{
    status（"This application is no longer cached. " +
          "Reload to get the latest version from the network."）;
    return false;
};

状态

使用applicationCache.status来查看离线应用缓存的状态，状态码如下：

ApplicationCache.UNCACHED（0）
应用程序没有设置manifest属性：未缓存
ApplicationCache.IDLE（1）
清单文件已经检查完毕，并且已经缓存了最新的应用程序
ApplicationCache.CHECKING（2）
浏览器正在检查清单文件
ApplicationCache.DOWNLOADING（3）
浏览器正在下载并缓存清单中列举的所有文件
ApplicationCache.UPDATEREADY（4）
已经下载和缓存了最新版的应用程序
ApplicationCache.OBSOLETE（5）
清单文件不存在，缓存将被清除

参考文献：

JavaScript权威指南