美文网首页
移动web离线应用

移动web离线应用

作者: 幽谷听泉 | 来源:发表于2016-08-31 15:49 被阅读0次

离线应用

  • 在没有网络的情况下访问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用于判断当前浏览器是否在线,返回值为布尔值

相关文章

  • 移动web离线应用

    离线应用 在没有网络的情况下访问web程序时,实际是在访问其已经下载的离线文件资源; 离线应用与网页缓存都是为了更...

  • 离线检测

    离线Web应用概念 离线Web应用,就是在设备不能上网的情况下任然可以运行的应用。 开发离线Web应用步骤 首先,...

  • 二十、离线应用与客户端存储

      支持离线 Web 应用开发是 HTML5 的另一个重点。   所谓离线 Web 应用,就是在设备不能上网的情况...

  • Service Workers

    PWA(Progressive Web App)初探总结Service Workers: 简介Web离线应用解决方...

  • 离线应用和客户端缓存

    HTML5支持离线Web开发,离线Web应用指设备在没有网的情况仍然能运行的应用。本文简单总结了相关知识。 开发步...

  • HTML5在移动端开发的12大特性

    1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的coo...

  • 离线应用与客户端存储(23)

    -进行离线检测-使用离线缓存-在浏览器中保存数据 离线web应用,就是设备在不能上网的情况下仍然可以运行的应用。 ...

  • web -- 缓存篇 最佳实战 HTML5离线缓存 HTT

    JS,CSS 版本缓存控制, 离线WEB应用(PWA很多不兼容, 遂用Application Cache实现离线缓...

  • PWA(渐进式 Web 应用)

    web 应用体验上不如原生应用 传统 web 应用 依赖网络来加载内容。弱网环境加载慢,离线无法访问等问题 不能添...

  • Flutter web踩坑记录

    从移动端应用转web应用 在终端输入flutter config --enable-web, 允许web端应用即可...

网友评论

      本文标题:移动web离线应用

      本文链接:https://www.haomeiwen.com/subject/wzgqettx.html