【O專欄】為什麼離線也可以用Gmail？

對很多宅男宅女來說，可以沒有電視、沒有冰箱，但千萬不能沒有網路，如果哪天網路斷線，肯定有如世界末日。而且現在大家都習慣在網路上編輯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的應用之一。

作者簡介：謝子斌 ／Zi Bin, Cheah

馬來西亞華人，網路標準專家。長期從事網際網路標準研究，經常來往於中國、印尼、馬來西亞、北歐等地宣導。現於挪威Opera軟體公司奧斯陸總部擔任網路標準講師（Web Evangelist）。（Twitter、個人網站）