HTML5 Application cache初探和企業應用啓示

時間 2019-12-11

標籤 html5 html application cache 初探企業應用啓示欄目 HTML5 简体版

原文原文鏈接

Application Cache

在本身作的開源項目（ https://github.com/etoah/Lucien ）php

用到了HTML5 的Application Cache,現總結以下：css

雖然說兼容性並不樂觀，但IE8，9這種老東西，兼容開發量又大，界面顏值又不高，BSIE.html

建立一個和html同名的manifest文件，好比頁面爲index.html，那麼能夠建一個index.manifest的文件，而後給index.html的html標籤添加以下屬性便可：前端

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

CACHE:（必須）html5

標識出哪些文件須要緩存，能夠是相對路徑也能夠是絕對路徑。java

a.csshttp://yanhaijing.com/a.css

NETWORK:（可選）git

這一部分是要繞過緩存直接讀取的文件，可使用通配符＊。github

下面的代碼「login.asp」永遠不會被緩存，且離線時是不可用的：json

NETWORK:login.asp

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

NETWORK:* ###FALLBACK:（可選）

FALLBACK
指定了一個後備頁面，當資源沒法訪問時，瀏覽器會使用該頁面。該段落的每條記錄都列出兩個 URI—第一個表示資源，第二個表示後備頁面。兩個 URI 都必須使用相對路徑而且與清單文件同源。可使用通配符。

下面的例子中，若是沒法創建因特網鏈接，則用「404.html」替代 /html5/ 目錄中的全部文件。

FALLBACK:/html5/ /404.html

下面的例子中，則用「404.html」替代全部文件。

FALLBACK:*.html /404.html

示例

CACHE MANIFEST
CACHE:
#v0.0.0
css/editor.css
css/icons.woff
#js
js/require.js
js/main.js
#html
index.html
demo.html

NETWORK:
*
FALLBACK:
*

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) ｛  
  window.applicationCache.update();   
｝

application cache會默認緩存當前頁面！！！就算咱們有以下設置：NETWORK:*.
必須爲UTF-8編碼.
第一行必須爲CACHE MANIFEST
須要添加 MIME TYPE：text/cache-manifest
當更新後，第一次訪問並非蛭新的頁面，刷新後纔會更新。若是manifest文件，或者內部列舉的某一個文件不能正常下載，整個更新過程都將失敗，瀏覽器繼續所有使用老的緩存。
瀏覽器對緩存數據的容量限制可能不太同樣（某些瀏覽器設置的限制是每一個站點 5MB）。
當一個資源被緩存後，該瀏覽器直接請求這個絕對路徑也會訪問緩存中的資源。
站點中的其餘頁面即便沒有設置manifest屬性，請求的資源若是在緩存中也從緩存中訪問。
當manifest文件發生改變時，資源請求自己也會觸發更新。