• 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指南-6.如何创建离线web应用程序实现离线访问

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含离线,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-03这个问题已有了答案?
  • 2017-08-06HTML5应用之文件上传
  • 2017-08-06使用phonegap获取设备的一些信息方法
  • 2018-12-03Html5页面二次分享的实现
  • 2018-12-03利用简洁的图片预加载组件提升html5移动页面的用户体验 _html5教程技巧
  • 2017-08-06HTML5和以前HTML4的区别整理
  • 2017-08-06html5-websocket基于远程方法调用的数据交互实现
  • 2018-12-03indexeddb数据库的使用详解
  • 2018-12-03html5基础教程常用技巧整理
  • 2018-12-03HTML5有哪些创意类型?

文章分类

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

最近更新的内容

    • HTML5中的autofocus(自动聚焦)属性介绍_html5教程技巧
    • HTML5制作酷炫音频播放器插件图文教程_html5教程技巧
    • 小强的HTML5移动开发之路(11)——链接,图片,表格,框架
    • 如何在HTML5中使用SVG
    • HTML5第六天笔记
    • 探讨HTML5移动开发的几大特性(必看)
    • html5在输入框添加语音输入功能
    • 如何使用 HTML5 技术适配不同分辨率的设备?
    • 使用phonegap克隆和删除联系人的实现方法
    • 推荐10款非常优秀的HTML5开发工具

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

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