从这里开始
1 – 添加 HTML5 doctype
第一件要做的事情是创建一个符合规范的 HTML5 文档。HTML5 doctype 相比于 xhtml 版本的 doctype 而言，要简单明了得多：
<!DOCTYPE html> <html> ...
创建一个名为 index.html 的文档，或者猛击这里下载这份示例代码压缩包。关于 HTML5 的缓存请详细参考 The cache manifest syntax 章节。
2 – 添加 .htaccess 支持
1、给http服务器加上manifest文件的MINI类型（以下方法都是针对apache服务器）
HTML5离线应用所需的minifest文件的MIME类型为text/cache-manifest，你需要在所使用的web服务器中添加如下文件和MIME类型的映射关系，对于apache需要在mime.types文件中加入如下配置：
text/cache-manifest manifest
我们需要创建用于缓存页面的 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 image-med.jpg image-small.jpg notre-dame.jpg
现在这份 manifest 文件已经能够完美工作了。原理很简单：在 CACHE 声明之后，罗列出所有需要缓存的文件。这对于缓存简单页面已经来说足够。但是 HTML5 缓存还有更多可能。
比如，考虑以下 manifest 文件：
CACHE MANIFEST #This is a comment CACHE index.html style.css NETWORK: search.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 文件，会看到以下浏览器提示信息：
其他高级浏览器不会提醒是否允许缓存，而是默认自动缓存。
浏览器兼容情况参考：
- IE: 不支持
- Firefox: 3.5+
- Safari: 4.0+
- Chrome: 5.0+
- Opera: 10.6+
- iPhone: 2.1+
- Android: 2.0+
英文原稿：How to create offline HTML5 web apps in 5 easy steps | CatsWhoCode
翻译整理：5 步骤创建 HTML5 离线应用 | 芒果小站
转载自 <a href="http://www.mangguo.org/create-offline-html5-web-apps-in-5-easy-steps/" title="5 步骤创建 HTML5 离线应用" rel="bookmark">5 步骤创建 HTML5 离线应用 | 芒果小站</a>