Asp.net離線應用

傳統的Web應用程序有一個很大的癥結是當用戶的網絡鏈接很差時,應用會加載失敗,爲了 解決這一問題,HTML5中引入了Web的離線工做的功能。離線功能使得Web應用程序相似於本機應用程序,當斷開網絡鏈接時能夠繼續瀏覽未瀏覽完成的內容,離線功能的另外一個好處是能夠永久緩存靜態的內容,而沒有緩存過時的限制,這樣很大程度上加速了網頁的加載速度。html

離線應用的建立web

不一樣於傳統的緩存機制,HTML5定義了一套獨立的緩存機制,有一個單獨的文件來記錄要緩存的文件列表,這就意味着用戶能夠本身決定哪些文件須要緩 存。離線應用看起來是個很是酷的特性,而且在ASP.NET應用程序中建立一個離線Web應用也是很是簡單的,構建離線web應用大概可分兩個步驟:瀏覽器

(1)建立一個離線清單文件緩存

HTML5離線緩存是基於這個緩存清單來肯定緩存文件的,以下的圖片顯示這個文件的格式:服務器

clip_image002

能夠看到這個文件是以CACHE MANIFEST開頭的,#後面的內容是註釋,代表當前文件的版本號,值得注意的是當這個文件更新的時候,應用程序會從新加載緩存的文件,因此當緩存的文件有更新的時候,一個讓程序從新加載緩存文件的標準方法是修改這個清單中的版本號,這樣應用程序就知道須要從新加載緩存的文件。上面的清單的版本號是 0.2,若是清單中的某個文件有更新,則只須要把0.2修改成0.3便可。網絡

如上清單中的路徑都是相對路徑,全部的相對路徑都是基於這個清單文件所在的路徑的。咱們也可使用絕對路徑來肯定要緩存的文件的。asp.net

(2)在ASP.NET應用程序中把清單信息通知給瀏覽器ide

HTML5規範規定這個清單文件必須以text/cache-manifest格式發送到客戶端,可是如今沒有標準的後綴來識別這一類型文件。在ASP.NET中,能夠經過一種變通的方式來達到這一目的。.net

1)把清單文件保存爲單獨文件,能夠加任何後綴名,假設保存爲manifest.mf。htm

2)新建一個ASP.NET handler,Manifest.ashx

代碼以下:

1.        <%@ WebHandler Language="C#" Class="Manifest" %> 1.        using System; 2.        using System.Web; 3.         4.         5.        public class Manifest : IHttpHandler { 6.         7.            public void Proce***equest (HttpContext context) { 8.            context.Response.ContentType = "text/cache-manifest"; 9.            context.Response.WriteFile(context.Server.MapPath("manifest.mf")); 10.          } 11.           12.          public bool IsReusable { 13.              get  14.              { 15.                  return false; 16.              }    17.          } 18.       19.      }

而後在首頁頁面中把這個handler標識爲清單文件:

1.        <html manifest="Manifest.ashx"">

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

clip_image004

以上兩個步驟就完成了離線應用程序的構建,當程序第一次加載時,會加載這個緩存清單,而且根據清單中文件列表緩存文件,當瀏覽器再次加載時就不會去服務器中加載緩存過的文件,能夠想象,若是咱們把一些靜態的網頁添加爲緩存文件,那麼用戶只須要第一次下載這些緩存的文件,之後就能夠向本地應用同樣,無 需再鏈接網絡。

須要注意的點

雖然離線應用是一個很是酷的應用,可是在使用的過程當中也會出現一些困擾,當咱們更改頁面的內容時,會發現修改的內容並無起做用,緣由多是咱們沒有升級緩存清單的版本,另外即便緩存清單更改完成後,瀏覽器也並非當即會更新緩存的內容,瀏覽器下載和緩存內容徹底是在後臺自動進行的,因此在實際的開 發過程當中,由於有這些困擾,因此最好是在開發過程當中禁用這種離線緩存的功能,等項目發佈的時候再添加。咱們沒法控制瀏覽器的緩存過程,可是離線應用提供了一些接口,咱們能夠調用這些API來讓瀏覽器更新緩存的內容,ApplicationCache.update() 是用來更新緩存的內容,ApplicationCache.swapCache() 是加載最新版的Web應用。

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

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

clip_image006

當點擊Allow,瀏覽器就會自動下載要緩存的內容,並保存到本地,當再次打開頁面時,瀏覽器首先會加載本地存儲的內容。

在Chrome和safari瀏覽器下,瀏覽器會自動緩存內容而不會有任何的提示,但在Chrome中你能夠查看緩存的內容:

clip_image008

同時也能夠看到當前緩存的狀態,如上的圖片顯示當前的狀態是UNCACHED,意思是尚未把要緩存的內容緩存。。

總結

以上就是介紹如何在ASP.NET中應用HTML5離線功能,在其它的平臺中的設置也是相似的,不一樣點在於如何把緩存文件以text/cache- manifest格式發送到客戶端。HTML5離線應用是HTML5規範中的一個很是重要的特性,用戶能夠隨時隨地打開瀏覽Web應用,而不須要關心網絡是否已經鏈接,這極大地提升了Web應用在用戶中的體驗度,也極大地提升應用程序的加載速度。

武漢asp.net

相關文章
相關標籤/搜索