五步创建HTML5离线Web应用

 

  在HTML5提供的所有炫酷功能里,创建离线缓存网页是我最喜欢的一个特性,以下是五步快速创建HTML5离线Web应用的步骤

  1. 第一步:创建一个有效的HTML5文档,HTML5 doctype比xhtml更易于识记。

  创建一个名为index.html的文件,这里学习如何使用CSS3来策划网站布局。

  http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries

  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文档准备好了以后,你唯一还需要做的事情

posted @ 2012-06-27 13:57  CatherineGao  阅读(439)  评论(0编辑  收藏  举报