html5指南--6.创建离线web应用程序
今天我们的内容是关于如何创建离线web应用,他的好处是可以让浏览器下载我们指定的web资源,这样用户在离线状态下也能正常使用我们的站点。
1.定义Manifest
我们使用manifest列举出需要离线时访问的资源,他本身是一个文本类型的文件,第一行经常是CACHE MANIFEST,然后列举我们需要的资源,每行一个。文件没有固定的命名规则,后缀名也没有要求,唯一的要求就是需要把后缀名在服务器端以text/cache-manifest的MIME类型定义。
如果是iis 7服务器,按照下面的步骤:
1.比如后缀名为.appcache,打开iis7,选择根节点(这样所有站点都会继承配置,也可以针对单个站点配置);
2.双击右侧的MIME类型;
3.点击右键添加MIME类型,这样就完成了配置。
服务器配置完毕,添加manifest文件。
CACHE MANIFEST manifestFile.html img/1.jpg img/2.jpg img/3.jpg
然后我们看下面的例子。
<!DOCTYPE HTML> <html manifest="manifest.appcache"> <head><title>Example</title><style>img{border: medium double black;padding: 5px;margin: 5px;}</style> </head> <body><img alt="" id="imgtarget" src="img/1.jpg" /><div><button id="1">car1</button><button id="2">car2</button><button id="3">car3</button></div><script>var buttons = document.getElementsByTagName('button');for (var i = 0; i < buttons.length; i++) {buttons[i].onclick = handleButtonPress;}function handleButtonPress(e) {document.getElementById('imgtarget').src = 'img/' + e.target.id + '.jpg';}</script> </body> </html>
程序运行,根据浏览器的不同,有的浏览器会询问你,是否允许保存离线数据到本地,有的不会。这样一个简单的离线应用就创建好了。
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,离线应用的离线效果显示不出来。
本节的内容到此为止。
转载于:https://www.cnblogs.com/softlover/archive/2012/09/10/2677326.html
html5指南--6.创建离线web应用程序相关推荐
- HTML5离线web应用程序
web应用程序的主要制约之一就是连接性.在HTML5到来之前我们就曾想挖掘浏览器的能力,以使web应用程序能像桌面应用程序一样功能强大和易于使用,但浏览器始终让我们感到失望.虽然之前已出现了一些浏览器 ...
- 使用 HTML5 和 CSS3 创建现代 Web 站点
开始之前 本教程假定您具有 HTML.CSS 和 JavaScript 的一些基本经验.假定您知道什么是 HTML 元素或标记.属性表示什么.HTML 标记的基本语法.Web 页面的常规结构等等.关于 ...
- ASP .NET Core Web MVC系列教程一:创建一个Web应用程序
系列文章目录:ASP .NET Core Web MVC系列教程:使用ASP .NET Core创建MVC Web应用程序 从Visual Studio中选择" 创建新项目". 选 ...
- ASP .NET Core Web MVC系列教程:使用ASP .NET Core创建MVC Web应用程序
本系列教程翻译自微软官方教程,官方教程地址:Get started with ASP.NET Core MVC | Microsoft Docs 本系列教程介绍了构建MVC Web应用程序的基础知识. ...
- 小程序中input标签没有反应_鸢尾花预测:如何创建机器学习Web应用程序?
全文共2485字,预计学习时长12分钟 图源:unsplash 数据科学的生命周期主要包括数据收集.数据清理.探索性数据分析.模型构建和模型部署.作为数据科学家或机器学习工程师,能够部署数据科学项目非 ...
- 使用面向对象技术创建高级 Web 应用程序
作者: 出处: 使用面向对象技术创建高级 Web 应用程序 来源:开源中国社区 作者:oschina 最近,我面试了一位具有5年Web应用开发经验的软件开发人员.她有4年半的JavaScript编程经 ...
- JavaScript 使用面向对象的技术创建高级 Web 应用程序
最近,我面试了一个有五年 Web 应用程序开发经验的软件开发人员.四年半来她一直在从事 JavaScript 相关的工作,她自认为 JavaScript 技能非常好,但在不久之后我就发现实际上她对 J ...
- 使用 Stripes、MyBatis 和 Derby 创建 Java Web 应用程序
在本教程中,我们将使用 Stripes.MyBatis 和 Derby 创建一个 Java Web 应用程序.我们使用 NetBeans 来构建应用程序.Apache Tomcat 用作 JSP 和 ...
- mysql怎么创建窗口应用程序_在NetBeans中使用MySQL创建简单Web应用程序(二)
既然数据层已经准备就绪,我们开始在适当的位置放置Java类.逻辑层由三个类组成:SubjectName.java.SubjectCounselor.java和AccessDB.java.这几个类提供两 ...
最新文章
- shell按长度排序
- 【HDU - 6567】Cotree(树形dp,思维)
- 培训机构破产了,“我还要还贷到2028年”
- 服务器webpack构建性能,[译] 优化 WEBPACK 以更快地构建 REACT
- linux mount_nodev函数,mount()函数 Unix/Linux
- 帆软参数设置_系统参数设置- FineReport帮助文档|报表开发|报表使用|学习教程
- DDD Microservices
- 专访唐宇迪博士:我是如何迈入同济大学校园的?浅谈人工智能,未来数据挖掘和计算机视觉是风口
- 2021年9月再次更新-日立电梯,艾默生变频器维修图纸,原理图
- QTreeWidget支持双击编辑Item节点的内容
- 【电驱动】驱动电机系统讲解
- 用matlab表白,用函数表达对她的爱
- c#模拟看板控件_C#TIPTOP电子看板
- 读《深入浅出MySQL数据库开发、优化与管理维护(第2版)》笔记2 WITH ROLLUP关键字
- CPU温度过高解决方法
- tensorflow打印模型图_tensorflow实现打印pb模型的所有节点
- VMware安装tools
- Web 压测工具介绍
- 苹果手机点击输入框时页面自动放大
- 正则表达式及re模块
热门文章
- 傅里叶级数的数学推导
- mysql查询一个数据库所有表的记录数,mysql 查看数据库中所有表的记录数
- 蔡高厅老师 - 高等数学阅读笔记 - 03 - 极限(13、14、15、16、17)
- pytorch load state dict_学习Pytorch过程遇到的坑(持续更新中)
- linux usb不识别,求助:USB无法识别
- micropython 蓝牙音箱_你愿意用ESPY-core做哪些有趣尝试?
- oracle 查看等待事务,ORACLE 等待事务查询语句
- 中标麒麟共享win7打印机_win10与win7系统电脑通过局域网共享打印机的方法
- pcl如何设置colorbar_突然加更 | 子图、colorbar和标题
- python存储json数据_python 存储json数据