开发者社区> 范大脚脚> 正文

【HTML5初探之离线应用】如何打造零请求、无流量的网站?

简介:
+关注继续查看
导航

【初探HTML5之使用新标签布局】用html5布局我的博客页!

【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放

【HTML5初探之绘制图像(上)】看我canvas元素引领下一代web页面

【HTML5初探之绘制图像(下)】看我canvas元素引领下一代web页面

【HTML5初探之多媒体元素】视频播放HTML5、Flash谁才是王道?

【HTML5初探之本地存储】如果没有数据库。。。

【HTML5初探之离线应用】如何打造零请求、无流量的网站?

【HTML5初探之通信API】跨域门槛不再高、数据推送不是梦

【HTML5初探之Web Workers】网页也能多线程

【HTML5初探之Geolocation API】让我们来回去地理信息

 

关于地震

一个不幸的消息,今天雅安发生了7级地震,我在成都这边,震感很强。。。早上8点左右,我穿着内裤惊醒,正遇着要去上班的小姨子(女朋友出差)。

于是我欢乐的将她拥入怀中,走到阳台上,小姨子惊叫着,我也有点不安......感受这一大自然带来的震撼!!!虽说怀拥美人,但我脚仍然忍不住的发抖。

30秒左右地震大概结束,我于是放开了小姨子,回到了床上,本想继续睡觉,但一会动一下,一会抖一下,我都分不清是我在发抖还是大地在发抖了。。。。。。

不知从何时起,我也变成非常宅了,今天硬生生的没有出门。。。甚至地震时候都没下楼去。。。。好吧我真是服了自己了。

最后希望这次地震快点过去,经历了汶川大地震,我们对地震带来的伤害与不安了解深刻,也希望雅安同胞的损失可以小点,这一震多少人的努力又将白费啊!

前言

今天Web应用程序已经很复杂了,以现在的发展,会将越来越复杂,但他有一个致命缺点,不能脱离internet链接,因此在HTML中新增了一API,

它使用一个本地存储机制很好地解决了这个问题,为离线web应用铺平了道路。

本地缓存于浏览器缓存

复制代码
本地缓存是为整个web应用程序服务
浏览器缓存只对单个网页服务

任何网页都具有网页缓存
本地缓存只缓存那些你指定缓存的页面

网页缓存不可靠、不安全,因为我们不知道网站中到底缓存了哪些页面、哪些资源
本地缓存可以控制对哪些内容进行缓存
复制代码
manifest文件

web应用程序本地缓存是通过每个页面的manifest文件来管理的,manifest是一简单文本,在该文件中以清单的形式列举了需要被缓存的不需要被缓存的文件的名字、路径。

可以为每个页面单独指定manifest也可以为整个应用程序指定,例我们为hello.htm的设置:

复制代码
CACHE MANIFEST
CACHE:
other.html
hellow.js
images/myphoto.jpg
NETWORK:
http://LuLinniu/NotOffline
NotOffline.asp
*
FALLBACK:
online.js locale.js
CACHE:
newhellow.html
newhellow.js
复制代码
在manifest文件中,第一行必须是CACHE MANIFEST,以把文本的作用告诉浏览器,即对本地缓存中的资源文件进行具体设置。
同时真正运行离线web应用程序时,需要对服务器进行配置,让服务器支持text/cache-manifest这个mime类型。

在指定文件源文件时可以把资源文件分为三类,CACHE、NETWORK、FALLBACK

复制代码
在CACHE类别中指定需要被缓存在本地的资源文件,为某个页面指定需要本地缓存的资源文件时,不需要把这个页面本身指定在CACHE类别中,
因为如果一个页面具有manifest文件,浏览器会自动对该页面进行本地缓存

NETWORK类别为显式指定不进行缓存的资源文件,这些文件只有建立服务器端链接才能访问,本例使用通配符*表示没有进行记录的都不缓存

FALLBACK类别中的每行中指定两个资源文件,第一个资源文件为能够在线访问时使用的资源文件,第二个为不能在线访问时使用的本地缓存文件
复制代码
浏览器与服务器交互过程

当使用离线web应用程序进行工作时,有必要了解浏览器与服务器之间的交互过程:

复制代码
比如一个http://LuLingniu,以index.htm为主页,该主页使用index.manifest,
在文件中缓存index.htm,hello.js,hello.jpg,首次访问时流程如下:
1 浏览器请求url
2 服务器返回index.htm首页
3 浏览器解析index.htm网页,请求页面上所有资源文件
4 服务器返回资源文件
5 浏览器处理manifest文件,请求manifest中需要缓存的文件,即使请求过亦会再请求
6 服务器返回需要缓存的文件
7 浏览器对本地缓存进行更新,存入资源文件,并触发一个事件通知本地缓存更新

再次打开该URL
1 请求url 
2 浏览器发现页面被缓存,于是使用本地缓存文件
3 解析文件
4 浏览器像服务器请求manifest文件
5 服务器返回304,通知manifest文件没有变化(若是改变将会有所不同)
复制代码
applicationCache对象

该对象代表了本地缓存,可以用它来通知用户本地缓存已经被更新,也允许手动更新本地缓存。

前面当浏览器对本地缓存做了更新装入新资源文件时,会触发applicationCache对象的updateready事件,通知本地缓存已被修改,然后提示用户手动刷新页面。

swapCache

swapCache方法用来手动执行本地缓存的更新,它只能在applicationCache对象的updateReady事件触发时调用,

即当资源文件发生改变时,可使用此方法手工缓存更新。

applicationCache对象事件

略......

结语

不知是地震原因,还是这章知识点我没有看懂的原因,今天干事情就真没什么激情了。。。。。暂时到这吧。

 

 

您可以考虑给小钗发个小额微信红包以资鼓励 




本文转自叶小钗博客园博客,原文链接:http://www.cnblogs.com/yexiaochai/archive/2013/04/20/3032223.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20046 0
Https网站中请求Http内容
Https网站中无法请求Http资源(静态资源、接口等) 分析 解决方法
37 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23533 0
备忘:用fiddler搭一个请求响应器
最近工作中发现美国的服务器响应慢,影响工作效率。就在想办法。突然发现fiddler可以帮我解决这个问题。AutoResponder功能可以帮我们做到。在其中设置一些请求,比如:http://xxxx.com/, 然后编辑response,希望返回什么内容,可以用一个编辑器编辑。
847 0
.Net网站不能预编译以及不能请求的调试过程
公司内部的一个网站,Aspx的,最近莫名其妙的出现一个问题: file 'soLog.aspx' has not been pre-compiled,and cannot be requested.   这个问题只有在网站发布到服务器之后才会出现,本地一切正常,但不是每一个页面都有这一个问题...
581 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
13015 0
+关注
3656
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载