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

佚名發表於2020-05-21
HTML

文章主要介紹了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內容請搜尋以前的文章或繼續瀏覽下面的相關文章，

相關文章