神奇的HTML5離線存儲（應用程序緩存）

時間 2019-11-08

標籤神奇 html5 html 離線存儲應用程序緩存欄目 HTML5 简体版

原文原文鏈接

聲明：本文爲原創文章，如需轉載，請註明來源並保留原文連接前端小尚，謝謝！javascript

前言

使用 HTML5，經過建立 cache manifest 文件，能夠輕鬆地建立 web 應用的離線版本。css

HTML5引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網鏈接時進行訪問。應用程序緩存爲應用帶來三個優點：html

離線瀏覽 - 用戶可在應用離線時使用它們

速度 - 已緩存資源加載得更快

減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。

原理和環境

如上面提到的HTML5的離線存儲是基於一個新建的.appcache文件的，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。前端

就像cookie同樣，html5的離線存儲也須要服務器環境。
這裏提供一個小工具——簡易iis服務器，把它放在項目更目錄下，雙擊運行便可模擬服務器環境。
連接: http://pan.baidu.com/s/1jG86UV0 密碼: ja9hhtml5

解析清單

在開始以前要先了解下manifest（即.appcache文件），上面的解析清單要怎麼寫。java

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。web

manifest 文件可分爲三個部分：瀏覽器

CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存

NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存

FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）

在線的狀況下,用戶代理每次訪問頁面，都會去讀一次manifest.若是發現其改變, 則從新加載所有清單中的資源緩存

CACHE MANIFEST

第一行，CACHE MANIFEST，是必需的：服務器

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的 manifest 文件列出了三個資源：一個 CSS 文件，一個 GIF 圖像，以及一個 JavaScript 文件。當 manifest 文件加載後，瀏覽器會從網站的根目錄下載這三個文件。而後，不管用戶什麼時候與因特網斷開鏈接，這些資源依然是可用的。

NETWORK

白名單，使用通配符"*". 則會進入白名單的open狀態. 這種狀態下.全部不在相關Cache區域出現的url都默認使用HTTP相關緩存頭策略.

下面的 NETWORK 小節規定文件 "login.asp" 永遠不會被緩存，且離線時是不可用的：

NETWORK:
login.asp

可使用星號來指示全部其餘資源/文件都須要因特網鏈接：

NETWORK:
*

FALLBACK

下面的 FALLBACK 小節規定若是沒法創建因特網鏈接，則用 "offline.html" 替代 /html5/ 目錄中的全部文件：

ALLBACK:
/html5/ /404.html

註釋：第一個 URI 是資源，第二個是替補。

更新緩存

一旦應用被緩存，它就會保持緩存直到發生下列狀況：

用戶清空瀏覽器緩存
manifest 文件被修改
由程序來更新應用緩存

Demo

case/
  |-- index.html
  |
  |-- demo.appcache
  |
  |-- 簡易IIS服務器.exe
  |
  `-- image
        |-- 01.jpg
        `-- 02.jpg

index.html

<!DOCTYPE html>
<html lang="en" manifest="demo.appcache">
<head>
    <meta charset="UTF-8">
    <title>HTML5離線存儲</title>
</head>
<body>
    <img src="image/01.jpg" alt="">
    <img src="image/02.jpg" alt="">
</body>
</html>

demo.appcache

CACHE MANIFEST
#v01
image/01.jpg

NETWORK:
*

FALLBACK:
/

image文件夾下存儲着
01.jpg

02.jpg

好接着執行簡易IIS服務器.exe試試看吧。
當iis開啓時

當iis關閉時（是關閉，暫停看不出效果）

能夠看見圖片1成功被離線展現出來了，圖片2像正常狀況同樣顯示不出來。

如今我想把圖片2和圖片1的位置換一下呢.
Html部分置換一下

<body>
    <img src="image/02.jpg" alt="">
    <img src="image/01.jpg" alt="">
</body>

這時候發現問題來了，html明明修改了爲何圖片沒有置換過來呢，我不是在demo.appcache文件的NETWORK寫了星號嗎?除了CACHE MANIFEST文件其它都採用在線模式。查資料得知：引入manifest的頁面,即便沒有被列入緩存清單中，仍然會被用戶代理緩存。
好吧，那我把.appcache文件更新下，因而乎把頭部的版本號修改一下#v02。刷新下頁面仍是沒反應！再刷新，有了！爲何？

對於瀏覽器來講,manifest的加載是要晚於其餘資源的. 這就致使check manifest的過程是滯後的.發現manifest改變.全部瀏覽器的實現都是緊隨這作靜默更新資源.以保證下次pv,應用到更新.

經過控制檯咱們可以窺探一二：

第一次刷新，應用程序緩存更新準備事件,
第二次刷新纔會看到效果。

緩存當即執行

咱們的產品已經更新了用戶卻要第二次進來纔可以看到，這樣用戶體驗也太差了吧，有什麼方式可以解決呢？好在html5給javascript提供了相關的API。

API篇幅太多自行查看把，這裏我曬下我測試成功的code：

/*code1,簡單粗暴的*/
    applicationCache.onupdateready = function(){
        applicationCache.swapCache();
        location.reload();
    };
    /*code2，緩存公用方法*/
    // var EventUtil = {
    //     addHandler: function(element, type, handler) {
    //         if (element.addEventListener) {
    //             element.addEventListener(type, handler, false);
    //         } else if (element.attachEvent) {
    //             element.attachEvent("on" + type, handler);
    //         } else {
    //             element["on" + type] = handler;
    //         }
    //     }
    // };
    // EventUtil.addHandler(applicationCache, "updateready", function() {      //緩存更新並已下載，要在下次進入頁面生效
    //     applicationCache.update();  //檢查緩存manifest文件是否更新，ps:頁面加載默認檢查一次。
    //     applicationCache.swapCache();  //交換到新的緩存項中，交換了要下次進入頁面才生效
    //     location.reload();              //從新載入頁面
    // });

code1通常用在頁面加載時直接觸發，而code2的方式可後期檢查更新。