HTML5離線存儲Manifest原理及使用詳解

2020-05-21 17:04:13 來源：互聯網作者：佚名 人氣： 次閱讀 82 條評論

文章主要介紹了H5離線存儲Manifest原理及使用，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧理解：離線存儲可以將站點的文件儲存在本地，在沒有網絡...

文章主要介紹了H5離線存儲Manifest原理及使用，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧

理解：

離線存儲可以將站點的文件儲存在本地，在沒有網絡的情況下還是可以訪問到存儲的對應的站點的頁面，這些文件可以包括html，js，css，img等等文件。但其實即使在有網絡的時候，瀏覽器也會優先使用已離線存儲的文件。

什么是Manifest：

Manifest是一個簡單的 文本文件，它的擴展名是任意的，定義需要緩存的文件、資源，當第一次打開時，瀏覽器會自動緩存相應的資源。

Manifest 的特點：

  • 離線瀏覽：即當網絡斷開時，可以繼續訪問你的頁面。
  • 訪問速度快：將文件緩存到本地，不需每次都從網絡上請求。
  • 穩定性：做了Manifest緩存，遇到突發網絡故障或者服務器故障，繼續訪問本地緩存。

Manifest的使用：

創建一個和html同名的manifest文件，比如頁面為index.html，那么可以建一個index.manifest的文件，然后給index.html的html標簽添加如下屬性即可：

<html lang="en" manifest="index.manifest"> 或<html manifest="http://www.example.com/index.manifest">

manifest 的引入可以使絕對路徑也可以是相對路徑，如果你使用的是絕對路徑，你的manifest文件必須和你的站點掛在同一個域名下。
manifest文件你可以保存為任意的擴展名，但mine-type 必須是 text/cache-manifest。

<html lang="en" manifest="index.manifest">  或  <html lang="en" manifest="index.cache">

在服務器上部署時需要在服務器上添加相應的mie-type。

manifest 標簽應該包含到你需要緩存資源的頁面，當第一次打開該頁面時，瀏覽器會解析該頁面中的mainfest，并緩存里面列舉的資源，同時該頁面也會自動會被瀏覽器緩存，即使該頁面沒有在Manifest中列出。

Manifest文件結構：

manifest文件，基本格式為三段： CACHE， NETWORK，與 FALLBACK，其中NETWORK和FALLBACK為可選項。

而第一行CACHE MANIFEST為固定格式，必須寫在前面。

以#號開頭的是注釋，可以是版本號，時間戳等等。一般會在這寫個版本號，用來在緩存的文件更新時，更改manifest的作用：瀏覽器已經緩存下來的緩存，只有當manifest文件發生了改變才會更新本地緩存，即使你的代碼發生了

更新，本地瀏覽器也是不知道的，所以每次發布代碼時你可以更改下#后面的信息比如版本號或者時間，告訴瀏覽器相應的更新本地緩存。

CACHE MANIFEST
?????#v0.1
?????CACHE:
???????js/index.js
?????????????css/index.css
?????NETWORK:
?????????????images/logo.png
?????FALLBACK:
??????*.html /404.html /* / /404.html 或 /html/ /404.html 也可*/

1、第一行是CACHE MANIFEST 這是必須需要的。

2、CACHE（必須） 標識出哪些文件需要緩存，可以是相對路徑也可以是絕對路徑。這里列舉出來的文件，當第一次加載下來時，會被瀏覽器緩存在本地。

3、NETWORk 這一部分是要繞過緩存直接讀取的文件，可以使用通配符 ，大多數網站使用 * 。 當使用 時 表示出 CACHE指定文件外，其它所有頁面都需要聯網訪問。

4、FALLBACK （可選） 當資源無法訪問時，瀏覽器使用后備資源去替代。第二個表示后備頁面。兩個 URI 都必須使用相對路徑并且與清單文件同源。可以使用通配符。

下面的例子中，如果無法建立因特網連接，則用 “404.html” 替代 /html5/ 目錄中的所有文件。

FALLBACK:
/html5/ /404.html

下面的例子中，當任何頁面無法訪問時跳轉到 “404.html”頁。

FALLBACK:
*.html /404.html

注意： 1 必須在第一行 2、3、4 直接的順序是隨意的，并且在同一個manifest文件中可以出現多次，多次和一次效果一樣。
　　　 添加 manifest　 屬性的頁面會自動被瀏覽器緩存，不需要再CACHE節點中再次添加。

如何更新緩存

  • 更新manifest文件
  • 通過javascript操作
  • 清除瀏覽器緩存

給manifest添加或刪除文件，都可更新緩存，如果我們更改了js，而沒有新增或刪除，前面例子中注釋中的版本號，可以很好的用來更新manifest文件。
html5中引入了js操作離線緩存的方法，下面的js可以手動更新本地緩存。

window.applicationCache.update();

如果用戶清除了瀏覽器緩存（手動或用其他一些工具）都會重新下載文件。

我們可以使用代碼手動更新manifest緩存，一旦webapp源碼更新，會自動更新本地manifest緩存，使用戶始終訪問到最新的源碼。

到此這篇關于H5離線存儲Manifest原理及使用的文章就介紹到這了,更多相關H5離線存儲Manifest內容請搜索以前的文章或繼續瀏覽下面的相關文章，

您可能感興趣的文章

相關文章