当前位置： &
& HTML5离线Web应用实战：五步创建成功
HTML5离线Web应用实战：五步创建成功
日 00:00 来源：it168网站 作者：皮丽华 编辑：皮丽华
　& HTML5 IndexedDB:轻量级NoSQL数据库　　IndexedDB是HTML5-WebStorage的重要一环，是一种轻量级NoSQL数据库。　　w3c为IndexedDB定义了很多接口，其中Database对象被定义为IDBDataBase。　　浏览器对象中，实现了IDBFactory的只有indexedDB这个实例。　　五步创建HTML5离线Web应用　　在HTML5提供的所有炫酷功能里，创建离线缓存网页是我最喜欢的一个特性，以下是五步快速创建HTML5离线Web应用的步骤　　1. 第一步：创建一个有效的HTML5文档，HTML5 doctype比xhtml更易于识记。　　创建一个名为index.html的文件，这里学习如何使用CSS3来策划网站布局。　　　　2. 新增.htaccess支持　　我们要创建的缓存页面称为manifest文件，假设你所使用的服务器是Apache，我们在创建文件之前，需要往.htaccess文件新增一个指令。　　打开.htaccess文件，该文件部署在网站的根目录下，新增以下代码：AddType text/cache-manifest .manifest　　该指令可以确保每一个.manifest文件文本高速缓存。如果该文件不存在，整个缓存效果就无法实现，页面也不能实现离线缓存。　　3. 创建.manifest文件　　在我们创建好了.manifest文件后，事情就变得有趣多了。创建好新文件，命名为offline.manifest，嵌入以下代码。CACHE MANIFEST　　#This is a comment　　CACHE　　index.html　　style.css　　image.jpg　　image-med.jpg　　image-small.jpg　　notre-dame.jpg&　　现在你拥有了一个完美的manifest列表。其实原理很简单，在声明CACHE后，你可以列出自己想要离线缓存的文件。这个对于缓存一个简单的网页，已经是绰绰有余了，而HTML5的缓存有其它一些有趣的功能。CACHE MANIFEST　　#This is a comment　　CACHE　　index.html　　style.css　　NETWORK:　　search.php　　login.php　　FALLBACK:　　/api offline.html　　在这个示例中，manifest文件声明了CACHE，用于缓存index.html和style.css。同时，我们声明了NETWORK，用于指定不被缓存的文件，比如登录页面。　　最后声明的是FALLBACK，这个声明允许将用户转入一个指定的页面，比如本例中如果不打算离线查看API资源的话，可以转向Off.html页面。　　4. 将manifest 文件链接到HTML文档中。　　在manifest文件和主要的html文档准备好了以后，你唯一还需要做的事情是将manifest文件链接到html文档中。　　操作方法很简单，只需在html元算中添加manifest 属性，代码如下：　　5. 测试　　一旦完成好以后，可以开始测试了。如果你使用Firefox 3.5+来访问index.html文件，你可以看到下面的图片。　　像其它的浏览器，比如(Chrome, Safari, Android 和 iPhone) 不会弹出文件缓存的相关提示，文件会自动缓存。　　Firefox: 3.5+、Safari: 4.0+、Chrome: 5.0+、Opera: 10.6+、iPhone: 2.1+、Android: 2.0+都对这种技术提供支持，IE不支持。
【内容导航】
技术热点索引
移动嵌入式
阅读过这篇文章的人还看过：
技术开发热议话题HTML5应用程序缓存实现离线Web网页或应用-html5教程-网页制作-壹聚教程网HTML5应用程序缓存实现离线Web网页或应用
HTML5的离线web应用允许我们在脱机时与网站进行交互。这在提高网站的访问速度和制作一款web离线应用上（如HTML5游戏）有一定的用处
HTML5应用程序缓存和浏览器缓存的区别。
（有些）浏览器会主动保存自己的缓存文件以加快网站加载速度。但是要实现浏览器缓存必须要满足一个前提，那就是网络必须要保持连接。如果网络没有连接，即使浏览器启用了对一个站点的缓存，依然无法打开这个站点。只会收到一条错误信息。而使用离线web应用，我们可以主动告诉浏览器应该从网站服务器中获取或缓存哪些文件，并且在网络离线状态下依然能够访问这个网站。
如何实现HTML5应用程序缓存。
实现HTML5应用程序缓存非常简单，只需三步，并且不需要任何API。只需要告诉浏览器需要离线缓存的文件，并对服务器和网页做一些简单的设置即可实现。
&创建一个 cache.manifest 文件，并确保文件具有正确的内容
&在服务器上设置内容类型
&所有的HTML文件都指向 cache.manifest
首先我们需要建立一个名为 cache.manifest 的文件，Windows平台下用记事本即可（也可用其他的IDE）。文件内容如下：
CACHE MANIFEST
index.html
favicon.ico
css/main.css
NETWORK: *
其中 CACHE: 之后的部分为列出我们需要缓存的文件。 NETWORK: 之后可以指定在线白名单，即列出我们不希望离线存储的文件，因为通常它们的内容需要互联网访问才有意义。另外，在此部分我们可以使用快捷方式：通配符*。这将告诉浏览器，应用服务器中获取没有在显示部分中提到的任何文件或URL。需要特别指出的是，上面例子中的注释 v1 很有必要存在。只有当 cache.manifest 文件发生变化时，浏览器才会去更新应用缓存。如果你要更改缓存资源，你必须同时修改此文件中的内容，以便让浏览器知道它们需要更新缓存。你可以对清单文件做任何改动，但大家都认同的最佳实践则是修正版本号（即v*）。
接下来需要在服务器上设置内容类型：
假使你使用的事Apache服务器，在.htaccess文件中添加以下代码：
AddType text/cache-manifest .manifest最后，我们需要将HTML页面指向清单文件。通过设置每一个页面中HTML元素的manifest属性来完成这一步：
&html manifest=&/cache.manifest&&完成这一步后，就完成了web离线缓存的所有步骤。由于浏览的文件内容都没有更改且存储在本地，因此现在网页的打开速度会更快（即使是在线状态也如此）。
需要注意的问题：
&网站的每一个html页面都必须设置html元素的manifest属性。一定要这样做；
&在你的整个网站应用中，只能有一个cache.manifest文件（建议放在网站根目录下）；
&部分浏览器（如IE8-）不支持HTML5离线缓存；
上一页： &&&&&下一页：相关内容html5离线储存,application cache,manifest使用体验
来源：本站原创&
最近在APP里新增一个论坛模块，为了快速地完成，决定将整个论坛模块做成WEB APP，WEB APP最致命的就是用户体验问题，页面跳转和过多的请求，大大影响了加载速度和用户体验，这时候我想到了HTML5的离线储存。
经过简单的了解之后，觉得这个可以有，但很快我又就发现，HTML5离线储存并不适于这次的项目。
原因如下：
一旦页面指定了manifest，那么这个页面就一定被储存下来。如果有一个动态页面，不想缓存页面的内容，只想缓存页面所引用的css,js,img，但抱歉，这个没有办法做到。我想是因为浏览器与服务器既定的交互逻辑导致必须要这样设计，否则我就很不理解设计者了。
2、 page.html?id=1和 page.html?id=2被存储成了两个html不同的页面，想想当用户浏览了1000个不同的贴子的时候，浏览器就下载储存了1000个没有意义的页面。
3、第一次访问page.html?id=1，缓存成功后。再访问
page.html?id=2，不会去读缓存，这是因为由于参数变了，被认为地址不一样，不算是第二次请求，所以请求 page.html?id=2时依然会重新加载 manifest指定的文件 。
4、而我为了快速完成，进出层级时都做成了页面跳转，免不了传很多参数，而且每个贴子不一样的id，所以这种情况下离线缓存基本上没有意义，因为相当大部份请求都属于第一次访问。
5、再且，根据网上的资料，进行离线储存时会再次下载一次对应的数据，意思就是说，第一次访问时，使用了离线储存技术的页面加载时所消耗的时间比没有使用这个技术的页面要多，而且耗的流量更大。
因此， manifest极不适合含有动态参数页面跳转的情况下使用，最好是一个页面，然后完全的ajax请求。
另附带资料:
一、应用场景
我们通常使用浏览器缓存在用户磁盘上存储web单页，在用户再次浏览的时候已节省带宽，但即便这样，依然无法在没有Internet的情况下访问Web。为了让web应用程序在离线状态也能被访问。html5通过application cache API提供离线存储功能。前提是你需要访问的web页面至少被在线访问过一次。
离线本地存储和传统的浏览器缓存有什么不同呢？
1、浏览器缓存主要包含两类：
a.缓存协商：Last-modified,Etag
浏览器向服务器询问页面是否被修改过，如果没有修改就返回304，浏览器直接浏览本地缓存文件。否则服务器返回新内容。
b.彻底缓存：cache-control,Expires
通过Expires设置缓存失效时间，在失效之前不需要再跟服务器请求交互。
2、离线存储为整个web提供服务，浏览器缓存只缓存单个页面；
3、离线存储可以指定需要缓存的文件和哪些文件只能在线浏览，浏览器缓存无法指定；
4、离线存储可以动态通知用户进行更新。
二、如何实现
离线存储是通过manifest文件来管理的，需要服务器端的支持，不同的服务器开启支持的方式也是不同的。
CACHE MANIFEST//必须以这个开头 version 1.0 //最好定义版本，更新的时候只需修改版本号 CACHE:
online.html offline.html
CACHE指定需要缓存的文件；NETWORK指定只有通过联网才能浏览的文件，*代表除了在CACHE中的文件；FALLBACK每行分别指定在线和离线时使用的文件
要让manifest管理存储，还需要在html标签中定义manifest属性，如下：
&!DOCTYPE HTML& &html lang="en" manifest='test.manifest'& &head& &meta charset="UTF-8"& &title&&/title& &/head& &body& &/body& &/html&
最后别忘了，这些应用需要服务器支持。
Apache服务器开启支持的方式是：在conf/mime.types中添加一段代码：
test/cache-manifest manifest
IIS服务器开启方式：
右键--HTTP---MIME映射下，单击文件类型---新建---扩展名输入manifest，类型中输入test/cache-manifest
三、通过JS动态控制更新
applicationCache对象提供个了一些方法和事件，管理离线存储的交互过程。通过在firefox8.0的控制台中输入window.applicationCache可以看到这个对象的所
有属性和事件方法。
applicationCache.onchecking = function(){ //检查manifest文件是否存在 }
applicationCache.ondownloading = function(){ //检查到有manifest或者manifest文件
//已更新就执行下载操作
//即使需要缓存的文件在请求时服务器已经返回过了 }
applicationCache.onnoupdate = function(){ //返回304表示没有更新，通知浏览器直接使用本地文件 }
applicationCache.onprogress = function(){ //下载的时候周期性的触发，可以通过它
//获取已经下载的文件个数 }
applicationCache.oncached = function(){ //下载结束后触发，表示缓存成功 }
application.onupdateready = function(){ //第二次载入，如果manifest被更新
//在下载结束时候触发
//不触发onchched
alert("本地缓存正在更新中。。。"); if(confirm("是否重新载入已更新文件")){
applicationCache.swapCache();
location.reload();
applicationCache.onobsolete = function(){ //未找到文件，返回404或者401时候触发 }
applicationCache.onerror = function(){ //其他和离线存储有关的错误 }
四、浏览器与服务器的交互
曾经有面试题是这样的："描述在浏览器的地址栏中输入: 后发生了什么？"。
1、服务端返回baidu页面资源，浏览器载入html
2、浏览器开始解析
3、发现link，发送请求载入css文件
4、浏览器渲染页面
5、发现图片，发送请求载入图片，并重新渲染
6、发送请求js文件，阻塞渲染。如果js对dom进行了操作，则会进行rerender
对于支持离线存储的页面，浏览器和服务器的交互又是如何呢？
首次载入页面：
1-6 ： 同上
7：请求页面中需要缓存的页面和数据，就算在之前的步骤中已经请求过（这是个耗能的地方）
8：服务器返回所有请求文件，浏览器进行本地存储
再次载入页面：
1：发送请求
2：使用本地存储的离线文件
3：解析页面
4：请求服务端的manifest文件，判断是否有改变，返回304则表示没有改变进入步骤5，否则进入步骤6（jaykon:这里是不是错了？304时会进入6才对）
5：进入首次载入页面的7-8（jaykon:这里注意，就算此次请求manifest文件更新了，也只是在页面宣染完成后重新下载里面路径的文件，这些新文件要在下一次访问时才会体现出来，比如再次刷新时。）
6：使用本地存储，不重新请求
最近在APP里新增一个论坛模块,为了快速地完成,决定将整个论坛模块做成WEB APP,WEB APP最致命的就是用户体验问题,页面跳转和过多的请求,大大影响了加载速度和用户体验,这时候我想到了HTML5的离线储存. 经过简单的了解之后,觉得这个可以有,但很快我又就发现,HTML5离线储存并不适于这次的项目. 原因如下: 1. 一旦页面指定了manifest,那么这个页面就一定被储存下来.如果有一个动态页面,不想缓存页面的内容,只想缓存页面所引用的css,js,img,但抱歉,这个没有办法做到.我
HTML5带来了application cache这一新特性,好多文档和书籍介绍了使用它来进行离线应用的开发,由于自己做的手机应用还得面临弱爆的GPRS网络,也考虑使用以下来改善用户的体验性,使用过程中也遇到了一些困惑和不解,比如他的FALLBACK功能就没有实现,还好这个功能对我们的应用来说不是那么的非用不可,时间也紧张,就没有深究它了,下面说一下Application Cache实现离线的基本步骤(所有代码在chrome和firefox上测试通过). 1.首先需要一个manifest文件来保
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源. HTML5 Cache Manifest 实例 下面的例子展
前言 使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本. HTML5引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. 应用程序缓存为应用带来三个优势: 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源. 原理和环境 如上面提到的HTML5的离线存储是基于一个新建的.appcache文件的,通过这个文件上的解析清单离线存
HTML5 是目前正在讨论的新一代 HTML 标准,它代表了现在 Web 领域的最新发展方向.在 HTML5 标准中,加入了新的多样的内容描述标签,直接支持表单验证.视频音频标签.网页元素的拖拽.离线存储和工作线程等功能.其中一个新特性就是对离线应用开发的支持. 在开发支持离线的 Web 应用程序时,开发者通常需要使用以下三个方面的功能: 离线资源缓存:需要一种方式来指明应用程序离线工作时所需的资源文件.这样,浏览器才能在在线状态时,把这些文件缓存到本地.此后,当用户离线访问应用程序时,这些资源
Using HTML5 Application Cache to Create Offline Web Applications View more presentations from Peter Lubbers 来源: http://www.slideshare.net/peterlubbers/using-html5-application-cache-to-create-offline-web-applications
对于web app来说,离线应用功能已经越来越重要.诚然,浏览器本身就有缓存机制,但是,这些缓存机制不够可靠,可能并不会按你所想要的方式运行.HTML5则通过ApplicationCache接口处理了离线应用中的一些问题. 使用这个接口让你的应用拥有三方面的优势: 离线浏览--用户在不能联网的时候依然能浏览整个站点 高速--缓存资源是存储在本地的,因此能更快加载. 更小的服务器负载--浏览器只需要从服务器端下载有改变的资源即可,相同资源不需要重复下载. Application Cache(或 A
传统的Web应用程序有一个很大的症结是当用户的网络连接不好时,应用会加载失败,为了 解决这一问题,HTML5中引入了Web的离线工作的功能.离线功能使得Web应用程序类似于本机应用程序,当断开网络连接时可以继续浏览未浏览完成的内 容,离线功能的另一个好处是可以永久缓存静态的内容,而没有缓存过期的限制,这样很大程度上加速了网页的加载速度. 离线应用的创建 不同于传统的缓存机制,HTML5定义了一套独立的缓存机制,有一个单独的文件来记录要缓存的文件列表,这就意味着用户可以自己决定哪些文件需要缓 存.
作者简介:Malcolm Sherida是Microsoft在ASP.NET方面的awarded MVP,精通ASP和Telerik,经常在澳大利亚和新西兰的会议以及用户组中做报告.作为一个长期使用ASP.NET的人,他关注Web技术超过10年了.他喜欢使用ASP.NET MVC工作,并喜欢使用jQuery和Javascript.他也为SitePoint和其他一些网站写一些关于ASP.NET的技术文章. 最近,我发布了一篇博文,内容是关于HTML5的一个新特性,博文名字是&通过应用程序缓存实现离
在HTML5中新增了一个API,为离线Web应用程序的开发提供了可能性.为了让Web应用程序在离线状态时也能正常工作,就必须要把所有构成Web应用程序的资源文件,诸如:HTML文件.CSS文件.JavaScript脚本文件等放在本地缓存中,当服务器没有和Internet建立连接的时候,也可以利用本地缓存中的资源文件来正常运行Web应用程序. 本地缓存与浏览器网页缓存的区别 首先,本地缓存是为整个Web应用程序服务的,而浏览器的网页缓存只服务于单个网页,任何网页都具有网页缓存,而本地缓存只缓存那些
Application Cache Application Cache 使网页能够在本地缓存(或保存)资源,包括图像.脚本库和样式表等.此外,AppCache 还允许使用标准的统一资源标识符 (URI) 表示法从缓存内容中提供 URL. 节指定将被存储与本地的资源清单文件 CACHE MANIFEST CACHE: # 指定将被存储在本地的资源 script/library.js css/stylesheet.css images/figure1.png FALLBACK: # 节指定当其他资源
Cache Overview: Cache can improve performance and reduce resource consumption Web application in a large speed difference between the 5 and the cache program 1. Read the file system& to read the disk cache program: the operating system disk cache can
一. 前言 微软之所以能够在过去几十年间称霸IT业,主要是凭借一项无法超越的优势:Windows操作系统,目前快速发展的移动设备成为IT业关注的重点,有可能移动互联网应用将会是IT业下一个高速增长点(也可能是泡沫),犹如2001年的互联网一般.而在移动操作系统上,现在看来微软的Windows Mobile操作系统完全不值一提,就算是其最新的WP7也不再受人关注,现在大家的目光都集中在两家重量级公司Google和Apple出品的Android和iOS移动操作系统上,其他的什么MeeGo.RIM.S
不同平台的生态圈.技术障碍等壁垒阻碍了开发者快速发展,而HTML5虽被寄予厚望,但目前还缺乏有说服力的产品,HTML5的潜能仍需在探索中被继续挖掘. Beau Hindman在解析自己理想的游戏状态时,认为好的游戏除了在创意环节(Originality,包括题材.玩法.交互方式).游戏玩法环节(Gameplay).风格类型(Style).声效环节(Great Music)让用户有更好的体验外,适配性(Flexibility)也将成为一个核心的考量环节,用户希望能够在随时有游戏意愿的情况下就能获取
Beau Hindman在解析自己理想的游戏状态时,认为好的游戏除了在创意环节(Originality,包括题材.玩法.交互方式).游戏玩法环节(Gameplay).风格类型(Style).声效环节(Great Music)让用户有更好的体验外,适配性(Flexibility)也将成为一个核心的考量环节,用户希望能够在随时有游戏意愿的情况下在就近能获取的设备上进行游戏. 原文发表于&程序员&杂志2012年2月刊 当然在目前的条件下,不管是用户的游戏需求还是开发者的游戏发行布局,Beau Hin
什么是语义化? &语义化是指用合理HTML标记以及其特有的属性去格式化文档内容. 语义化的(X)HTML文档有助于提升你的网站对访客的易用性,比如使用PDA.文字浏览器以及残障人士将从中受益.对于搜索引擎或者爬虫软件来说,则有助于它们建立索引,并可能给予一个较高的权值. 事实上SEO最有效的一种办法,就是对网页的HTML结构进行重构,实质上就是语义化.& 语义化存在的意义 和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息,比如h1~h6.strong用于不同权重的标题:隐藏文本等等
有人在Stack Overflow上发问,动手开发网站之前,需要知道哪些事情,这里简单为大家整理下,方便需要的朋友 不出意料地,他得到了一大堆回答. 通常情况下,你需要把所有人的发言从头到尾读一遍.但是,Stack Overflow有一个很贴心的设计,它允许在问题下方开设一个wiki区,让所有人共同编辑一个最佳答案.于是,就有了下面这篇文章,一共总结出六个方面共计61条&网站开发须知&. 我发现,这种概述性的问题,最适合这种集合群智.头脑风暴式的回答方式了.这也是我第一次觉得,Stac
HTML5离线存储 初探 本文主要探讨如下内容: 一.离线存储的作用:二.离线存储的实现:三.window.applicationCache :四.示范应用. 一.离线存储的作用 1.减少网络流量,避免对同一资源的多次请求: 2.即时显示数据,应用程序访问本地的缓存数据,快速显示数据: 3.临时存储,这点与cookie功能类似,但是可以封堵数据泄露. 二.离线存储的实现 离线存储的实现需要使用到名单文件,即网络应用程序在失去网络连接时需访问的所有资源的列表.为了引导下载进程并缓存这些资源,需要使
HTML5的离线应用功能可以使得WebApp即使在网络断开的情况下仍能正常使用这是个非常有用的功能,但如何使Webivew支持HTML5离线应用功能呢,需要的朋友可以参考下 HTML5的离线应用功能可以使得WebApp即使在网络断开的情况下仍能正常使用,这是个非常有用的功能.近来工作中也要用到HTML5离线应用功能,由于是在Android平台上做,所以自然而然的选择Webview来解析网页.但如何使Webivew支持HTML5离线应用功能呢,经过反复摸索和上网查找资料,反复做试验终于成功了. 首
对Web开发者和设计者来说,离线浏览已经越来越重要了.能让用户离线浏览一直是站点设计的目标,但却很难实现.当我们进入到HTML5的时代,这种情形却发生了改变.你可以利用应用程序缓存(ApplicationCache)接口实现这一目标了. 使用应用程序缓存,你可以指定哪一个文件是浏览器缓存保留的并提供给用户离线使用的.这时候你的站点工作起来就像是用户在线一样,并且他们不会感觉到和真正在线使用有任何差异. 那么,哪一部分文件是浏览器要保存的呢?这一切都定义在缓存清单文件(the cache mani> 博客详情
最近在APP里新增一个论坛模块，为了快速地完成，决定将整个论坛模块做成WEB APP，WEB APP最致命的就是用户体验问题，页面跳转和过多的请求，大大影响了加载速度和用户体验，这时候我想到了HTML5的离线储存。
经过简单的了解之后，觉得这个可以有，但很快我又就发现，HTML5离线储存并不适于这次的项目。
原因如下：
一旦页面指定了manifest，那么这个页面就一定被储存下来。如果有一个动态页面，不想缓存页面的内容，只想缓存页面所引用的css,js,img，但抱歉，这个没有办法做到。我想是因为浏览器与服务器既定的交互逻辑导致必须要这样设计，否则我就很不理解设计者了。
page.html?id=1和
page.html?id=2被存储成了两个html不同的页面，想想当用户浏览了1000个不同的贴子的时候，浏览器就下载储存了1000个没有意义的页面。
3、第一次访问page.html?id=1，缓存成功后。再访问&
page.html?id=2，不会去读缓存，这是因为由于参数变了，被认为地址不一样，不算是第二次请求，所以请求
page.html?id=2时依然会重新加载
manifest指定的文件
4、而我为了快速完成，进出层级时都做成了页面跳转，免不了传很多参数，而且每个贴子不一样的id，所以这种情况下离线缓存基本上没有意义，因为相当大部份请求都属于第一次访问。
5、再且，根据网上的资料，进行离线储存时会再次下载一次对应的数据，意思就是说，第一次访问时，使用了离线储存技术的页面加载时所消耗的时间比没有使用这个技术的页面要多，而且耗的流量更大。
manifest极不适合含有动态参数页面跳转的情况下使用，最好是一个页面，然后完全的ajax请求。
另附带资料:
一、应用场景
& & &我们通常使用浏览器缓存在用户磁盘上存储web单页，在用户再次浏览的时候已节省带宽，但即便这样，依然无法在没有Internet的情况下访问Web。为了让web应用程序在离线状态也能被访问。html5通过application cache API提供离线存储功能。前提是你需要访问的web页面至少被在线访问过一次。
& & 离线本地存储和传统的浏览器缓存有什么不同呢？
& & 1、浏览器缓存主要包含两类：
& & & & &a.缓存协商：Last-modified,Etag
& & & & & & & &浏览器向服务器询问页面是否被修改过，如果没有修改就返回304，浏览器直接浏览本地缓存文件。否则服务器返回新内容。
& & & & &b.彻底缓存：cache-control,Expires
& & & & & & & &通过Expires设置缓存失效时间，在失效之前不需要再跟服务器请求交互。
& &2、离线存储为整个web提供服务，浏览器缓存只缓存单个页面；
& &3、离线存储可以指定需要缓存的文件和哪些文件只能在线浏览，浏览器缓存无法指定；
& &4、离线存储可以动态通知用户进行更新。
二、如何实现
& & 离线存储是通过manifest文件来管理的，需要服务器端的支持，不同的服务器开启支持的方式也是不同的。
CACHE MANIFEST//必须以这个开头 version 1.0 //最好定义版本，更新的时候只需修改版本号 CACHE:
online.html offline.html
& & CACHE指定需要缓存的文件；NETWORK指定只有通过联网才能浏览的文件，*代表除了在CACHE中的文件；FALLBACK每行分别指定在线和离线时使用的文件
& & 要让manifest管理存储，还需要在html标签中定义manifest属性，如下：
&!DOCTYPE HTML& &html lang="en" manifest='test.manifest'& &head& &meta charset="UTF-8"& &title&&/title& &/head& &body& &/body& &/html&
& & 最后别忘了，这些应用需要服务器支持。
& & Apache服务器开启支持的方式是：在conf/mime.types中添加一段代码：
& & & & & & test/cache-manifest manifest
& & IIS服务器开启方式：
& & & & & & 右键--HTTP---MIME映射下，单击文件类型---新建---扩展名输入manifest，类型中输入test/cache-manifest
&三、通过JS动态控制更新
& & applicationCache对象提供个了一些方法和事件，管理离线存储的交互过程。通过在firefox8.0的控制台中输入window.applicationCache可以看到这个对象的所 &&
& & 有属性和事件方法。
applicationCache.onchecking = function(){ //检查manifest文件是否存在 }
applicationCache.ondownloading = function(){ //检查到有manifest或者manifest文件
//已更新就执行下载操作
//即使需要缓存的文件在请求时服务器已经返回过了 }
applicationCache.onnoupdate = function(){ //返回304表示没有更新，通知浏览器直接使用本地文件 }
applicationCache.onprogress = function(){ //下载的时候周期性的触发，可以通过它
//获取已经下载的文件个数 }
applicationCache.oncached = function(){ //下载结束后触发，表示缓存成功 }
application.onupdateready = function(){ //第二次载入，如果manifest被更新
//在下载结束时候触发
//不触发onchched
alert("本地缓存正在更新中。。。"); if(confirm("是否重新载入已更新文件")){
applicationCache.swapCache();
location.reload();
applicationCache.onobsolete = function(){ //未找到文件，返回404或者401时候触发 }
applicationCache.onerror = function(){ //其他和离线存储有关的错误 }
&四、浏览器与服务器的交互
& & & 曾经有面试题是这样的："描述在浏览器的地址栏中输入: 后发生了什么？"。
& & & 1、服务端返回baidu页面资源，浏览器载入html
& & & 2、浏览器开始解析
& & & 3、发现link，发送请求载入css文件
& & & 4、浏览器渲染页面
& & & 5、发现图片，发送请求载入图片，并重新渲染
& & & 6、发送请求js文件，阻塞渲染。如果js对dom进行了操作，则会进行rerender
& & & 对于支持离线存储的页面，浏览器和服务器的交互又是如何呢？
& & &&首次载入页面：
& & & 1-6 ： 同上
& & & &7：请求页面中需要缓存的页面和数据，就算在之前的步骤中已经请求过（这是个耗能的地方）
& & & &8：服务器返回所有请求文件，浏览器进行本地存储
& & &&再次载入页面：
& & & 1：发送请求
& & & 2：使用本地存储的离线文件
& & & 3：解析页面
& & & 4：请求服务端的manifest文件，判断是否有改变，返回304则表示没有改变进入步骤5，否则进入步骤6（jaykon:这里是不是错了？304时会进入6才对）
& & & 5：进入首次载入页面的7-8（jaykon:这里注意，就算此次请求manifest文件更新了，也只是在页面宣染完成后重新下载里面路径的文件，这些新文件要在下一次访问时才会体现出来，比如再次刷新时。）
& & & 6：使用本地存储，不重新请求
人打赏支持
码字总数 11112
支付宝支付
微信扫码支付
打赏金额: ￥
已支付成功
打赏金额: ￥