面向3G的手機富瀏覽器的設(shè)計與實現(xiàn)

莫曉斌 付威 尹輝

1引言

隨著移動通信及3G的不斷普及，移動互聯(lián)網(wǎng)的用戶數(shù)量正在急劇增加，據(jù)工業(yè)和信息化部的統(tǒng)計，截止到2010年6月，國內(nèi)用戶手機數(shù)量已達(dá)到8.05億：據(jù)中國互聯(lián)網(wǎng)絡(luò)信息中心(CNNIC)發(fā)布的《第26次中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》顯示，截止到7月15日，中國手機網(wǎng)民的規(guī)模更達(dá)到了2.77億。

手機瀏覽器作為手機上網(wǎng)最重要的工具，對用戶的上網(wǎng)體驗起著至關(guān)重要的作用。隨著3G時代的到來，用戶對手機上網(wǎng)的要求已不僅僅局限于對文字和圖像的瀏覽，大容量、多格式的富媒體內(nèi)容以及更強的互動性體驗將對瀏覽器提出更大的挑戰(zhàn)。目前的手機瀏覽器普遍存在兩方面的問題，一方面是在富媒體的呈現(xiàn)和互動性上不能滿足用戶的要求，另一方面手機瀏覽器不能很好地適配各種不同的手機終端。針對這種情況，本研究旨在擴(kuò)展傳統(tǒng)手機瀏覽器架構(gòu)的基礎(chǔ)上，提出手機富媒體瀏覽器的設(shè)計思想及核心實現(xiàn)，為用戶帶來更好的交互體驗并策略性地去解決手機瀏覽器對各種手機終端的適配性問題。本文將先分析手機瀏覽器的發(fā)展現(xiàn)狀：然后介紹我們所設(shè)計的富瀏覽器的工作原理和流程，分析手機富瀏覽器的兩個核心技術(shù)引擎：最后將對這次設(shè)計進(jìn)行總結(jié)和對未來進(jìn)行展望。

2手機瀏覽器發(fā)展現(xiàn)狀

手機瀏覽器作為用戶使用移動互聯(lián)網(wǎng)的基本工具，可以更好地使用戶在互聯(lián)網(wǎng)沖浪中體會到更大的樂趣，它的發(fā)展過程可分為3個階段。

(1)第一階段——WAP階段

WAP協(xié)議在移動互聯(lián)網(wǎng)的發(fā)展中起著重要的作用，但是一方面由于WAP表達(dá)能力有限且與互聯(lián)網(wǎng)的HTM不兼容，另一方面受用戶終端和帶寬的限制，雖然WAP業(yè)務(wù)推出的時間比較早，但用戶寥寥。當(dāng)然經(jīng)過多年的發(fā)展和積累，當(dāng)前WAP業(yè)務(wù)已經(jīng)比較豐富。這個階段的代表瀏覽器有WINWAP以及WAPSILON等。

(2)第二階段——Transcoding階段

在此階段中提出了兩種方案，一種是完全依賴于服務(wù)器對WWW資源的解析和處理，而對終端不做要求。提供這種方案的包括Cisco的CTE(Content TransformationEngine)／IBM的Transcoding Publisher以及Google提出的移動搜索服務(wù)。另一種方案是服務(wù)器+客戶端的形式，這種方案的代表商有著名Opera的Opera Mini，以及我國國內(nèi)的UCWEB。

(3)第三階段——桌面級瀏覽器

桌面瀏覽器技術(shù)的不斷增強和互聯(lián)網(wǎng)愈來愈豐富的應(yīng)用相互促進(jìn)，使得越來越多的網(wǎng)絡(luò)滲透應(yīng)用到各個角落，為了能在手機端上提供更好的用戶體驗和更強的擴(kuò)展功能，真正的桌面級瀏覽器應(yīng)運而生。其中最著名的還是蘋果的基于Webkit內(nèi)核的Safari，基于Presto的Opera以及Firefox等。

