HTML5學習之離線儲存基礎知識

CHIEMINCHAN發表於2018-05-12
HTML

原理

基於一個新建的.appcache檔案的快取機制(非儲存技術),通過這個檔案上的解析清單離線儲存資源,這些資源會像cookie一樣被儲存下來.在之後當網路處於離線狀態時,瀏覽器會利用這些被離線儲存下來的資料來展示頁面.

使用離線儲存

html新增了一個manifest屬性,可用於指定當前頁面的appache檔案, 建立一個和html同名的appache檔案,比如index.html,就可以建立一個index.appache檔案.

<!DOCTYPE HTML>  
<html manifest = "cache.manifest">
    //網頁內容...
</html>  
複製程式碼

離線儲存的manifest組成部分

manifest(.appcache)檔案是簡單的文字檔案,它告知瀏覽器被快取的內容和不快取的內容.

首先展示一下cache.manifest檔案的書寫方式,如:

CACHE MANIFEST
# 2018-05-12 v1.0.0
/style.css
/logo.gif
/index.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html
複製程式碼

離線儲存的mainfest一般由三個部分組成：

  1. CACHE MANIFEST:
    必選,裡面包括需要被離線儲存的資源列表,在此標題下列出的檔案將在首次下載後進行快取.

        CACHE MANIFEST 
    # 2018-05-12 v1.0.0
    /style.css
    /logo.gif
    /index.js   
複製程式碼

    表示當manifest檔案載入後,瀏覽器會下載網站當前目錄的style.css , logo.gif , index.js三個檔案,然後,無論使用者什麼時候和網路斷開,這三個檔案都還是可用的.

  2. NETWORK:
    可選,裡面包括不會被快取的內容,在次標題下列出的檔案只有在線上的情況下才能被訪問,如果在CACHE和NETWORK中有一個相同的資源,那麼這個資源還是會被離線儲存,也就是說CACHE的優先順序更高.

    NETWORK:
login.asp
複製程式碼

    表示login.asp不會被快取起來,且離線時不可以使用.
    可以使用星號來指示所有其他資源/檔案都需要因特網連線:

    NETWORK:
*
複製程式碼

  3. FALLBACK:
    可選,表示如果第一個資源訪問失敗,就使用第二個資源替換. 比如：
    /html/ /404.html表示用"404.html"替代當/html/目錄中的所有檔案方訪問失敗時的頁面.
    //404.html表示用"404.html"替代當前目錄中的所有檔案.
    *.html/404.html表示用"404.html"檔案代替所有html檔案.

    FALLBACK:
/html5/ /404.html
複製程式碼

    表示當無法建立因特網連線時,用"404.html"替代當/html5/目錄中的所有檔案.

注意：以 "#" 開頭的是註釋行,但也可滿足其他用途.應用的快取會在其 manifest 檔案更改時被更新.如果您編輯了一幅圖片,或者修改了一個 JavaScript 函式,這些改變都不會被重新快取.更新註釋行中的日期和版本號是一種使瀏覽器重新快取檔案的辦法。

瀏覽器如何對離線儲存的資源進行管理和載入

  1. 線上情況下
    瀏覽器發現html頭部有manifest屬性,它會請求manifest對應檔案.
    如果是第一次訪問,那麼瀏覽器就會根據manifest檔案的內容下載相應的資源並且進行離線儲存。
    如果已經訪問過app並且資源已經離線儲存了,那麼瀏覽器就會使用離線的資源載入頁面,然後瀏覽器會對比新的manifest檔案與舊的manifest檔案,如果檔案沒有發生改變,就不做任何操作,如果檔案改變了,那麼就會重新下載檔案中的資源並進行離線儲存.(????)

  2. 離線情況下
    瀏覽器就直接使用離線儲存的資源.

更新快取的方式

一旦檔案被快取,則瀏覽器會繼續展示已快取的版本,即使修改了伺服器上的檔案.為了確保瀏覽器更新快取,需要更新manifest 檔案.更新方式有：

  1. 更新manifest檔案
    給manifest檔案新增或刪除檔案,或者沒有新增或刪除檔案,只修改了檔案,可以通過更改版本號等來更新manifest檔案.(論#註釋的重要性!)
  2. 通過js操作手動更新 window.applicationCache.update()
  3. 清除瀏覽器快取
    如果使用者清除了瀏覽器快取（手動或用其他一些工具），都會重新下載檔案。

參考網站:
https://segmentfault.com/a/1190000006984353 https://blog.csdn.net/zhouziyu2011/article/details/58588546 https://www.cnblogs.com/shoestrong/p/6435169.html

相關文章