一、manifest
MIME TYPE：text/cache-manifest
需要由你創建的：NAME.manifest
作用：主要是配置需要緩存的文件
二、實現
在服務器上添加MIME TYPE支:
比如 Apache 中可在 .htaccess 中添加：
AddType text/cache-manifest manifest
創建 NAME.manifest:
其中第一行的 CACHE MANIFEST 標識是一定要有的（測試時發現火狐不加也能緩存成功，但不知是否有其他影響）；
CACHE / NETWORK / FACKBACK 三個關鍵字用於不同功能，CACHE 緩存；NETWORK 指不想緩存的頁面；FALLBACK 是指當沒有響應時的替代方案，比如我想請求某個頁面，但這個頁面的服務器掛了，那麼，我可以顯示另外一個指定的頁面；
文件編碼最好使用utf-8；
行開頭“#”是註釋；
[plain] view plain copy
CACHE MANIFEST
VERSION
直接緩存的文件d
CACHE:
m.js
m1.js
需要在時間在線的文件
NETWORK:
cache.html
替代方案
FALLBACK:
/ajax/ ajax.html 3. html文件改造
給 <html> 標籤加 manifest 屬性
[plain] view plain copy
<html manifest="m.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="m.js"></script>
</head>
<body>
ver:5<p>
<input type="button" value="shwo_ver" onclick="show_ver();" /><p>
<input type="button" value="load_js" onclick="load_js();" /><p>
<input type="button" value="is_online" onclick="is_online();" /><p>
</body>
</html> 三、測試
chrome的開發者工具 》Console 會顯示創建緩存的情況
[plain] view plain copy
Document was loaded from Application Cache with manifest http://127.0.0.1/work/html5/manifest/m.manifest
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 4) http://127.0.0.1/work/html5/manifest/m.js
Application Cache Progress event (1 of 4) http://127.0.0.1/work/html5/manifest/m1.js
Application Cache Progress event (2 of 4) http://127.0.0.1/work/html5/manifest/cache.html
Application Cache Progress event (3 of 4) http://127.0.0.1/work/html5/manifest/cache1.html
Application Cache Progress event (4 of 4)
Application Cache UpdateReady event 四、關於更新
1.自動更新：瀏覽器除了在第一次訪問 Web 應用時緩存資源外，只會在 cache manifest 文件本身發生變化（即使是註釋變化）時更新緩存。而 cache manifest 中的資源文件發生變化並不會觸發更新。
2.手動更新：開發者也可以使用 window.applicationCache 的接口更新緩存。方法是檢測 window.applicationCache.status 的值，如果是 UPDATEREADY，那麼可以調用 window.applicationCache.update() 更新緩存。示範代碼如下。
[javascript] view plain copy
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) ｛
window.applicationCache.update();
｝ 五、在線狀態檢測和監視
1.檢測：navigator.onLine 屬性表示當前是否在線。如果爲 true, 表示在線；如果爲 false, 表示離線
2.監視：當在線 / 離線狀態切換時會觸發online/offline 事件，這兩個事件觸發在 body 元素上，並且沿着 document.body、document 和 window 的順序冒泡。