但是Transcodinq也有一定的局限性，一是由于瀏覽器的原因?qū)е?，二是現(xiàn)在大量的這類網(wǎng)頁在轉(zhuǎn)化的時候難度變大。由于手機瀏覽器的出現(xiàn)和發(fā)展只有十年左右的時間，相關(guān)文獻(xiàn)研究還比較少，大部分學(xué)者的研究都集中在語言和協(xié)議的轉(zhuǎn)換方面。其中較具代表性的有：劉杰和束博提出的基于信息提取和排除的方法…，來解決互聯(lián)網(wǎng)上WEB應(yīng)用的HTML代碼非常的不規(guī)范問題；BUET的Ashik kan和Liakot Ali提出了一種API模型來解決HTML的內(nèi)容解析上的兼容性問題；Vu Hong Khiem，KibongKang and Keung Hae Lee提出了MiniWap的瀏覽器技術(shù)來轉(zhuǎn)化基于JavaScript腳本和動態(tài)應(yīng)用的網(wǎng)頁將HTML轉(zhuǎn)化成WML的轉(zhuǎn)換器LazyWAP。

總而言之，雖然手機瀏覽器發(fā)展至今有了很大的突破，但是還存在如下一些問題：

首先是用戶交互性差，不具備提供良好用戶體驗的功能。主要原因是支持的協(xié)議和瀏覽信息的能力有限，大部分的瀏覽器只能瀏覽常規(guī)的HTML／WML網(wǎng)頁，不能很好地呈現(xiàn)流媒體視頻、三維等3G時代富媒體的數(shù)字內(nèi)容；換言之，目前的手機瀏覽器都可以被稱為“瘦”瀏覽器，主要適應(yīng)文字、圖片形式的數(shù)字內(nèi)容，卻無法為用戶提供好的交互體驗，這是3G時代富媒體應(yīng)用對瀏覽器技術(shù)提出的新挑戰(zhàn)。

其次，移動終端平臺種類繁多，而手機瀏覽器都要依賴于某一平臺使用，同時還有速度與資源緊張等問題。另外，企業(yè)的數(shù)據(jù)源是復(fù)雜多樣的，包括Web／WAP網(wǎng)站和OA，ERP，BI等企業(yè)內(nèi)部系統(tǒng)。如何有效地進(jìn)行數(shù)據(jù)的采集、整合和發(fā)布，為手機用戶提供服務(wù)也是目前亟待解決的關(guān)鍵問題。

再次，目前對手機瀏覽器技術(shù)的研究主要集中在文本和協(xié)議的轉(zhuǎn)換方面，對手機瀏覽器架構(gòu)以及多媒體元素的呈現(xiàn)方式上研究較少。

基于對瀏覽器的架構(gòu)研究，本文提出了下一代面向3G的富瀏覽器設(shè)計，它不但能夠提供更多的富媒體內(nèi)容，給用戶帶來更好的交互性體驗，還有效地解決了由于終端差異帶來的問題。

3面向3G的手機富瀏覽器的工作原理和流程

相對普通瀏覽器而言，富瀏覽器能提供更豐富的用戶體驗，支持文字、圖片、動畫、音頻、視頻、地圖導(dǎo)航、3D全景等富媒體內(nèi)容瀏覽，同時提供更靈活方便的互動方式。富媒體與多媒體技術(shù)最大的不同在于，多媒體應(yīng)用一般沒有交互性，而富媒體卻增加了交互性概念。

除了支持富媒體以外，富瀏覽器使用MPEG，WAP2.0，XML，Web Service，J2ME等系列國際標(biāo)準(zhǔn)：在協(xié)議方面，支持自定義手機端與手機代理數(shù)據(jù)交互協(xié)議，同時支持TCP和UDP等底層傳輸協(xié)議，整個瀏覽器具有極強的靈活性。

與此同時，由于現(xiàn)在不同手機的硬件條件差距很大，為了在各類手機中都達(dá)到最佳的富媒體顯示，應(yīng)用了手機自適應(yīng)技術(shù)，使移動終端都顯示出與自身硬件最匹配的富媒體內(nèi)容，也為用戶提供了更好的體驗。

