Application Cache

Application Cache（應用緩存或離線緩存）

• 參考

  • Mozilla MDN 關於Application Cache的講解

• 簡介

  • Application Cache也就是APPCache。
  • APPCache 是基於HTML5 的一種使WEB 瀏覽器能夠緩存應用程序資源，已達到應用程序能夠離線使用的目的。
  • APPCache 不一樣於session cache，session cache是有過時時間的，到超過了過時時間或者瀏覽器關閉，緩存文件就會被自動刪除；
    可是APPCache並無這樣相似的機制，因此若是沒有手動或者程序設置地刪除，APPCache會一直保存在客戶端瀏覽器緩存區中。

• APPCache的優點

  • 離線瀏覽: 用戶能夠在離線狀態下瀏覽網站內容。
  • 更快的速度: 由於數據被存儲在本地，因此速度會更快。
  • 減輕服務器的負載: 瀏覽器只會下載在服務器上發生改變的資源。

• APPCache的工做流程

  • 如何開啓APPCache？

    經過在頁面中的 元素上增長 manifest 屬性來開啓應用緩存，就像這樣：
    ```

    ...

    ```
    a. manifest 屬性值是 緩存清單(cache manifest) 文件，這個文件包含了瀏覽器須要爲應用緩存的資源(文件)列表
    b. 你應當在每個意圖緩存的頁面上添加 manifest 特性。瀏覽器不會緩存不帶有manifest 特性的頁面，除非這個頁面已經被寫在清單文件內的列表裏了。你沒有必要添加全部你意圖緩存的頁面的清單文件，瀏覽器會將用戶訪問過的並帶有 manifest 特性的全部頁面添加進應用緩存中。

  • 文檔加載和更新流程

  • 使用了APPCache以後文檔加載是這樣的：

    1. 當瀏覽器訪問一個包含 manifest 特性的文檔時，若是應用緩存不存在，瀏覽器會加載文檔，而後獲取全部在清單文件中列出的文件，生成應用緩存的第一個版本。
    2. 後續再次訪問時，瀏覽器直接從應用緩存(而不是服務器)中加載文檔與其餘在清單文件中列出的資源。同時，瀏覽器還會向 window.applicationCache 對象發送一個 checking 事件，在遵循合適的 HTTP 緩存規則前提下，獲取清單文件
    3. 把上面提到的checking事件後獲取到的服務器端的文件清單和當前瀏覽器緩存的清單副本比對，若是當前瀏覽器緩存的清單副本是最新的，瀏覽器將向 applicationCache 對象發送一個 noupdate 事件，到此，更新過程結束。注意，若是你在服務器修改了任何緩存資源，同時也應該修改清單文件，這樣瀏覽器才能知道它須要從新獲取資源。
    4. 若是清單文件已經改變，文件中列出的全部文件(也包括經過調用 applicationCache.add() 方法添加到緩存中的那些文件)會被獲取並放到一個臨時緩存中，遵循適當的 HTTP 緩存規則。對於每一個加入到臨時緩存中的文件，瀏覽器會向 applicationCache 對象發送一個 progress 事件。若是出現任何錯誤，瀏覽器會發送一個 error 事件，並暫停更新。
    5. 一旦全部文件都獲取成功，它們會自動移送到真正的離線緩存中，並向 applicationCache 對象發送一個 cached 事件。鑑於文檔早已經被從緩存加載到瀏覽器中，因此更新後的文檔不會從新渲染，直到頁面從新加載(能夠手動或經過程序) 這裏特別注意一下，當你在服務器端修改了文件同時也更新了清單文件，刷新頁面卻沒有顯示咱們的修改，這並無錯誤，好好理解前面那句說明，你要想看到你的修改，能夠簡單的再刷新一次。
       上面狀態的變動，咱們能夠運行本示例，而後查看 console控制檯的輸出信息：

• 清除離線緩存

  • chrome ：設置中選擇 「清除瀏覽器數據...」 或訪問 chrome://appcache-internals/ 來清除緩存
  • Safari ： 在設置中有一個相似的"清空緩存" 選項，可是須要重啓瀏覽器後才能生效。
  • Firefox： 經過訪問 about:cache 頁面(在「離線緩存設置」標題下)來檢查離線緩存的當前情況

• manifest清單文件

  • manifest清單文件可使用任意擴展名，但傳輸它的 MIME 類型必須爲 text/cache-manifest。
  • manifest清單文件中的記錄

  1. 緩存清單文件是一個純文本文件，它列出了全部瀏覽器應該緩存起來的資源，以便可以離線訪問
  2. 示例：
     1. CACHE MANIFEST
     2. # v1 - 2011-08-13(註釋 「v1」頗有必要存在。只有當清單文件發生變化時，瀏覽器纔會去更新應用緩存。若是你要更改緩存資源(好比說，你使用了一張新的 header.png 圖片)，你必須同時修改清單文件中的內容，以便讓瀏覽器知道它們須要更新緩存)
     3. # This is a comment.
     4. http://www.example.com/index.html
     5. http://www.example.com/header.png
     6. http://www.example.com/blah/blah
  3. 一個緩存清單文件能夠包含三段內容 (CACHE， NETWORK， 和 FALLBACK， 下面詳細討論)
  4. 資源可使用絕對或者相對 URL 來指定(例如 index.html)
  5. 重要：不要在清單文件中指定清單文件自己，不然將沒法讓瀏覽器得知清單文件有新版本出現。

  • CACHE， NETWORK，與 FALLBACK

  1. CACHE:
     1. 這是緩存文件中記錄所屬的默認段落。在 CACHE:段落標題後(或直接跟在 CACHE MANIFEST 行後)列出的文件會在它們第一次下載完畢後緩存起來。
  2. NETWORK:
     1. 在 NETWORK:段落標題下列出的文件是須要與服務器鏈接的白名單資源。全部相似資源的請求都會繞過緩存，即便用戶處於離線狀態。可使用通配符。
  3. FALLBACK:
     1. FALLBACK:段指定了一個後備頁面，當資源沒法訪問時，瀏覽器會使用該頁面。該段落的每條記錄都列出兩個 URI—第一個表示資源，第二個表示後備頁面。兩個 URI 都必須使用相對路徑而且與清單文件同源。可使用通配符。
  4. CACHE， NETWORK， 和 FALLBACK 段落能夠以任意順序出如今緩存清單文件中，而且每一個段落能夠在同一清單文件中出現屢次。

