2018-4-19 seo達人
如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里
HTML5引入了應用程序緩存,意味web應用可以進行緩存,在沒有網絡的情況下使用
應用程序緩存為應用帶來的三大優勢:
離線訪問應用
速度更快——已緩存資源加載的更快
減少服務器負載——瀏覽器只從服務器下載更新過或更改過的資源
瀏覽器支持情況:主流瀏覽器都支持,IE要10以上的版本
HTML5通過在html文件添加manifest屬性,啟用應用程序緩存
例子:
<!DOCTYPE HTML>
<htmlmanifest="demo.appcache">
...
</html>
每個指定了 manifest 的頁面在用戶對其訪問時都會被緩存。如果未指定 manifest 屬性,則頁面不會被緩存(除非在 manifest 文件中直接指定了該頁面)。
manifest 文件的建議的文件擴展名是:".appcache"。
manifest 文件需要配置正確的 MIME-type,即 "text/cache-manifest"。必須在 web 服務器上進行配置。
Mainifest文件
manifest 文件是簡單的文本文件,它告知瀏覽器被緩存的內容(以及不緩存的內容)。
例子:
CACHE MANIFEST
# 2012-02-21 v1.0.0
CACHE:
cached.js
cached.css
NETWORK:
uncached.js
uncached.css
FALLBACK:
index.html 404.html
CACHE MANIFEST 寫在manifest文件開頭,是必須的
CACHE作用是標識出哪些文件需要緩存,可以是相對路徑也可以是絕對路徑
NETWORK可選,這一部分是要直接讀取的文件,可以使用通配符 * 。
FALLBACK可選,指定了一個后備頁面,當資源無法訪問時,瀏覽器會使用該頁面。
在線的情況下,瀏覽器發現html頭部有manifest屬性,會請求manifest文件,如果是第一次訪問應用,瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過應用并且資源已經離線存儲了,那么瀏覽器就會使用離線的資源加載頁面,然后瀏覽器會對比新的manifest文件與舊的manifest文件,如果文件沒有發生改變,就不做任何操作,如果文件改變了,那么就會重新下載文件中的資源并進行離線存儲。
離線的情況下,瀏覽器就直接使用離線存儲的資源。
注意:
1.服務器對離線的資源進行了更新,那么必須更新manifest文件之后這些資源才能被瀏覽器重新下載,如果只是更新了資源而沒有更新manifest文件的話,瀏覽器并不會重新下載資源,也就是說還是使用原來離線存儲的資源。
2.manifest文件進行緩存的時候需要十分小心,因為可能出現一種情況就是你對manifest文件進行了更新,但是http的緩存規則告訴瀏覽器本地緩存的manifest文件還沒過期,這個情況下瀏覽器還是使用原來的manifest文件,所以對于manifest文件最好不要設置緩存。
3.如果更新中某個資源下載失敗,則整個更新就視作失敗,瀏覽器會依舊采用原來的資源
4.站點離線存儲的容量限制是5M
瀏覽器在下載manifest文件中的資源的時候,它會一次性下載所有資源,如果某個資源由于某種原因下載失敗,那么這次的所有更新就算是失敗的,瀏覽器還是會使用原來的資源。
window.applicationCache對象常用事件
1. oncached:當離線資源存儲完成之后觸發這個事件
2. onchecking:當瀏覽器對離線存儲資源進行更新檢查的時候會觸發這個事件
3. ondownloading:當瀏覽器開始下載離線資源的時候會觸發這個事件
4. onprogress:當瀏覽器在下載每一個資源的時候會觸發這個事件,每下載一個資源就會觸發一次。
5. onupdateready:當瀏覽器對離線資源更新完成之后會觸發這個事件
6. onnoupdate:當瀏覽器檢查更新之后發現沒有資源更新的時候觸發這個事件
最后一點是該特性已經從web標準刪除,可能在未來某個時間停止,推薦使用Service Workers 代替。