在本身作的開源項目( 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(); }
對與咱們企業內部應用來講,可能這些特性並無什麼用處,可是隻要結合AngularJS等MV*的框架,後端直接返回json 數據,
前端直接用html靜態文件,每次用戶訪問時,載入的時只是載入本地Application Cache,這樣的話有如下優點:
[1] HTML5離線存儲之Application Cache
[2] HTML5 緩存: cache manifest