今天學習了一下離線應用,感覺棒棒噠~向前端又走進了一步~
下面就說一下我理解的離線應用,此篇先寫簡單一點的離線應用。
首先呢,HTML5爲我們提供了離線應用這個功能,這個功能主要包括3部分:
(1)在線打開頁面的同時,緩存離線文件(HTML/CSS/JS/圖片/其它)
manifest文件,從現在開始我們就要牢牢記住這個名字,因爲這個文件就是實現離線的關鍵。在這個文件中,列出了所有需要緩存資源的列表。通過在HTML文件中添加manifest文件,可以在打開網頁的同時訪問manifest文件,將其中所列出的資源列表全部緩存在瀏覽器中。在HTML文件中如下引用manifest文件。
例如:manifest文件名稱爲a.manifest
在HTML文件中
在HTML文件中manifest文件引用格式已經給出來啦,接下來是簡單的manifest文件內部各式的介紹。
首先在這個文件中第一行必須是CACHE MANIFEST 開頭,然後第二部分爲NETWORK即爲在線的文件,可寫可不寫,接下來第三部分是FALLBACK部分,寫入的是離線的替代文件,即原文件打不開的時候就選用替代文件,可寫可不寫。第四部分是最重要的CACHE部分,其下爲所有需要離線的資源的列表。
例如:
CACHE MANIFEST
#此爲註釋符號
NETWORK
FALLBACK
offline.html
CACHE
b.html(加入本頁面爲a.html,也就是a.html文件引用了manifest文件,就無需在manifst文件緩存資源列表中寫a.html了,它會自行緩存下來)
c.html
../other/c.html(此處注意“..”部分代表的是公共根目錄,使用..代替即可)
有關緩存文件部分介紹完啦~~我是萌萌噠程序猿~(*^__^*) ~
(2)緩存文件更新(先介紹簡單的方法)
接下來介紹一種很簡單的文件緩存更新的方法。
這裏一定要聲明幾個問題:
只有當manifest文件內容發生改變的時候,在線的時候才能更新緩存文件。大概過程就是在線時刷新出在線的頁面,在讀取到時,就會讀取服務器上manifest文件,重新緩存新的資源列表。如果只是更改了比如js文件內部的內容,那麼緩存資源不會更新,因爲manifest文件沒發生改變。
我們可以通過添加註釋行或者增加減少資源列表等方式使manifest文件發生改變,從而達到更新緩存資源的目的。
這就是簡單的緩存更新方法啦~