天天看點

如何在ASP.NET中生成HTML5離線Web應用

傳統的Web應用程式有一個很大的症結是當使用者的網絡連接配接不好時,應用會加載失敗,為了 解決這一問題,HTML5中引入了Web的離線工作的功能。離線功能使得Web應用程式類似于本機應用程式,當斷開網絡連接配接時可以繼續浏覽未浏覽完成的内 容,離線功能的另一個好處是可以永久緩存靜态的内容,而沒有緩存過期的限制,這樣很大程度上加速了網頁的加載速度。

離線應用的建立

不同于傳統的緩存機制,HTML5定義了一套獨立的緩存機制,有一個單獨的檔案來記錄要緩存的檔案清單,這就意味着使用者可以自己決定哪些檔案需要緩 存。離線應用看起來是個非常酷的特性,并且在ASP.NET應用程式中建立一個離線Web應用也是非常簡單的,建構離線web應用大概可分兩個步驟:

(1) 建立一個離線清單檔案

HTML5離線緩存是基于這個緩存清單來确定緩存檔案的,如下的圖檔顯示這個檔案的格式:
如何在ASP.NET中生成HTML5離線Web應用

可以看到這個檔案是以CACHE MANIFEST開頭的,#後面的内容是注釋,表明目前檔案的版本号,值得注意的是當這個檔案更新的時候,應用程式會重新加載緩存的檔案,是以當緩存的文 件有更新的時候,一個讓程式重新加載緩存檔案的标準方法是修改這個清單中的版本号,這樣應用程式就知道需要重新加載緩存的檔案。上面的清單的版本号是 0.2,如果清單中的某個檔案有更新,則隻需要把0.2修改為0.3即可。

如上清單中的路徑都是相對路徑,所有的相對路徑都是基于這個清單檔案所在的路徑的。我們也可以使用絕對路徑來确定要緩存的檔案的。

(2) 在ASP.NET應用程式中把清單資訊通知給浏覽器

HTML5規範規定這個清單檔案必須以text/cache-manifest格式發送到用戶端,但是現在沒有标準的字尾來識别這一類型檔案。在ASP.NET中,可以通過一種變通的方式來達到這一目的。 1)把清單檔案儲存為單獨檔案,可以加任何字尾名,假設儲存為manifest.mf。 2)建立一個ASP.NET handler,Manifest.ashx 代碼如下:

然後在首頁頁面中把這個handler辨別為清單檔案:

如下是添加了緩存清單的aspx頁面:

如何在ASP.NET中生成HTML5離線Web應用

以上兩個步驟就完成了離線應用程式的建構,當程式第一次加載時,會加載這個緩存清單,并且根據清單中檔案清單緩存檔案,當浏覽器再次加載時就不會去 伺服器中加載緩存過的檔案,可以想象,如果我們把一些靜态的網頁添加為緩存檔案,那麼使用者隻需要第一次下載下傳這些緩存的檔案,以後就可以向本地應用一樣,無 需再連接配接網絡。

需要注意的點

雖然離線應用是一個非常酷的應用,但是在使用的過程中也會出現一些困擾,當我們更改頁面的内容時,會發現修改的内容并沒有起作用,原因可能是我們沒 有更新緩存清單的版本,另外即使緩存清單更改完成後,浏覽器也并不是立即會更新緩存的内容,浏覽器下載下傳和緩存内容完全是在背景自動進行的,是以在實際的開 發過程中,因為有這些困擾,是以最好是在開發過程中禁用這種離線緩存的功能,等項目釋出的時候再添加。我們無法控制浏覽器的緩存過程,但是離線應用提供了 一些接口,我們可以調用這些API來讓浏覽器更新緩存的内容,ApplicationCache.update() 是用來更新緩存的内容,ApplicationCache.swapCache() 是加載最新版的Web應用。

離線應用在浏覽器中的表現

以下是離線應用在各個浏覽器中的表現形式,當用浏覽器打開應用了離線功能的頁面,浏覽器的表現也是不一樣的,FireFox中會提示是否容許儲存内容到本地,效果如下:

如何在ASP.NET中生成HTML5離線Web應用

當點選Allow,浏覽器就會自動下載下傳要緩存的内容,并儲存到本地,當再次打開頁面時,浏覽器首先會加載本地存儲的内容。

在Chrome和safari浏覽器下,浏覽器會自動緩存内容而不會有任何的提示,但在Chrome中你可以檢視緩存的内容:

如何在ASP.NET中生成HTML5離線Web應用

總結

以上就是介紹如何在ASP.NET中應用HTML5離線功能,在其它的平台中的設定也是類似的,不同點在于如何把緩存檔案以text/cache- manifest格式發送到用戶端。HTML5離線應用是HTML5規範中的一個非常重要的特性,使用者可以随時随地打開浏覽Web應用,而不需要關心網絡 是否已經連接配接,這極大地提高了Web應用在使用者中的體驗度,也極大地提高應用程式的加載速度。

繼續閱讀