html5離線儲存,application cache,manifest使用體驗

時間 2019-11-24

標籤 html5 html 離線儲存 application cache manifest 使用體驗欄目 HTML5 简体版

原文原文鏈接

最近在APP裏新增一個論壇模塊，爲了快速地完成，決定將整個論壇模塊作成WEB APP，WEB APP最致命的就是用戶體驗問題，頁面跳轉和過多的請求，大大影響了加載速度和用戶體驗，這時候我想到了HTML5的離線儲存。

通過簡單的瞭解以後，以爲這個能夠有，但很快我又就發現，HTML5離線儲存並不適於此次的項目。

緣由以下：

一、一旦頁面指定了manifest，那麼這個頁面就必定被儲存下來。若是有一個動態頁面，不想緩存頁面的內容，只想緩存頁面所引用的css,js,img，但抱歉，這個沒有辦法作到。我想是由於瀏覽器與服務器既定的交互邏輯致使必需要這樣設計，不然我就很不理解設計者了。

二、 page.html?id=1和 page.html?id=2被存儲成了兩個html不一樣的頁面，想一想當用戶瀏覽了1000個不一樣的貼子的時候，瀏覽器就下載儲存了1000個沒有意義的頁面。

三、第一次訪問page.html?id=1，緩存成功後。再訪問 page.html?id=2，不會去讀緩存，這是由於因爲參數變了，被認爲地址不同，不算是第二次請求，因此請求 page.html?id=2時依然會從新加載 manifest指定的文件。

四、而我爲了快速完成，進出層級時都作成了頁面跳轉，免不了傳不少參數，並且每一個貼子不同的id，因此這種狀況下離線緩存基本上沒有意義，由於至關大部份請求都屬於第一次訪問。

五、再且，根據網上的資料，進行離線儲存時會再次下載一次對應的數據，意思就是說，第一次訪問時，使用了離線儲存技術的頁面加載時所消耗的時間比沒有使用這個技術的頁面要多，並且耗的流量更大。

所以， manifest極不適合含有動態參數頁面跳轉的狀況下使用，最好是一個頁面，而後徹底的ajax請求。

另附帶資料: http://www.cnblogs.com/svage/archive/2011/11/24/2261365.html

html5離線應用application cache

1、應用場景 css

咱們一般使用瀏覽器緩存在用戶磁盤上存儲web單頁，在用戶再次瀏覽的時候已節省帶寬，但即使這樣，依然沒法在沒有Internet的狀況下訪問Web。爲了讓web應用程序在離線狀態也能被訪問。html5經過application cache API提供離線存儲功能。前提是你須要訪問的web頁面至少被在線訪問過一次。 html

離線本地存儲和傳統的瀏覽器緩存有什麼不一樣呢？ html5

一、瀏覽器緩存主要包含兩類： web

a.緩存協商：Last-modified,Etag 面試

瀏覽器向服務器詢問頁面是否被修改過，若是沒有修改就返回304，瀏覽器直接瀏覽本地緩存文件。不然服務器返回新內容。 ajax

b.完全緩存：cache-control,Expires 瀏覽器

經過Expires設置緩存失效時間，在失效以前不須要再跟服務器請求交互。緩存

二、離線存儲爲整個web提供服務，瀏覽器緩存只緩存單個頁面；服務器

三、離線存儲能夠指定須要緩存的文件和哪些文件只能在線瀏覽，瀏覽器緩存沒法指定； app

四、離線存儲能夠動態通知用戶進行更新。

2、如何實現

離線存儲是經過manifest文件來管理的，須要服務器端的支持，不一樣的服務器開啓支持的方式也是不一樣的。

CACHE MANIFEST//必須以這個開頭 version 1.0 //最好定義版本，更新的時候只需修改版本號 CACHE:
    m.png
    test.js
    test.css
NETWORK:
    *
FALLBACK
    online.html offline.html

CACHE指定須要緩存的文件；NETWORK指定只有經過聯網才能瀏覽的文件，*表明除了在CACHE中的文件；FALLBACK每行分別指定在線和離線時使用的文件

要讓manifest管理存儲，還須要在html標籤中定義manifest屬性，以下：

<!DOCTYPE HTML> <html lang="en" manifest='test.manifest'> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>

最後別忘了，這些應用須要服務器支持。

Apache服務器開啓支持的方式是：在conf/mime.types中添加一段代碼：

test/cache-manifest manifest

IIS服務器開啓方式：

右鍵--HTTP---MIME映射下，單擊文件類型---新建---擴展名輸入manifest，類型中輸入test/cache-manifest

3、經過JS動態控制更新

applicationCache對象提供個了一些方法和事件，管理離線存儲的交互過程。經過在firefox8.0的控制檯中輸入window.applicationCache能夠看到這個對象的所

有屬性和事件方法。

applicationCache.onchecking = function(){ //檢查manifest文件是否存在 }

applicationCache.ondownloading = function(){ //檢查到有manifest或者manifest文件  //已更新就執行下載操做  //即便須要緩存的文件在請求時服務器已經返回過了 }

applicationCache.onnoupdate = function(){ //返回304表示沒有更新，通知瀏覽器直接使用本地文件 }

applicationCache.onprogress = function(){ //下載的時候週期性的觸發，能夠經過它  //獲取已經下載的文件個數 }

applicationCache.oncached = function(){ //下載結束後觸發，表示緩存成功 }

application.onupdateready = function(){ //第二次載入，若是manifest被更新  //在下載結束時候觸發  //不觸發onchched  alert("本地緩存正在更新中。。。"); if(confirm("是否從新載入已更新文件")){
       applicationCache.swapCache();
       location.reload();
   }
}

applicationCache.onobsolete = function(){ //未找到文件，返回404或者401時候觸發 }

applicationCache.onerror = function(){ //其餘和離線存儲有關的錯誤 }