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