霜天部落 | 关注LAMP高性能、高并发架构的设计与研究

5步骤创建HTML5离线应用

使用HTML5创建离线应用,只需简单5步即可。以下是步骤说明:

1、添加 HTML5 doctype

第一件要做的事情是创建一个符合规范的 HTML5 文档。
HTML5 doctype 相比于 xhtml 版本的 doctype 而言,要简单明了得多:

<!DOCTYPE html>
<html>

创建一个名为 index.html 的文档。关于 HTML5 的缓存请详细参考 The cache manifest syntax 章节。

2、添加 .htaccess 支持

我们需要创建用于缓存页面的 manifest 清单文件。但在此之前,先要在 .htaccess 文件中添加以下代码:

AddType text/cache-manifest .manifest

该指令可以确保每个 manifest 文件为 text/cache-manifest MIME 类型。如果 MIME类型不对,那么整个清单将没有任何效果,页面将无法离线使用。

3、创建 manifest 文件

现在我们就来创建这个 manifest 清单文件,事情将会更加有趣。新建一个文本文档并另存名为 offline.manifest,然后粘贴以下代码,稍后我会解释。

CACHE MANIFEST
#This is a comment

CACHE
index.html
style.css
image.jpg
demo.js
common.js

现在这份 manifest 文件已经能够完美工作了。原理很简单:在 CACHE 声明之后,罗列出所有需要缓存的文件。这对于缓存简单页面已经来说足够。但是 HTML5 缓存还有更多可能。

比如,考虑以下 manifest 文件:

CACHE MANIFEST
#This is a comment

CACHE
index.html
style.css

NETWORK:
index.php
login.php

FALLBACK:
/api offline.html

其中 CACHE 声明用于缓存 index.html 和 style.css 文件。同时 NETWORK 声明用于指定无需缓存的文件,比如登录页面。

最后一个是 FALLBACK 声明,这个声明允许你在资源不可用的情况下,将用户重定向到特定文件,这个示例代码中是 offline.html。

4、关联 manifest 文件到 html 文档

现在,manifest 文件和 html 文档都已就绪。唯一需要做的是将 manifest 文件关联到 html 文档。

使用 html 元素的 manifest 属性:

<html manifest=”/offline.manifest”>

5、测试一下

完成后,使用 Firefox 3.5+ 本地访问 index.html 文件,会看到以下浏览器提示信息:

manifest

其他高级浏览器不会提醒是否允许缓存,而是默认自动缓存。