离线Web应用程序介绍
在HTML5中新增了一个API,为离线Web应用程序的开发提供了可能性。为了让Web应用程序在离线状态时也能正常工作,就必须要把所有构成Web应用程序的资源文件,诸如:HTML文件、CSS文件、JavaScript脚本文件等放在本地缓存中,当服务器没有和Internet建立连接的时候,也可以利用本地缓存中的资源文件来正常运行Web应用程序。
本地缓存与浏览器网页缓存的区别
首先,本地缓存是为整个Web应用程序服务的,而浏览器的网页缓存只服务于单个网页,任何网页都具有网页缓存,而本地缓存只缓存那些指定缓存的网页。
其次,网页缓存也是不安全、不可靠的,因为我们不知道在网站中到底缓存了哪些页面,以及缓存了网页上的哪些资源。而本地缓存是可靠的,我们可以控制对哪些内容进行缓存,不对哪些内容进行缓存,开发人员还可以用编程的手段来控制缓存的更新,利用缓存对象的各种属性、状态和事件来开发出更为强大的离线应用程序。
manifest文件
Web应用程序的本地缓存是通过每个页面的manifest文件来管理的。manifest文件是一个简单文本文件,在该文件中以清单的形式列举了需要被缓存或不需要被缓存的资源文件的文件名称、以及这些资源文件的访问路径。可以为每一个页面单独指定一个mainifest文件,也可以对整个Web应用程序指定一个总的manifest文件。manifest文件示例如下:
CACHE MANIFEST #文件的开头必须书CACHE MANIFEST #该manifest文件的版本号 #version 7 CACHE: other.html hello.js images/myphoto.jpg NETWORK: http://google.com/xxx NotOffline.jsp * FALLBACK: online.js locale.js CACHE: newhello.html newhello.js
在manifest文件中,第一行必须是“CACHE MANIFEST”文字,以把本文件的作用告知给浏览器,即对本地缓存中的资源文件进行具体设置。同时,真正运行或测试离线Web应用程序的时候,需要对服务器进行配置,让服务器支持text/cache-manifest这个MIME类型(在HTML5中规定manifest文件的MIME类型为text/cache-manifest) 。
在manifest文件中,可以加上注释来进行一些必要的说明或解释,注释行以“#”开始;文件中可以(而且最好)加上版本号,以表示该manifest文件的版本,版本号可以是任何形式的,更新文件时一般也会对该版本号进行更新。
指定资源文件,文件路径可以是相对路径,也可以是绝对路径。指定时每个资源文件为一行。在指定资源文件的时候,可以把资源文件分为三类,分别是“CACHE”、“NETWORK”和“FALLBACK”。
- 在CACHE类别中指定需要被缓存在本地的资源文件。为某个页面指定需要本地缓存的资源文件时,不需要把这个页面本身指定在CACHE类型中,因为如果一个页面具有manifest文件,浏览器会自动对这个页面进行本地缓存。
- NETWORK类别为显式指定不进行本地缓存的资源文件,这些资源文件只有当客户端与服务器端建立连接的时候才能访问。该示例中的“*”为通配符,表示没有在本manifest文件中指定的资源文件都不进行本地缓存。
- FALLBACK类别中指定两个资源文件,每一个资源文件为能够在线访问时使用的资源文件,第二个资源文件为不能在线访问时使用的备用资源文件。
每个类别都是可选的。但是如果文件开头没有指定类别而直接书写资源文件的时候,浏览器把这些资源文件视为CACHE类别,直到看见文件中第一个被书写出来的类别为止,并且允许在同一个manifest文件中重复书写同一类别。
为了让浏览器能够正常阅读该文本文件,需要在Web应用程序页面上的html元素的manifest属性中指定manifest文件的URL地址。指定方法如下:
<!-- 可以为每个页面单独指定一个manifest文件 --> <html manifest="hello.manifest"> </html> <!-- 也可以为整个Web应用程序指定一个总的manifest文件 --> <html manifest="global.manifest"> </html>
通过这些步骤,将资源文件保存到本地缓存区的基本操作就完成了。当要对本地缓存区的内容进行修改时,只要修改manifest文件就可以了。文件被修改后,浏览器可以自动检查manifest文件,并自动更新本地缓存区中的内容。
浏览器与服务器的交互过程
首次访问网站时的交互过程如下:
- 浏览器请求访问网站;
- 服务器返回请求网页,例如:index.html;
- 浏览器解析网页,请求页面上所有资源文件,包括HTML文件、图像文件、CSS文件、JS文件以及manifest文件;
- 服务器返回所有资源文件;
- 浏览器处理manifest文件,请求manifest中所有要求本地缓存的文件,包括index.html页面本身,即使刚才已经请求过这些文件。如果你要求本地缓存所有文件,这将是一个比较大的重复的请求过程;
- 服务器返回所有要求本地缓存的文件;
- 浏览器对本地缓存进行更新,存入包括页面本身在内的所有要求本地缓存的资源文件,并且触发一个事件,通知本地缓存被更新。
现在浏览器已经把本地缓存更新完毕,如果再次打开浏览器访问该网站,而且manifest文件没有被修改过,它们的交互过程如下:
- 浏览器再次请求访问网站;
- 浏览器发现这个页面被本地缓存,于是使用本地缓存中index.html页面;
- 浏览器解析index.html页面,使用所有本地缓存中的资源文件;
- 浏览器向服务器请求manifest文件;
- 服务器返回一个304代码,通知浏览器manifest没有发生变化。
只要页面上的资源文件被本地缓存过,下次浏览器打开这个页面时,总是先使用本地缓存中的资源,然后请求manifest文件。
如果再次打开浏览器时,manifest文件已经被更新过了,那么浏览器与服务器之间的交互过程如下:
- 浏览器再次请求访问网站;
- 浏览器发现这个页面被本地缓存,于是使用本地缓存中的index.html页面;
- 浏览器解析index.html页面,使用所有本地缓存中的资源文件;
- 浏览器向服务器请求manifest文件;
- 服务器返回更新过年manifest文件;
- 浏览器处理manifest文件,发现该文件已被更新,于是请求所有要求进行本地缓存的资源文件,包括index.html页面本身;
- 服务器返回要求进行本地缓存的资源文件;
- 浏览器对本地缓存进行更新,丰入所有新的资源文件。并且触发一个事件,通知本地缓存被更新。
需要注意的是,即使资源文件被修改过了,在上面的第三步中已经装入的资源文件是不会发生变化的,例如图片不会突然变成新的图片,脚本文件也不会突然使用新的脚本文件,也就是说,这时更新过后的本地缓存中的内容还不能被使用,只有重新打开这个页面的时候才会使用更新过后的资源文件。另外,如果不想修改manifest文件中对于资源文件的设置,但是对服务器上请求缓存的资源文件进行了修改,那么可以通过修改版本号的方式来让浏览器认为manifest文件已经被更新过了,以便重新下载修改过的资源文件。
发表评论
-
使用选择器在页面中插入内容
2011-11-08 10:09 0使用选择器来插入文字 使用选择器来插入内容 在CSS2中, ... -
HTML5 绘制图形【4】
2011-11-08 08:39 1725绘制变形图形 坐标变换 绘制图形的时候,我们可能会想要旋转 ... -
CSS3 选择器【2】
2011-11-07 14:30 1161UI元素状态伪类选择器 UI元素状态伪类选择器的共同特征是: ... -
HTML5 绘制图形【3】
2011-11-05 19:28 1352绘制渐变图形 渐变是指在填充时从一种颜色慢慢过渡到另外一种颜 ... -
CSS3 选择器【1】
2011-11-06 12:19 1785选择器概述 选择器是CS ... -
HTML5 绘制图形【2】
2011-11-04 11:42 1470使用路径 绘制圆形 要 ... -
HTML5 绘制图形【1】
2011-11-03 12:48 1583canvas元素基础 canvas元素是HTML5中新增的一 ... -
CSS3 模块化结构
2011-11-03 19:12 1571CSS3中的模块 模块名称 功能描述 Basi ... -
HTML5 获取地理位置信息
2011-11-01 18:12 5470Geolocation API的基本知识 在HTML5中,为 ... -
HTML5 使用Web Worker处理线程
2011-11-01 09:16 4719基础知识 Web Worker是在HTML5中新增的,用来在 ... -
HTML5 Web Sockets通信
2011-10-29 20:15 4194基础介绍 Web Sockets是HTML5提供的在Web应 ... -
HTML5 跨文档消息传输
2011-10-29 19:11 2083基本介绍 HTML5提供了在网页文档之间互相接收与发送信息的 ... -
HTML5 离线应用程序【2】
2011-10-27 20:48 1923applicationCache对象 application ... -
HTML5 本地数据库
2011-10-24 21:03 2649本地数据库的基本概念 ... -
HTML5 Web Storage
2011-10-24 15:51 1660Web Storage简单使用 在HTML5中重新提供了一种 ... -
HTML5 多媒体播放【3】
2011-10-23 10:45 1270video元素和audio元素的方法 play()方法:使 ... -
HTML5 多媒体播放【2】
2011-10-22 21:14 1766音频和视频元素的属性 这两种元素所具有的属性大致相同,介绍如 ... -
HTML5 多媒体播放【1】
2011-10-21 18:58 997video与audio元素基础 在HTML5中,video元 ... -
HTML5 拖放API
2011-10-17 19:43 4995在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖 ... -
HTML5 文件API
2011-10-16 18:49 5080在HTML5中,提供了一个关于文件操作的文件API,通过使用这 ...
相关推荐
少儿编程scratch项目源代码文件案例素材-绝地求生.zip
嵌入式八股文面试题库资料知识宝典-文思创新面试题2010-04-08.zip
一种基于剪切波和特征信息检测的太阳斑点图融合算法.pdf
内容概要:本文详细介绍了并联型有源电力滤波器(APF)在Matlab/Simulink环境下的仿真研究。主要内容涵盖三个关键技术点:一是dq与αβ坐标系下的谐波和无功检测,利用dq变换和FBD技术实现实时检测;二是两相旋转坐标系(dq)与两相静止坐标系(αβ)下的PI控制,通过调整比例和积分环节实现精准控制;三是SVPWM调制方式的应用,通过优化开关时序提升系统效率和性能。文中还提供了详细的仿真介绍文档,包括模型搭建、参数设定以及结果分析。 适合人群:从事电力电子、自动化控制领域的研究人员和技术人员,尤其是对电力滤波器仿真感兴趣的读者。 使用场景及目标:适用于需要深入了解并联型APF工作原理和实现方式的研究人员,旨在通过仿真工具掌握谐波和无功检测、PI控制及SVPWM调制的具体应用。 其他说明:本文不仅提供了理论知识,还结合了实际操作步骤,使读者能够通过仿真模型加深对APF的理解。
Arduino KEY实验例程,开发板:正点原子EPS32S3,本人主页有详细实验说明可供参考。
嵌入式八股文面试题库资料知识宝典-嵌入式C语言面试题汇总(66页带答案).zip
.archivetempdebug.zip
嵌入式系统开发_CH551单片机_USB_HID复合设备模拟_基于CH551单片机的USB键盘鼠标复合设备模拟器项目_用于通过CH551微控制器模拟USB键盘和鼠标输入设备_实现硬
少儿编程scratch项目源代码文件案例素材-剑客冲刺.zip
少儿编程scratch项目源代码文件案例素材-火影.zip
内容概要:本文详细介绍了两极式单相光伏并网系统的组成及其仿真优化方法。前级采用Boost电路结合扰动观察法(P&O)进行最大功率点跟踪(MPPT),将光伏板输出电压提升至并网所需水平;后级利用全桥逆变加L型滤波以及电压外环电流内环控制,确保并网电流与电网电压同频同相,实现高效稳定的并网传输。文中还提供了具体的仿真技巧,如开关频率设置、L滤波参数计算和并网瞬间软启动等,最终实现了98.2%的系统效率和低于0.39%的总谐波失真率(THD)。 适合人群:从事光伏并网系统研究、设计和开发的技术人员,特别是对Boost电路、MPPT算法、逆变技术和双环控制系统感兴趣的工程师。 使用场景及目标:适用于希望深入了解两极式单相光伏并网系统的工作原理和技术细节的研究人员和工程师。目标是在实际项目中应用这些理论和技术,提高光伏并网系统的效率和稳定性。 其他说明:文中提供的仿真技巧和伪代码有助于读者更好地理解和实现相关算法,在实践中不断优化系统性能。同时,注意电网电压跌落时快速切换到孤岛模式的需求,确保系统的安全性和可靠性。
矢量边界,行政区域边界,精确到乡镇街道,可直接导入arcgis使用
嵌入式八股文面试题库资料知识宝典-嵌入式c面试.zip
嵌入式八股文面试题库资料知识宝典-I2C总线.zip
内容概要:本文详细介绍了三种注浆模型——随机裂隙网络注浆模型、基于两相达西定律的注浆模型、基于层流和水平集的注浆扩散模型。首先,随机裂隙网络注浆模型基于地质学原理,模拟裂隙网络发育的实际地质情况,在不同注浆压力下进行注浆作业,以增强地基稳定性和提高承载能力。其次,基于两相达西定律的注浆模型利用数学公式模拟裂隙网络中的流体输送过程,适用于裂隙网络地质条件下的注浆效果分析。最后,基于层流和水平集的注浆扩散模型通过引入层流特性和水平集方法,更准确地模拟注浆过程中的扩散过程。文中还讨论了不同注浆压力对注浆效果的影响,并提出了优化建议。 适合人群:从事岩土工程、地基加固等相关领域的工程师和技术人员。 使用场景及目标:①帮助工程师选择合适的注浆模型和注浆压力;②为实际工程项目提供理论支持和技术指导;③提升地基加固的效果和效率。 其他说明:文章强调了在实际应用中需要结合地质条件、裂隙网络特点等因素进行综合分析,以达到最佳注浆效果。同时,鼓励不断创新注浆工艺和方法,以满足日益增长的地基加固需求。
内容概要:本文详细比较了COMSOL Multiphysics软件5.5和6.0版本在模拟Ar棒板粗通道流注放电现象方面的异同。重点探讨了不同版本在处理电子密度、电子温度、电场强度以及三维视图等方面的优缺点。文中不仅介绍了各版本特有的操作方式和技术特点,还提供了具体的代码实例来展示如何进行精确的仿真设置。此外,文章还讨论了网格划分、三维数据提取和电场强度后处理等方面的技术难点及其解决方案。 适合人群:从事等离子体物理研究的专业人士,尤其是熟悉COMSOL Multiphysics软件并希望深入了解其最新特性的研究人员。 使用场景及目标:帮助用户选择合适的COMSOL版本进行高效、精确的等离子体仿真研究,特别是在处理复杂的Ar棒板粗通道流注放电现象时提供指导。 其他说明:文章强调了在实际应用中,选择COMSOL版本不仅要考虑便捷性和视觉效果,还需兼顾仿真精度和可控性。
嵌入式八股文面试题库资料知识宝典-C and C++ normal interview_8.doc.zip
内容概要:本文详细介绍了在现代通信系统中,抗干扰技术的重要性和具体应用方法。首先阐述了抗干扰技术的背景及其重要性,随后分别讨论了捷变频技术和波形优化技术的具体机制和优势。捷变频技术能快速改变工作频率,防止被干扰源锁定;波形优化技术则通过改进信号波形来提升抗干扰性能。接着,文章探讨了两种技术相结合的协同效应,最后重点介绍了发射信号及接收滤波器联合优化的抗干扰策略(ISRJ),这是一种综合性优化手段,旨在最大化抗干扰效果并提高通信质量。 适合人群:从事通信工程及相关领域的研究人员和技术人员,尤其是关注抗干扰技术的专业人士。 使用场景及目标:适用于需要提升通信系统稳定性和可靠性的场合,如军事通信、卫星通信等领域。目标是帮助技术人员理解和掌握先进的抗干扰技术,应用于实际项目中。 其他说明:文中提到的技术不仅限于理论层面,还涉及具体的实施细节和应用场景,有助于读者深入理解并应用于实践中。
少儿编程scratch项目源代码文件案例素材-吉他英雄.zip
内容概要:本文详细探讨了独立光伏系统的仿真模型及其控制策略。首先介绍了光伏组串模型的搭建方法,利用Simulink中的S函数实现特性曲线,确保高精度输出。接着重点讨论了Boost升压电路的改进型功率环控制策略,通过非线性积分器有效避免了占空比过高的风险,使系统震荡幅度显著降低。对于储能部分,采用双向DCDC转换器,实现了充放电模式间的平滑切换,并通过互补PWM技术增强了硬件死区保护效果。逆变器部分则采用了单极调制方式,减少了开关损耗,并优化了LC滤波参数的设计,确保了低谐波失真率。此外,还设计了一个基于继电器的智能负载模拟系统,能够根据交流电压的变化自动调节负载,提高了仿真的效率和准确性。最后,通过对整个系统的动态优先级管理,使得光伏出力波动时储能系统可以迅速响应,保持直流母线电压稳定。 适合人群:从事光伏系统设计、仿真建模以及电力电子领域的工程师和技术人员。 使用场景及目标:适用于需要深入了解独立光伏系统内部工作原理的研究人员,帮助他们掌握从光伏组串到逆变器各环节的具体实现细节,为实际工程项目提供可靠的理论支持和技术指导。 其他说明:文中提供了大量MATLAB/Simulink代码片段和具体参数设置建议,便于读者理解和复现实验结果。同时强调了不同控制策略之间的对比分析,指出了最优解的选择依据。