干什么用的？
離線緩存為的是第一次請求后，根據manifest文件進行本地緩存，並且在下一次請求后進行展示（若有緩存的話，無需再次進行請求而是直接調用緩存），最根本的感覺是它使得WEB從online可以延伸到了offline領域。
應用場景
h5游戲及一些頁面內容不經常會變動，相對較為固定的內容。
一、基本概念
離線緩存是HTML5新引入的技術，能夠讓你的Web應用程序指定哪些文件可以緩存在本地，使得你的網絡斷開時依然可以通過本地的緩存來進行訪問瀏覽。
HTML 5 應用程序緩存的好處：
離線瀏覽 – 用戶可在應用離線時使用它們。
速度 – 已緩存資源加載得更快。
減少服務器負載 – 瀏覽器將只從服務器下載更新過或更改過的資源。
瀏覽器支持：所有主流瀏覽器均支持應用程序緩存，除了 Internet Explorer。對於移動端來說瀏覽器不是問題。
二、瀏覽器支持情況
二、使用方法
<!DOCTYPE html> <html manifest="demo.appcache">
manifest文件的后綴名必須為.appcache，並且和引入該manifest的頁面同源
manifest 文件可分為三個部分：
CACHE MANIFEST – 在此標題下列出的文件將在首次下載后進行緩存
NETWORK – 在此標題下列出的文件需要與服務器的連接，且不會被緩存
FALLBACK – 在此標題下列出的文件規定當頁面無法訪問時的回退頁面（比如 404 頁面）
manifest文件示例：
1 CACHE MANIFEST 2 #v0.0.1.1 3 /mobile/style/zxx.css 4 /mobile/js/jquery.min.js 5 /mobile/js/jquery.lazyload.min.js 6 /mobile/js/zxx.js 7 /mobile/style/fonts/icomoon.svg 8 /mobile/style/fonts/icomoon.eot 9 /mobile/style/fonts/icomoon.ttf 10 /mobile/style/fonts/icomoon.woff
11 NETWORK: 12 *
13 FALLBACK: 14 /html5/ /404.html
manifest 解讀
第一行代碼CACHE MANIFEST 是必需的。緊跟着的 #v0.0.1.1 可以看作是版本號，這個你可以隨便寫的，它的作用就是用於文件的更新。后面的就是你要設置的允許本地緩存的資源，當一些較大的，不常改動的文件設置成本地緩存資源是一種不錯的選擇。（緩存清單的文件列表可以使用絕對路徑或絕對URL地址）
第二個代碼塊
NETWORK: *
這段代碼的意思是除是前面設置的文件可緩存外，其它的文章都必需連網才可以訪問。
最后一塊
FALLBACK: /html5/ /404.html
FALLBACK – 在此標題下列出的文件規定當頁面無法訪問時，則用 “offline.html” 替代 /html5/ 目錄中的所有文件
最后一塊代碼FALLBACK可寫可不寫。但第二塊代碼就必需寫，不寫的話，除了設置了可緩存的文件可以讀取外，其它文件都讀取不到的。
appcache文件文件配置好后，最后一步就是在HTML文件中調用了。在你想設置緩存的頁面在<html>標簽引用這個文件就大功告成了。
被緩存的文件可以使用谷歌瀏覽器進行查看: f12 -> Application -> Application Cache
三、運行方式
瀏覽器第一次讀取到頁面有demo.appcache文件時，在加載頁面之前去檢查application Cache是否有緩存，有則優先加載緩存，沒有則會在其他資源加載完后再把demo.appcache文件及里面所規定的靜態資源一並存入 application Cache 之中。且也會把當前頁面的html直接讀出來存入application Cache中，其類型為master。
用戶再次聯網打開頁面時，頁面加載到manifest時，會對manifest配置文件進行臟檢查，當檢測到manifest文件被修改后，之前的緩存將會被棄用，轉而去根據manifest文件中配置的新內容進行緩存。如果斷網打開頁面，會優先讀取 application Cache，有緩存就直接讀出來，不會提示斷網
但是問題是，當前的html頁面也會跟着cache直接讀出來了，可能會造成即使 我們的頁面更新了，但是用戶還是看的老舊版本頁面（因為更新mainfest的時候，頁面加載已經開始了，但是緩存更新卻尚未完成，瀏覽器還是會使用緩存的資源，當瀏覽器檢測到了Application Cache有更新時，本次不會使用新的資源，下一次才會進行使用）。
四、更新緩存
通過添加updateready事件監聽，當監聽到本地緩存更新后，進行重載頁面，以達到更新的目的。
applicationCache.addEventListener("updateready",function(){
applicationCache.swapCache(); // 手工更新本地緩存
location.reload(); //重新加載頁面頁面
},true);
四、緩存下線
要將離線緩存下線，我們只需要將服務端的manifest文件刪除即可，同時也要將HTML中的 manifest="manifest.appcache" 刪除（不刪也可以，會在console控制台報錯，但不會影響頁面訪問），刪除后用戶再第一次訪問還是原來的緩存頁面，還需要再刷新一次。。。