3.1富瀏覽器工作原理

富瀏覽器的設(shè)計核心部分為架構(gòu)的核心層，核心層通過與顯示層、系統(tǒng)層的交互，實現(xiàn)富媒體數(shù)據(jù)的下載、播放、顯示等。核心層中富媒體數(shù)據(jù)傳輸引擎負(fù)責(zé)根據(jù)用戶的請求構(gòu)建網(wǎng)絡(luò)連接，從服務(wù)器獲取數(shù)據(jù)。各種解析器對獲取到的網(wǎng)絡(luò)數(shù)據(jù)進(jìn)行解析，根據(jù)富媒體的布局排版、繪制原則，將富媒體數(shù)據(jù)交與顯示層進(jìn)行呈現(xiàn)。在此架構(gòu)中，富媒體數(shù)據(jù)引擎是富媒體數(shù)據(jù)定義、獲取、顯示的核心，手機自適應(yīng)引擎是保證富媒體瀏覽器在不同手機終端上運行的核心，下文將對就此設(shè)計做詳細(xì)介紹。整個富媒體瀏覽器的架構(gòu)如圖1所示：

在富瀏覽器架構(gòu)中，核心層中的重要部分為各種引擎，其包含了所支持的W3C技術(shù)規(guī)范的解析器。這樣架構(gòu)的富瀏覽器與平臺無關(guān)，與顯示無關(guān)，可以方便地移植到不同的平臺上，其引擎層負(fù)責(zé)解析生成帶有顯示信息和控制信息的中間結(jié)果。

3.2富瀏覽器工作流程

富媒體手機瀏覽器基本處理流程包括以下幾個步驟：

(1)數(shù)據(jù)傳輸模塊根據(jù)Ul傳遞的請求地址提取協(xié)議類型字段，選擇相應(yīng)的協(xié)議請求模塊。對于遠(yuǎn)程Web服

務(wù)器上的網(wǎng)頁，數(shù)據(jù)傳輸模塊通過HTTP／WAP協(xié)議獲取網(wǎng)頁數(shù)據(jù)。模塊將獲取的數(shù)據(jù)保存在緩存中供其它模塊使用。

(2)解析模塊通過詞法分析和語法分析，從緩存的文檔數(shù)據(jù)流中提取出HTML／WML標(biāo)簽和內(nèi)部屬性等數(shù)據(jù)，并對分離出的各個元素進(jìn)行分析、處理，建立DOM樹。

(3)遇到圖片標(biāo)記時，傳輸模塊將圖片對象獲取后，由解碼模塊對圖片數(shù)據(jù)進(jìn)行解壓、還原。

(4)JavaScript引擎負(fù)責(zé)解釋、執(zhí)行網(wǎng)頁文檔中的JavaScript腳本。它對腳本進(jìn)行詞法、語法、語義分析生成中間代碼，并根據(jù)中間代碼對DOM樹進(jìn)行操作、與瀏覽器進(jìn)行交互。

(5)CSS模塊接收由HTML／WML引擎?zhèn)鬟f過來的樣式，經(jīng)解析提取出規(guī)則，保存到樣式庫中。

(6)樣式解析完成后，樣式應(yīng)用部分為DOM樹中每個節(jié)點匹配、應(yīng)用樣式，構(gòu)造樣式樹。

(7)排版布局模塊為樣式樹中的每個Box計算大小、確定它們在網(wǎng)頁顯示區(qū)的位置。

(8)繪制部分調(diào)用瀏覽器顯示層的繪制接口將網(wǎng)頁的各個元素在相應(yīng)位置繪制出來。至此，整個打開網(wǎng)頁的流程結(jié)束。流程如圖2所示。

4手機富瀏覽器的核心引擎設(shè)計

4.1富媒體數(shù)據(jù)引擎

富媒體服務(wù)是聚合多種媒體數(shù)據(jù)(如音視頻、圖片、文字)動態(tài)、交互的體現(xiàn)。富媒體數(shù)據(jù)的播放引擎將利用J2ME的多媒體處理框架——移動多媒體API。其工作流程如圖3所示。

