html5 離線快取

2022-08-29 06:00:10 字數 1970 閱讀 7384

本文將介紹離線快取的方方面面,並在最後會介紹一下關於自動化的問題。

html5之前的網頁,都是無連線,必須聯網才能訪問,這其實也是web的特色,這其實對於pc是時代問題並不大,但到了移動網際網路時代,裝置終端位置不再固定,依賴無線訊號,網路的可靠性變得降低,比如坐在火車上,過了乙個隧道(15分鐘),便無法訪問**,這對於web的傷害是很大的,比如對於 《ecmascript合集》這樣的為閱讀而生的頁面。

html5便引入了cache manifest 檔案。那麼什麼是cache manifest呢,接下來會講到。

首先manifest是乙個字尾名為minifest的檔案,在檔案中定義那些需要快取的檔案,支援manifest的瀏覽器,會將按照manifest檔案的規則,像檔案儲存在本地,從而在沒有網路鏈結的情況下,也能訪問頁面。

所有主流瀏覽器均支援應用程式快取,除了 internet explorer。caniuse給出的答案如下圖所示。

html新增了乙個manifest屬性,可以用來指定當前頁面的manifest檔案。

建立乙個和html同名的manifest檔案,比如頁面為index.html,那麼可以建乙個index.manifest的檔案,然後給index.html的html標籤新增如下屬性即可:

lang="en" manifest="index.manifest">

接下來詳細說說manifest的細節,乙個典型的manifest檔案**結構像下面這樣:

cache manifest

#version 1.3

cache:

test.css

network:

*

manifest檔案,基本格式為三段: cache, network,與 fallback,其中network和fallback為可選項。

而第一行cache manifest為固定格式,必須寫在前面。

以#號開頭的是注釋,一般會在第二行寫個版本號,用來在快取的檔案更新時,更改manifest的作用,可以是版本號,時間戳或者md5碼等等。

標識出哪些檔案需要快取,可以是相對路徑也可以是絕對路徑。

a.css

network:(可選)

這一部分是要繞過快取直接讀取的檔案,可以使用萬用字元*。

下面的** 「login.asp」 永遠不會被快取,且離線時是不可用的:

network:

login.asp

可以使用星號來指示所有其他資源/檔案都需要網際網路連線:

network:

*

指定了乙個後備頁面,當資源無法訪問時,瀏覽器會使用該頁面。該段落的每條記錄都列出兩個 uri—第乙個表示資源,第二個表示後備頁面。兩個 uri 都必須使用相對路徑並且與清單檔案同源。可以使用萬用字元。

下面的例子中,如果無法建立網際網路連線,則用 「404.html」 替代 /html5/ 目錄中的所有檔案。

fallback:

/html5/ /404.html

下面的例子中,則用 「404.html」 替代所有檔案。

fallback:

*.html /404.html

如下三種方式,可以更新快取:

給manifest新增或刪除檔案,都可更新快取,如果我們更改了js,而沒有新增或刪除,前面例子中注釋中的版本號,可以很好的用來更新manifest檔案。

html5中引入了js操作離線快取的方法,下面的js可以手動更新本地快取。

HTML5離線快取

它的優勢在於 ie10以下不支援,其餘的瀏覽器都支援。補充瀏覽器及其核心 ie trident ff gecko chrome blink opera blink 曾經使用presto safari webkit timepara getdatetime 獲取日期和時間 logo.png width...

html5的離線快取

html5 引入了應用程式快取,這意味著web應用可以進行快取,並且可以在沒有網路連線的時候進行訪問。1 離線瀏覽 使用者可以在應用離線時使用它們 2 速度更快 已快取資源,載入得更快 有乙個web應用有三個檔案index.html,a.js,b.css,現在需要把js和css檔案快取起來 1.在i...

HTML 5 離線和快取

1.離線應用 cache manifest cache 之後的資源都會被快取 cache main.html style.css main.js network 之後的資源不會被快取,總是從線上獲取 network account 如果離線化應用程式,只需將 html 檔案 和 manifest 描...