H5 离线缓存

离线缓存

什么是离线缓存，为什么要用它？这是我们需要思考的问题。

顾名思义，离线缓存，就是离线了你的东西内容也缓存了下来，放在我们的开发项目中就是，当你有网络的情况下，将你需要的内容，页面，样式逻辑功能存下来，这样在离线的时候同样能够看到这些东西，不至于出现空白。

往往在我们做飞机火车地铁的时候，总有断网的时候，这个时候你或许在刷着手机看新闻，看小说等，那么断网了，为了更好的用户体验，我们肯定不能让用户所看的页面出现空白，这个时候我们必须使用离线缓存技术将用户当前看到的以及将要看到的存储下来。

那么离线缓存是怎么实现的呢？首先，在项目开发中，必须要判断浏览器是否支持离线缓存，通过

进行判断，ie是不支持的，其次，在开发中需要在服务器做manifest的配置，如下：

（wamp\Apache2\conf\mime.types）

AddType text/cache-manifest manifest

AddType text/cache-manifest .appcache

接下来就是缓存文件的配置了：

创建一个后缀名为manifest的文件(或appcache)，并在html页面中引入

例如：

manifest文件结构：

# 第一行必须为CACHE MANIFEST

CACHE MANIFEST（必须大写）

# v1.0.0

CACHE:（必须） 在此标题下列出的文件将在首次下载后进行缓存

# 缓存文件

test.css

NETWORK:（可选）在此标题下列出的文件需要与服务器连接，不会被缓存

# 不缓存文件

test2.css

FALLBACK:（可选）在此标题下列出的文件规定当页面无法访问时的回退页

# 页面无法访问时

test.html 404.html

单行注释：#开头

这是我们需要配置的缓存文件，名字一定不能更改哈。

离线缓存的基本运行流程是这样的：

在离线缓存技术中还提供了如下的方法进行缓存更新操作等：

update()：检测更新manifest文件

updateready事件：当有新的缓存，并更新完以后，会触发此事件

update方法会触发updateready事件

window.applicationCache.update();

window.applicationCache.addEventListener('updateready',function(){

alert('更新完成')

},false);

swapCache方法：用来执行本地缓存的更新操作

触发updateready事件时调用swapCache方法

window.applicationCache.update();

window.applicationCache.addEventListener('updateready',function(){

window.applicationCache.swapCache();

},false);

4、applicationCache.status 本地缓存的状态

0 ===未缓存 1=== 空闲（缓存为最新状态）2 === 检查中

3 === 下载中4 === 更新就绪5 === 缓存过期

关于离线缓存的技术点就这么多了

总之，使用离线缓存用户可在应用离线时使用它们，离线浏览，运行速度也会比较快，因为已缓存资源加载得更快，还可以减少服务器压力，浏览器将只从服务器下载更新过或更改过的资源。