首先用戶通過富瀏覽器發(fā)出數(shù)字內(nèi)容請求，同時將包含手機配置以及所使用平臺的配置文件發(fā)送到手機代理，由手機代理與自適應(yīng)引擎交互，選擇最適合終端配置的數(shù)字內(nèi)容，由手機代理按照這種傳輸策略將數(shù)據(jù)傳送給手機終端。終端接收到數(shù)據(jù)后，由Datasource處理媒體數(shù)據(jù)的傳輸協(xié)議，生成統(tǒng)一格式的數(shù)據(jù)流，再由Player進(jìn)行解析和解碼，將準(zhǔn)備好的數(shù)據(jù)存儲到緩沖池。至此，即完成了數(shù)字內(nèi)容數(shù)據(jù)的處理。當(dāng)用戶進(jìn)行觀看數(shù)據(jù)的選擇時，調(diào)用相應(yīng)的模塊播放已就緒的內(nèi)容。

這里存在著幾個技術(shù)難點，即數(shù)據(jù)顯示粒度、數(shù)據(jù)獲取及解析線程和數(shù)據(jù)顯示的同步。下面給出詳細(xì)的解決方案并介紹流程圖中的手機代理。

(1)手機代理

手機代理模塊負(fù)責(zé)處理應(yīng)用服務(wù)器傳輸過來的數(shù)據(jù)，是與手機客戶端聯(lián)系的重要“中轉(zhuǎn)站”。手機代理的功能主要包括處理應(yīng)用服務(wù)器的內(nèi)容以及與手機終端的交互等。手機代理處理手機客戶端的請求，并與服務(wù)層交互，具體功能包括：處理手機代理端啟動登入：處理手機代理端退出：手機代理與信息發(fā)布平臺的信息互動：手機代理向手機客戶端發(fā)送二進(jìn)制流數(shù)據(jù)。

(2)富媒體數(shù)據(jù)顯示粒度控制

對于粒度控制問題，我們采取如圖5的數(shù)據(jù)結(jié)構(gòu)來解決：

網(wǎng)絡(luò)傳輸是以頁面(Page)作為傳輸單位，每個頁面包括一個或多個幀(Frame)，幀包括文本幀、圖片幀和聲音幀等。文本幀包括了一個頁面中所有的文本。

(3)富媒體獲取與解析同步

處理數(shù)據(jù)獲取與數(shù)據(jù)顯示的同步，主要采用最小粒度數(shù)據(jù)全部獲取解析完成后才刷新播放的方法，最小粒度根據(jù)網(wǎng)速與手機配置動態(tài)生成。手機視頻播放往往對手機資源要求很高，同時由于無線網(wǎng)絡(luò)的帶寬往往很小，對各種視頻流文件格式進(jìn)行壓縮以減小數(shù)據(jù)傳輸量，只有視頻播放的Player對象準(zhǔn)備就緒后，才開始播放視頻。

當(dāng)數(shù)據(jù)顯示線程監(jiān)測到一幀傳完之后，則刷新手機屏幕。也即是說，當(dāng)數(shù)據(jù)顯示線程拿到一個頁面的所有文本之后，則馬上顯示到手機屏幕上：之后，每拿到一張圖片，則顯示一張圖片。

首先，數(shù)據(jù)顯示線程向數(shù)據(jù)獲取線程發(fā)出url請求：數(shù)據(jù)獲取線程根據(jù)url連接網(wǎng)絡(luò)，獲取網(wǎng)絡(luò)數(shù)據(jù)流，并傳給數(shù)據(jù)解析器：數(shù)據(jù)解析器解析數(shù)據(jù)流，組裝成相應(yīng)的頁面元素和頁面?zhèn)鹘o數(shù)據(jù)線程線程。數(shù)據(jù)獲取與數(shù)據(jù)顯示是并行進(jìn)行的。數(shù)據(jù)獲取線程不斷地獲取數(shù)據(jù)，數(shù)據(jù)解析器不斷地進(jìn)行解析并傳給數(shù)據(jù)顯示線程。當(dāng)數(shù)據(jù)顯示線程監(jiān)測到一幀傳完之后，則刷新手機屏幕。

