《HTML5移动开发指南》——笔记4（离线应用）

KQQ0825

于 2016-06-19 14:48:50 发布

阅读量369

点赞数

本文链接：https://blog.csdn.net/kqq0825/article/details/51712366

版权

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">HTML5新特性：离线应用  ——</span><span style="font-family: Arial, Helvetica, sans-serif; color: rgb(255, 0, 0); background-color: rgb(255, 255, 255);">解决在网络离线的情况下，正常读取和访问web上的文件资源。</span>

JavaScript检查浏览器是否支持离线应用。

if(window.applicationCache){
}

离线应用的三种特性：

1.离线资源缓存使用manifest类型的文件作为需要配置缓存资源文件的配置文件。

2.ApplicationCache对象记录缓存状态，并通过缓存状态手动更新资源文件的缓存。

3.在线状态监测 html5标准提供了onLIne方法用于检测当前网络是否在线。

使用离线应用功能的manifest配置文件以及ApplicationCache对象步骤如下：

html页面里使用manifest文件——在HTML标签增加manifest属性，并制定manifest文件。

<html manifest="cache.manifest">
    <head></head>
    <body></body>
</html>

Web服务器配置MIME类型，来识别manifest文件。

manifest文件的MIME类型是text/cache-manifest，需要在服务器进行配置。

例如：在tomcat服务器下，需要在该项目目录下的conf/web.xml文件中进行manifest类型配置

<mime-mapping>
          <extension.>manifest</extension>
          <mine-type>text/cache-manifest</mime-type>
</mime-mapping>

cache.manifest文件第一行添加 CACHE MANIFEST :通知；浏览器文件内容是一个应用离线的清单文件，共有三种类型：

1.跟在 CACHE MANIFEST 之后被定义为需要缓存的文件。

2.跟在NETWORK 之后被定义为无论文件是否被缓存，都必须从网络中下载。

3.跟在FALLBACK之后，列表的前半部分无法获取文件时，请求转发后半部分的文件。

applicationCache对象和事件

applicationCache记录本地缓存的状态及事件，通过window.applicationCache.status获得。

1.Checking事件第一次下载manifest清单的时候，第一个被触发的事件。

2.Noupdate事件检查到manifest中清单文件不需要再更新时触发。

3.downloading事件第一次下载或更新manifest文件时触发。

4.Progress事件与downloading事件相似，只不过是周期性触发。

5.Cached事件当manifest清单下载完毕缓存成功后触发。

6.upadateready事件表示缓存清单已经下载完毕，可通过重新加载页面读取文件或者切换到新的缓存文件。

7.Obsolete事件发生404错误时触发

8.Error事件 1）已经触发Obsolete事件 2）manifest文件未变，但存在缓存文件失败 3）获取manifest资源文件时发生致命错误 4）当更新本地缓存时，manifest文件再次被更改

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

KQQ0825

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《HTML5移动开发指南》——笔记4（离线应用）

HTML5新特性：离线应用 ——解决在网络离线的情况下，正常读取和访问web上的文件资源。JavaScript检查浏览器是否支持离线应用。if(window.applicationCache){}离线应用的三种特性：1.离线资源缓存使用manifest类型的文件作为需要配置缓存资源文件的配置文件。2.ApplicationCache
复制链接

扫一扫