離線緩存
什麼是Application Cache
HTML5 的應用緩存（application cache），或者簡稱爲appcache，是專門爲開發離線Web 應用而設計的。Appcache 就是從瀏覽器的緩存中分出來的一塊緩存區。要想在這個緩存中保存數據，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。
HTML5引入了應用程序緩存技術，意味着web應用可進行緩存，並在沒有網絡的情況下使用，通過創建cache manifest文件，可以輕鬆的創建離線應用。
Application Cache 的優勢
Application Cache帶來的三個優勢是：
- 離線瀏覽 – 用戶可在離線時瀏覽您的完整網站
- 提升頁面載入速度 – 緩存資源爲本地資源，因此加載速度較快
- 降低服務器壓力 – 瀏覽器只會從發生了更改的服務器下載資源
而且主要瀏覽器皆以支持Application Cache，就算不支持也不會對程序造成什麼影響。
離線Web應用的運行機制
離線Web應用的運行機制是每個需要離線使用的網頁都指定一個後綴名爲.manifest的文本文件。這個文本文件羅列了該網頁離線使用時所需的所有資源文件（HTML、圖片JavaScript 等等）。支持離線Web 應用的瀏覽器會自動讀取.manifest文件，下載文件中所羅列的資源文件，並將其緩存在本地以備網絡斷開時使用。
manifest 文件內容示例
在 HTML 的開始標籤中，我們指定一個.manifest文件：
<html lang="en" manifest="/offline.manifest">
該文件的文件名隨意，但後綴名建議使用.manifest。
一個簡單的manifest文件例子如下：
CACHE MANIFEST
#v1
CACHE:
basic_page_layout_ch4.html
css/main.css
img/atwiNavBg.png
img/kingHong.jpg
NETWORK:
*
FALLBACK:
//offline.html
理解manifest 文件
manifest文件必須以CACHE MANIFEST開頭。第二行就是一句註釋，註明了manifest文件的版本號。這句註釋的用途稍後詳細介紹。
-
CACHE:部分 羅列了所有離線使用所需的文件。這些文件的路徑都是相對
offline.manifest而言的，所以文件路徑可能需要根據情況稍作修改。使用絕對路徑也是可以的。 -
NETWORK:部分 羅列了所有不需要被緩存的文件。你可以將其看成是一個“在線白名單”。
此處羅列的文件在網絡暢通的情況下都會直接跳過緩存。如果你想網站內容在網絡暢通的情況下及時更新（而不是僅在離線緩存中查找），可以在此處使用*。星號被稱爲在線白名單通配符。 -
FALLBACK:部分 使用/字符定義了一個URL 模板。它的作用是訪問每個頁面時都會問“緩存中有這個頁面嗎？”，如果有則顯示緩存頁面，如果沒有則顯示指定的
offline.html文件。
頁面被自動加載到離線緩存
根據實際情況，還有一種更簡單的辦法來設置offline.manifest文件。任何指定了離線manifest 文件的頁面（就是在標籤中追加了manifest="/offline.manifest"的頁面）在被用戶訪問時都會被自動加入到本地緩存。瀏覽器會緩存用戶訪問過的每一個網頁以確保這些網頁在離線狀態下仍可訪問。
這種方法只會下載和緩存用戶訪問的HTML 頁面，不會緩存頁面內引入的圖片、JavaScript 或者其他資源文件。如果這些資源文件是必需的，那麼請按照上節中的方法在CACHE:部分專門聲明這類文件。
版本註釋的用途
對網站內容或任何資源文件做了修改之後，你必須得對offline.manifest文件也做點修改並將其重新上傳服務器。這樣就能讓服務器爲瀏覽器提供新版本文件，而瀏覽器則會下載該新版本文件並再次觸發離線存儲進程。可以像下面這樣在offline.manifest文件的頭部加了一句註釋，每次修改網站都會對應地修改該版本號：
# Cache Manifest v1
如果開發者對網站內容或資源做了修改，那麼也得通知瀏覽器更新緩存文件，否則瀏覽器仍然會使用之前已有的緩存文件。而通知瀏覽器更新緩存文件的方式通常是更新manifest文件，瀏覽器如果發現manifest文件發生了變化，就會更新緩存文件。大多數情況下manifest中的緩存文件清單不會發生變化，那我們就通過修改註釋的方式來改變manifest文件，註釋中的版本號，既能觸發文件變化，又能指明當前版本，一舉兩得。其實註釋中還可以加入更新時間等更詳細信息，有助於維護。
nginx 服務器配置
離線存儲是通過manifest文件來管理的，需要服務器端的支持，不同的服務器開啓支持的方式也是不同的。對於Nginx需要修改配置目錄下的**mime.types**文件，添加manifest文件映射：
text/cache-manifest manifest;
重啓nginx後，服務器支持manifest。
查看離線緩存的效果
以下面配置爲例：
CACHE MANIFEST
# 對大文件進行離線緩存
CACHE:
lib/ionic/js/ionic.bundle.min.js
js/html2canvasA.min.js
NETWORK:
*
FALLBACK:
//index.html
通過chrom 訪問站點，即可看到離線緩存後的效果：