(4)富媒體數(shù)字內(nèi)容顯示設(shè)計

手機瀏覽器的顯示是根據(jù)頁面(Paqe)一幀(Frame)一元素(Element)三個層次來約束的。一個頁面包含一個或者多個幀，一個幀也可以包含一個或者多個元素?，F(xiàn)在定義的元素有：文本、圖像、聲音、導(dǎo)航條、天氣、欄目條等。手機瀏覽器根據(jù)讀取的元素類型和屬性進(jìn)行匹配顯示，但對元素的布局還沒有很好地實現(xiàn)。

圖片、聲音、動畫等是相對比較大的，所以我們把它以BASE64的編碼轉(zhuǎn)為文本的形式存放在服務(wù)器的資源容器中。

4.2手機終端自適應(yīng)引擎

終端自適應(yīng)引擎用于屏蔽前端移動網(wǎng)絡(luò)和移動設(shè)備的差異，根據(jù)配置文件來獲取不同終端的配置信息，并根據(jù)配置信息采取不同的傳輸策略，從而消除各種終端的接入差異問題。在此移動中間件之上，可以比較方便地開發(fā)部署各種移動應(yīng)用系統(tǒng)。終端自適應(yīng)引擎配合移動中間件考慮了擴(kuò)展性、健壯性的需求，能夠縮短系統(tǒng)上層應(yīng)用的開發(fā)周期，降低企業(yè)的開發(fā)成本，提高工作效率。

為此，設(shè)計了終端自適應(yīng)引擎模型(如圖7)，采用用戶在可視化多媒體創(chuàng)造平臺上創(chuàng)造互動多媒體應(yīng)用，并生成多媒體應(yīng)用描述文件，終端自適應(yīng)引擎根據(jù)用戶選擇的終端類型，讀取終端信息數(shù)據(jù)庫，自動生成相應(yīng)終端類型和平臺的多媒體應(yīng)用。

不同的終端之間存在巨大的差別。這種差異性是全方位和多層次的，包括硬件、操作系統(tǒng)等底層軟件、協(xié)議、用戶接口、輸入輸出、圖像聲音、支持的多媒體文件格式的差異等。因此，構(gòu)建終端差異信息基礎(chǔ)數(shù)據(jù)庫是實現(xiàn)終端自適應(yīng)的關(guān)鍵一步。搭建的終端差異信息數(shù)據(jù)庫如圖8所示。

終端自適應(yīng)引擎通過與終端信息數(shù)據(jù)庫的交互，即可實現(xiàn)手機終端的自適應(yīng)，使各種型號的手機用戶都獲得良好的富媒體體驗。

5結(jié)語

本文設(shè)計并實現(xiàn)的富瀏覽器，在通用手機瀏覽器的基礎(chǔ)上做了進(jìn)一步的拓展和擴(kuò)充，對數(shù)據(jù)格式、用戶方式、顯示格式等方面做了相關(guān)定義并提出了富媒體引擎，從而實現(xiàn)了手機端富媒體瀏覽、3D全景播放等功能，使得手機瀏覽器帶給用戶更豐富的體驗和交互。另外我們創(chuàng)新性地提出了終端自適應(yīng)機制，這種手機終端的智能適配不但使各類手機用戶都能獲得與自己手機最匹配的內(nèi)容，也減少了瀏覽器開發(fā)過程中的工作量，有效地節(jié)省了資源。

隨著3G時代的到來，手機瀏覽器未來的發(fā)展必將以用戶體驗作為最重要的標(biāo)準(zhǔn)，因此如何在有限的無線帶寬下為用戶提供更豐富的富媒體應(yīng)用，增強用戶體驗將是未來手機瀏覽器發(fā)展的主要挑戰(zhàn)，也是我們要進(jìn)一步研究的方向。