• 一個複雜且完整的緩存清單文件示例：

1. CACHE MANIFEST
2. # v1 - 2015-05-6 12:18:00 (Version 版本號，強烈建議設置，由於只有更新了manifest清單文件，瀏覽器纔會進行update更新緩存的操做)
3. # 這是一個manifest清單文件，這裏CACHE段落中列出了須要緩存的文件.
4. cache_1.txt
5. cache_2.html
7. # 列出的文件是須要與服務器鏈接的白名單資源。全部相似資源的請求都會繞過緩存，即便用戶處於離線狀態。可使用通配符
8. NETWORK:
9. ApplicationCache筆記.md
11. #段指定了一個後備頁面，當資源沒法訪問時，瀏覽器會使用該頁面。該段落的每條記錄都列出兩個URI—第一個表示資源，第二個表示後備頁面。兩個 URI 都必須使用相對路徑而且與清單文件同源。可使用通配符
12. FALLBACK:
13. fallback.html fallback/fallback.html

• 緩存清單文件的結構

  • 緩存清單文件必須以 text/cache-manifest MIME 類型來傳輸
  • 緩存清單是 UTF-8 格式的文本文件，有可能包含一個 BOM 字符。
  • 緩存清單文件的第一行必須包含字符串 CACHE MANIFEST
  • 註釋包括零或多個製表符或空白字符，緊接着是一個#字符，再而後是零或多個註釋文本字符。註釋只能在所在行起做用，不能追加到其餘行上。這意味着你沒法使用片斷標識符。
  • 段落數據:不一樣段落的數據行格式有所不一樣。在默認 (CACHE:) 段落，每行都是一個合法的 URI 或 IRI ，與一個要緩存的資源相關聯(本段落內不容許通配符)。每行的 URI 或 IRI 先後容許出現空白字符。在 Fallback 段落內，每行都是一個合法的 URI 或 IRI(與一個資源關聯)，緊跟着一個後備資源，用於當沒法與服務器創建鏈接時訪問。在 Network 段落內，每行都是一個合法的 URI 或 IRI，關聯一個須要經過網絡獲取的資源(本段落內可使用通配符 )。*注意：相對 URI 是指相對於緩存清單的 URI，而不是包含清單的文檔的 URI。

• 應用緩存中的資源

  • 主記錄(Master): 用戶瀏覽的一個上下文中包含一個文檔，該文檔用 manifest 特性明確指明瞭它屬於該緩存
  • 顯示記錄(Explicit): 這些是在應用緩存清單文件中顯式列出的資源
  • 網絡記錄: 這些是在應用緩存清單文件中做爲網絡記錄列出的資源。
  • 後備記錄(fallback): 這些是在應用緩存清單文件中做爲後備記錄列出的資源。
  • 注意： 資源能夠被標記爲多個類別，所以能夠做爲多重記錄來分類。例如，一條記錄既能夠是顯式記錄，也能夠是一條後備記錄。

• 緩存狀態
  應用緩存都有一個狀態，標示着緩存的當前情況

  • UNCACHED(未緩存) 用於代表一個應用緩存對象尚未徹底初始化。
  • IDLE(空閒) 應用緩存此時未處於更新過程當中
  • CHECKING(檢查) 清單已經獲取完畢並檢查更新。
  • DOWNLOADING(下載中) 下載資源並準備加入到緩存中，這是因爲清單變化引發的。
  • UPDATEREADY(更新就緒) 一個新版本的應用緩存可使用。有一個對應的事件 updateready，當下載完畢一個更新，而且還未使用 swapCache() 方法激活更新時，該事件觸發，而不會是 cached 事件。
  • OBSOLETE(廢棄) 應用緩存如今被廢棄(當刪除manifest屬性時，緩存狀態就會顯示廢棄)。
  • 注意：上面列出的狀態可能你不容易發現，可是確實是這樣的

• 緩存陷阱

  • 永遠不要使用傳統 GET 參數(例如 other-cached-page.html?parameterName=value) 來訪問緩存文件。這會使瀏覽器繞過緩存，直接從網絡獲取。若想連接一個參數須要在 JavaScript 中解析的資源，你能夠將參數放到連接的 hash 部分，例如 other-cached-page.html#whatever?parameterName=value。
  • 當應用被緩存後，僅僅更新在 web 頁面中使用的資源(文件)還不足以更新被緩存的文件。你須要在瀏覽器獲取和使用更新的文件前，去更新緩存清單文件自己。你可使用 window.applicationCache.swapCache() 以編程的方式完成上述目的，雖然這沒法影響到已經加載完畢的資源。爲了保證資源從應用緩存的最新版本中加載，最理想的辦法就是刷新頁面。
  • 經過在 web 服務器上設置 expires header 來使 *.appcache 文件當即過時是個好主意。這避免了將清單文件緩存的風險。例如，在 Apache 中，你能夠指定下面的配置項：
    ExpiresByType text/cache-manifest "access plus 0 seconds"

• 兼容性
  

來自爲知筆記(Wiz)