移动web离线应用

离线应用

  • 在没有网络的情况下访问web程序时，实际是在访问其已经下载的离线文件资源；
  • 离线应用与网页缓存都是为了更好的缓存各种文件以提高读取的速度，可减少访问互联网的过程中的流量消耗；
    判断浏览器是否支持离线应用：
<script type="text/javascript">
    if (window.applicationCache) {
        alert("applicationCache is good !");
    }
</script>

applicationCache 和 mainifest

  • 开发web程序的离线应用时，需指定程序中的哪些文件资源可以在离线状态工作；
  • 离线应用使用manifest类型的为你教案作为需要配置缓存资源文件的配置文件；
  • applicationCache对象记录着web程序的缓存状态，开发者可通过该缓存状态手动更新资源文件的缓存；

manifest文件

  • 示例：
<!DOCTYPE html>
<html manifest="cache.manifest">
<meta charset="utf-8">
<head>
    <title>离线缓存示例</title>
</head>
<body>
</body>
</html>
  • 在html标签中增加manifest属性，并指定manifest文件，就可实现html5的离线应用
  • manifest的MIME类型是text/cache-manifest，因此web服务器需要配置MIME才能识别manifest文件
  • 例如在tomcat服务器下，tomcat的conf目录下的web.xml中配置
<mime-mapping>
    <extension>manifest</extension>
    <mime-type>text/cache-manifest</mime-type>
</mime-mapping>
  • cache.manifest文件
    文件中共有三种类型的清单文件
CACHE MANIFEST
#缓存的文件，当网络不可用时，该部分文件便会通过本地缓存读取
index.html
test.js

NETWORK
#不缓存的文件，该部分文件指定无论是否本地缓存，都必须通过网络去获取
/iamges/

FALLBACK
#不缓存的文件，当无法获取到前面一个文件（offline.html）时，则请求转发到后面一个文件（index.html）
offline.html index.html
  • window.navigator.onLine用于判断当前浏览器是否在线，返回值为布尔值
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容