【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,如需转载请自行联系原作者
相关文章
|
9天前
动态粒子发射404网站HTML源码
动态粒子发射404网站HTML源码,粒子内容可以进行修改,默认是4,0数字还有一个页面不存在英文,可以自行修改,喜欢的朋友可以拿去使用,源码是html,记事本打开修改即可,鼠标双击可以运行
18 0
动态粒子发射404网站HTML源码
|
1月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
44 3
|
1月前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
32 2
|
2月前
好看的html网站维护源码
好看的html网站维护源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,
45 3
好看的html网站维护源码
|
2月前
|
设计模式 前端开发 Java
Java与HTML的深度融合:技术解析与应用实践
Java与HTML的深度融合:技术解析与应用实践
405 1
|
2月前
|
前端开发 JavaScript
HTML图像标签的深入解析与应用
HTML图像标签的深入解析与应用
30 1
|
2月前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
2月前
|
存储 移动开发 缓存
HTML5 的离线储存怎么使用,工作原理能不能解释一下?
HTML5 的离线储存怎么使用,工作原理能不能解释一下?
25 2
|
2月前
|
前端开发 JavaScript 搜索推荐
【专栏:HTML 与 CSS 前端技术趋势篇】HTML 与 CSS 在 Web 组件化中的应用
【4月更文挑战第30天】本文探讨了HTML和CSS在Web组件化中的应用及其在前端趋势中的重要性。组件化提高了代码复用、维护性和扩展性。HTML提供组件结构,语义化标签增进可读性,支持用户交互;CSS实现样式封装、布局控制和主题定制。案例展示了导航栏、卡片和模态框组件的创建。响应式设计、动态样式、CSS预处理器和Web组件标准等趋势影响HTML/CSS在组件化中的应用。面对兼容性、代码复杂度和性能优化挑战,需采取相应策略。未来,持续发掘HTML和CSS潜力,推动组件化开发创新,提升Web应用体验。
|
2月前
|
前端开发 测试技术 定位技术
【专栏:HTML 与 CSS 实战项目篇】构建一个企业级网站:HTML 与 CSS 实战
【4月更文挑战第30天】本文介绍了使用HTML和CSS构建企业级网站的实战步骤,包括项目概述、页面结构设计、HTML结构搭建、CSS样式设计、具体页面实现、优化与提升。通过合理布局、美观样式和响应式设计,创建现代、简洁的网站,包含主页、关于我们、产品展示、新闻动态和联系我们等页面。优化图片和代码,确保性能,助力企业在数字时代树立良好形象并提升沟通效率。