• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5指南-6.如何创建离线web应用程序实现离线访问_html5教程技巧

html5指南-6.如何创建离线web应用程序实现离线访问_html5教程技巧

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含离线,web应用程序等相关知识,匿名希望在学习及工作中可以帮助到您
今天我们的内容是关于如何创建离线web应用,他的好处是可以让浏览器下载我们指定的web资源,这样用户在离线状态下也能正常使用我们的站点。

1.定义Manifest

我们使用manifest列举出需要离线时访问的资源,他本身是一个文本类型的文件,第一行经常是CACHE MANIFEST,然后列举我们需要的资源,每行一个。文件没有固定的命名规则,后缀名也没有要求,唯一的要求就是需要把后缀名在服务器端以text/cache-manifest的MIME类型定义。

如果是iis 7服务器,按照下面的步骤:

1.比如后缀名为.appcache,打开iis7,选择根节点(这样所有站点都会继承配置,也可以针对单个站点配置);

2.双击右侧的MIME类型;

3.点击右键添加MIME类型,这样就完成了配置。

服务器配置完毕,添加manifest文件。

2.疑惑解答

我在学习这部分知识的时候也遇到些问题和疑惑,如:

1.为什么我直接运行vs2010(我的开发环境),离线应用程序不能正确运行?

2.我怎么才知道离线应用是否创建成功?

3.我怎么才知道当前应用是否是离线状态?

4.暂停了iis服务后应该就处于离线状态了吧,为什么我重新刷新页面要报404错误?

现在我就这些我遇到的问题进行解答。

2.1.首先解释第一个疑问。关于这个问题,关键点在于你的应用web配置项是如何配置的,如果使用的是vs开发服务器的形式,那么我们就没有办法为它设置MIME类型,所以这种情况下我们的离线应用时没办法用的。剩下的两种web配置方式,只要你正确的按照,我上面介绍的配置MIME类型的方法配置了iis服务器,你的离线应用就能正确运行。

2.2.下面解释第二个问题,这里需要借助chrome浏览器的调试工具,使用chrome浏览器打开我们的web程序,按F12,切换到Resources选项卡。只要Application Cache下面有我们配置的信息,能找到缓存的文件,就证明我们的离线应用创建成功了。

2.3.还是使用chrome的调试工具,还是在Resources选项卡,注意到红线圈住的地方没,Online表示在线。

拔掉网线,显示Offline,表示离线,这时离线应用的效果就能表现出来了。

2.4.关于最后一个问题,还是要借助chrome浏览器的调试工具,当我们暂停iis服务的时候,我们看下Resources选项卡的显示,仍然是Online,只是后面从IDLE变成了OBSOLETE。这也就解释了为什么暂停本地iis,离线应用的离线效果显示不出来。

本节的内容到此为止。

您可能想查找下面的文章:

  • HTML5 离线应用之打造零请求、无流量网站的解决方法
  • html5指南-6.如何创建离线web应用程序实现离线访问
  • HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
  • HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
  • HTML5离线缓存Manifest是什么
  • HTML5 manifest离线缓存的示例代码
  • html5 如何做到application cache?离线储存技术的简要说明
  • 如何区别html5离线存储和本地缓存实例详解
  • HTML5离线存储原理及实现的代码实例
  • html5的离线缓存

相关文章

  • 2018-12-03html5中常用交互元素实现的代码实例
  • 2018-12-03HTML5 中新的全局属性(整理)_html5教程技巧
  • 2018-12-03详解html5的video标签测试应用
  • 2018-12-03HTML5实战与剖析之媒体元素(6、视频实例)
  • 2018-12-03HTML5嵌入音频和视频的方法
  • 2018-12-03用H5调用支付微信公众号支付的解析
  • 2018-12-03如何使用canvas的得到验证码的效果(附源码)
  • 2017-08-06解析HTML5中的新功能本地存储localStorage
  • 2018-12-03HTML5调用百度地图API获取当前位置并直接导航目的地的方法
  • 2017-08-06使用HTML5的Canvas绘制曲线的简单方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5 自动聚焦(autofocus)属性使用介绍
    • 如何利用HTML5实现等待加载动画的效果
    • 上周朋友圈被传奇世界H5破1500流水刷屏了,求千万爆款H5游戏背后的成功秘诀?
    • HTML5在IE10、火狐下中文乱码问题的解决方法
    • 关于移动页面的详细介绍
    • HTML5 是一门编程语言吗?
    • html5+CSS如何控制Table内外边框和颜色以及大小的图文教程
    • 什么是校验功能?校验功能实例用法汇总
    • Html5新增标签总结
    • HTML5的download属性详细介绍和使用实例

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有