最近被问到你会离线缓存吗，一头雾水，所以决定自己写一个demo来验证一些，
准备工作：把demo放到了nginx服务器中跑起来，启动服务器（start nginx）
配置manifest文件
在html标签加上manifest属性 <html manifest="index.manifest">
项目根目录下的./index.manifest文件内容如下
<pre>CACHE MANIFEST </pre>
<pre>#version 1 </pre>
<pre>#CACHE:其后列出的是需要缓存的内容 </pre>
<pre>CACHE:
index.html
img/u-img.jpg</pre>
<pre>#NETWORK:其后列出的是不进行缓存的内容，每次都需要从服务器端获取 </pre>
<pre>NETWORK:
FALLBACK:
404.html
</pre>
<pre>
//强制检查服务器上的manifest文件是否有更新
window.applicationCache.update();
</pre>
<i>
chrome console报错如下：
Uncaught DOMException: Failed to execute 'update' on 'ApplicationCache': there is no application cache to update.
<i>
<b>问题竟然是由于在manifest中图片的路径写错了，img/u-img.png写成了img/u-img.jpg 导致不能离线缓存
当manifest中配置的文件正确时，
you able to see some files in Chrome's web dev tools under Resource->Application Cache.
</b>
当你停掉（nginx.exe -s stop 或 nginx.exe -s quit）服务器时，被缓存的文件img/u-img.png能正确显示，其他图片不能正确加载。
==============================================
离线缓存一些讲解
一、缓存状态：window.applicationCache 对象是对浏览器的应用缓存的编程访问方式。其 status 属性可用于查看缓存的当前状态。
applicationCache.status的值如下：
0 === 未缓存
1 === 空闲（缓存为最新状态）
2 === 检查中
3 === 下载中
4 === 更新就绪
5 === 缓存过期
主动更新缓存：applicationCache.update()
<pre>
<script>
//利用定时器隔一定时间自动更新一下缓存
setInterval(function(){ applicationCache.update(); },50000);
</script>
</pre>
二、介绍一下缓存相关的事件。
1、updateready事件：当有新的缓存，并更新完以后，会触发此事件。
例如代码：
<pre>
applicationCache.addEventListener("updateready",function(){ alert("缓存更新完成");},false);
</pre>
2、progress事件：当有新的缓存，并处于正在下载的过程中时，会不断触发此事件。progress中的event对象包含：loaded和total。loaded代表当前已经加载完成的文件，total为总共需要更新的文件数。
<pre>
applicationCache.addEventListener("progress",function(){
alert(applicationCache.status); // 3表示正在下载
},false);
</pre>
3、其他事件：
checking事件：正在检查
downloading事件：正在下载
updatereadey事件：更新完成
obsolete事件：缓存过期
cached事件：空闲，缓存为最新状态
error事件：报错
noupdate事件：检查更新结束，没有需要更新。
网友评论