只需5步，轻松创建HTML5离线应用
1 – 添加 HTML5 doctype
第一件要做的事情是創建一個符合規范的 HTML5 文檔。HTML5 doctype 相比于 xhtml 版本的 doctype 而言，要簡單明了得多：
<!DOCTYPE html>
<html>
? ...
創建一個名為 index.html 的文檔，或者猛擊這里下載這份示例代碼壓縮包。
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
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
總結
以上是生活随笔為你收集整理的只需5步，轻松创建HTML5离线应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML5教程之-文件拖拽功能实现
- 下一篇： HTML5中的本地数据库-Web SQL