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

Application Cache

在本身作的開源項目( https://github.com/etoah/Lucienphp

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

目錄

  • Manifest的特色
  • 兼容性
  • 用法
  • 注意事項
  • 對企業內部應用的啓示
  • 參考

Manifest的特色

  • 離線瀏覽: 用戶能夠在離線狀態下瀏覽網站內容。
  • 更快的速度: 由於數據被存儲在本地,因此速度會更快.
  • 減輕服務器的負載: 瀏覽器只會下載在服務器上發生改變的資源。
  • 同源策略。

兼容性

雖然說兼容性並不樂觀,但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();   
}

注意事項

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

對企業內部應用的啓示

對與咱們企業內部應用來講,可能這些特性並無什麼用處,可是隻要結合AngularJS等MV*的框架,後端直接返回json 數據,
前端直接用html靜態文件,每次用戶訪問時,載入的時只是載入本地Application Cache,這樣的話有如下優點:

  • 直接從瀏覽器緩存載入,減小DNS查詢,TCP鏈接,服務器處理和網絡時間,達到首屏載入時間小於1s,垂手可得。
  • 前端和後端強制隔離,耦合只有WebAPI 或是Rest接口,提升可維護性。
  • 服務器端不用拼接html標籤,只需處理數據,部份處理放在客戶端,服務器性能更佳。

參考

[1] HTML5離線存儲之Application Cache
[2] HTML5 緩存: cache manifest

相關文章
相關標籤/搜索