HTML5离线缓存
HELLO~大家好~~小葵花爸爸课堂开课啦！！！孩子不会用HTML5离线缓存怎么办，多半是没有看这篇博客啦~~~（打字快，有几个错别字别嫌弃啊 0_0）
首先讲一下为什么会出现离线缓存？在HTML5之前，必须连接网络才能访问页面。随着移动互联网的兴起，设备终端的位置不在固定。而移动设备非常依赖无线信号，网络的可靠性并不稳定，比如在过隧道或是信号强度弱的地方，无法访问网站，这无疑对用户体验是不好的，所以HTML5中的applicationCache就解决了这个问题。
我们在使用这个技术之前，一定要先来了解一下浏览器的支持情况(IE你懂得~~)：
一、HTML5离线缓存说明
HTML5离线缓存又名applicationCache，是从浏览器的缓存中分出来的一块缓存区，若要在这个缓存中保存数据，需要使用描述文件（.manifest），列出需要下载和缓存的资源。
manifest文件需要配置正确的MIME-type，即“text/cache-manifest”，这个是在web服务器上进行配置。
二、创建步骤（老司机先开车，底下再讲优缺点和注意事项）
①Tomcat配置：
· 首先正确安装Tomcat，并确保能够正常运行，Tomcat的默认打开路径是可以自己设置的，这里不再赘述。
· Tomcat安装路径下找到conf --> web.xml，下拉到<mime-mapping>标签，添加下图这段配置（这样才能识别你的manifest文件）
· 配置完Tomcat重启服务器
②编写.manifest文件，文件名可自定义，例如hahaha.manifest
CACHE MANIFEST(声明头部文件，必须大写)
CACHE: (这里写需要缓存的文件，例如js、css、img)
js/index.js
css/index.css
img/aaa.jpg
NETWORK (需要网络调用的文件，大写)
*
FALLBACK (在此标题下，列出的文件规定页面无法访问的回退页面)
404.xml
例如下图所示：
③编写HTML文件（.manifest文件和HTML页面同级）
<!doctype html>
<html manifest="hahaha.manifest">（html标签里写入你的.manifest文件）
<script>（script标签里需要添加版本更新的监听）
applicationCache.addEventListener("updateready",function(e){
if(applicationCache.status==applicationCache.UPDATEREADY){
applicationCache.swapCache();//使用新版本资源
window.location.reload();//刷新页面
}
},false);
</script>
④服务器打开你的HTML文件，这时你的HTML是可以正常显示的，如果关闭服务器，你会发现，页面仍然可以正常显示，而不是出现无法访问的情况，在控制台里可以找到离线缓存的文件。
三、离线缓存的优点
减少服务器的负载，提高资源加载速率。
离线浏览，方便用户在离线时使用。
四、离线缓存的缺点
更新完版本后，必须刷新一次才会启动新版本。
进入离线存储的页面，如果不更新版本，会将其当做静态页面不请求。
无法进行灰度发布（即一部分人使用旧版本，一部分人使用新版本）。
无法增量更新
五、与传统浏览器缓存的区别
离线缓存是针对整个应用，浏览器缓存是单个文件。
离线缓存断网还可以打开页面，浏览器缓存不行。
离线缓存可以主动通知浏览器更新资源。
注意！！！！！！
每个浏览器对缓存的数据容量大小限制不一样（某些浏览器设置的限制是每个站点5MB）。
当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源，其他页面即使没有设置manifest属性，请求的资源如果在缓存中也可以访问。
如果manifest中，内部列举的某个文件不能正常下载，则整个更新过程视为失败，浏览器继续全部使用老的缓存。
浙公网安备 33010602011771号