劉逸的留意世界

在上一篇文章中，提及了application cache使得web app離線運作得以實現。但暫存的機制只是使得，靜態的網頁資料得以在offline之下，繼續運作。若欲在離線環境讓傳統的網頁系統的互動服務持續進行，這又是一回事了，這也值得我們去細細推敲，到底在HTML5的世界中如何使上述情況發生。

 

推敲吧～從已經的世界著手！撇開HTML5，試想在伺服器端要使網頁動態產生到底需要哪些要素？我想不外乎三個要素：1.網頁程式語言：、2.網頁程式語言的容器(或想成解譯器)、3.儲存空間。當用戶端發出一個請求時會開始找對伺服器端對應的網頁程式，而網頁程式的執行需要有解譯器在場方能看懂，又看懂後需要去儲存空間存取所需的資訊方可。而網頁程式語言不就是現在的ASP、PHP、JSP等；又網頁程式語言的直譯器不就是IIS(看的懂ASP)、Apache(看的懂PHP)、Tomcat(看的懂JSP)等；而當程式被直譯器解譯的過程中，若需要資料存取則需到常見的資料庫如MSSQL、MySQL、Oracle等地方去做存取資料。當程式執行並取得所需的資料後，就可以以照實際的情況動態產生出用戶端所需的HTML檔案出來，並傳給用戶端於瀏覽器中呈現。

 

善用反射的概念來思考。試想：如果今天我們把伺服器端的三大要素接移植到用戶端中，那用戶不就也可以產生動態的HTML5，而不需依靠伺服器端了。如同前段所述，動態HTML的產生主要需要有網頁程式語言、直譯器跟儲存空間等。這些在HTML5中真的都提供了，我們可以一一對應如下：網頁程式語言，在用戶端就是javascript此一網頁程式語言；直譯器，也就是用戶端使用web app時，必定會開啟的瀏覽器(如IE、chrome、firefox、safari…等等)；而本地端的儲存裝置，HTML5中一開始規劃了local storage、indexedDB、web SQL等方式(注意：在2010年web SQL正式已經被官方拿掉，不再是HTML5標準支援的儲存方式了，主要原因乃是其核心為SQLite，其乃使用RDB概念，效能較差)。

 

酷～動態的互動系統在本地端正運可以順利執行。搭配了application cache的機制，讓離線、連線的狀態可以被自動判斷，離線的網頁運作亦得以提供。現在，在加上HTML5的瀏覽器當成直譯器後，利用javascript撰寫網頁程式，之後在經由HTML5瀏覽器所提供的local storage跟indexedDB，使得動態的網頁生成，正式可在本地端進行，在這樣的世界中，若一遇到斷線，就算需要存取資料庫或檔案的互動服務，也可以就由本地端將伺服器端的資料先預載，如此後續資訊的取得也可以從本地端著手。故離線時亦可確保使用者可以跟系統互動，並且保持原本web app的運作服務，不會有網路中斷的問題產生。

 

當然offline HTML5的離線作業，目前也面臨著不少議題的挑戰，第一個是在空間有限之下，不可能將伺服器端整個服務跟資料都下載到本地端，所以如何精準的預先擷取資訊，成為一大挑戰；另外，資訊在本地端的運作，將來重新可連線時，整個的同步化機制又將如何處理，也事另一個議題。未來這些議題將逐步被許多開源的架構所解決或加以實做。屆時，整個HTML5將涵蓋online/offline的service，也將進一步顛覆傳統一定得上網才能使用web app的觀念。

 

小心囉！HTML5的離線作業對人們的網頁系統運作將帶來革命性的改變～