2010年10月7日 星期四

瀏覽器離線瀏覽之技術

http://www.techbang.com.tw/posts/3751-why-o-column-can-also-be-used-offline-gmail
作者:謝子斌(Zi-Bin) 發表於 2010年10月07日 12:38

對很多宅男宅女來說,可以沒有電視、沒有冰箱,但千萬不能沒有網路,如果哪天網路斷線,肯定有如世界末日。而且現在大家都習慣在網路上編輯 Google Docs或更新Wordpress部落格,要是網路斷線,難道所有事情都得停擺?這時候,離線上網的技術就派上用場了。

離線上網也要標準化

「離線上網」聽起來好像有點矛盾,「離線編輯、瀏覽網頁」大家就比較容易理解了。沒有網路當然不能玩Internet,但你還是可以瀏覽離線、也就 是暫存在電腦裡的內容,甚至把編輯完的文件先儲存在電腦上,連線時再上傳就好。這些離線處理技術其實很久以前就存在了,比如cookies、第三方插件式 儲存(Plugin Based Storage)等等,但是cookies的安全性低、容量有限,裝外掛又麻煩,已經無法應付現在超級複雜的網頁存取需求,所以離線上網也才會需要標準 化。

▲在網路不穩或頻寬有限的情況下,離線作業就顯得特別重要。

4大離線上網技術

用瀏覽器儲存網頁資料的最主要標準技術有4種,分別是應用程式快取(AppCache)、網路儲存(WebStorage)、以及提供資料庫離線儲存的Web SQL Databases和IndexedDB。

一、應用程式快取(AppCache)

網頁應用程式(WebApps)可以將檔案儲存在快取裡面,就算使用者離線了,還是可以存取資料,這些檔案可以是HTML、CSS、 JavaScript等等的任何元件。 透過AppCache,瀏覽器可以指定哪些文件要在離線時顯示並預先下載,所以當你在離線時重新載入頁面,網頁會照樣出現,也可以視連線狀況來調整頁面的 顯示方式,比如說CSS就可以有連線與離線兩種樣式。 AppCache可以加快網頁存取速度、減少伺服器負擔,Chrome、Firefox、Opera、Safari等等的瀏覽器都支援這個技術。

二、網路儲存(webstorage)

AppCache是讓使用者儲存文件的,W3C制定的webstorage則是讓程式人員來儲存資料。它有兩種儲存方式:頁面組儲存 (sessionStorage)和本機儲存(localStorage),頁面組儲存在關閉瀏覽頁面後,資料就會不見,本機儲存則是會永久保留,除非你 把它刪除。webstorage會按網址來儲存資料,域名完全相同的網頁會使用同一個儲存空間,辨別的精準度到埠口跟傳輸協定也有影響。比如 http://www.example.org和http://abc.example.org就是分屬於兩個不同的域名空間,http: //example.org與https://example.org以及http://example.org:80與http: //example.org:8000也都不同。

▲WebStorage是使用 key-value 的形式來儲存資料的。

▲你可以自己去調整每個域名的上限。比方在opera輸入opera:webstorage,但前提是必須要拜訪過支援webstorage的網站,才會看到新增的項目。

▲大部分支援webstorage的瀏覽器,儲存容量都以5MB為上限。

三、Web SQL Database

Web SQL Database可以讓SQL資料庫在客戶端運作,不遇它還沒成為標準。一個技術要能夠成為標準,必須得到兩個以上的瀏覽器支援,Web SQL Database已經達成這個條件,但是它的資料庫語法是按照SQL Lite來部署,SQL Lite的語法很接近SQL,只是還存在少許偏差。所以W3C決定必須至少有另外一個SQL版本也可以同時運用Web SQL Database技術下,才可以正式建議此技術為標準。

▲Web SQL Database的語法和SQL相似。

四、indexedDB

IndexedDB目前只是一個草案,它可以算是webStorage和Web SQLDatabase的混合體,是以本機儲存(localStorage)的概念來運作,而且可以在儲存的某些數據區域裡標示目錄索引(index)。 indexedDB最適合運用在線上遊戲,你可以告訴IndexedDB用遊戲的內容來建立目錄索引,目前只有Firefox 4支持這個標準。

以上這些技術可以互相搭配使用,Gmail行動版就是結合AppCache與webstorage的應用之一。