【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 MANIFESTCACHE:other.htmlhellow.jsimages/myphoto.jpgNETWORK:http://LuLinniu/NotOfflineNotOffline.asp*FALLBACK:online.js locale.jsCACHE:newhellow.htmlnewhellow.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 浏览器请求url2 服务器返回index.htm首页3 浏览器解析index.htm网页，请求页面上所有资源文件4 服务器返回资源文件5 浏览器处理manifest文件，请求manifest中需要缓存的文件，即使请求过亦会再请求6 服务器返回需要缓存的文件7 浏览器对本地缓存进行更新，存入资源文件，并触发一个事件通知本地缓存更新再次打开该URL1 请求url 2 浏览器发现页面被缓存，于是使用本地缓存文件3 解析文件4 浏览器像服务器请求manifest文件5 服务器返回304，通知manifest文件没有变化（若是改变将会有所不同）

applicationCache对象

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

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

swapCache

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

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

applicationCache对象事件

略......

结语

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