基于Native+html5移動(dòng)應(yīng)用框架的研究

摘 要：跨平臺(tái)開發(fā)是移動(dòng)應(yīng)用軟件開發(fā)的重要內(nèi)容，目前移動(dòng)應(yīng)用軟件跨平臺(tái)開發(fā)多采用的PHONEGAP模式，存在著明顯的缺陷。通過對(duì)PHONEGAP模式的研究對(duì)比，提出了基于Native+html5移動(dòng)應(yīng)用框架——MSKYGAP，融合了NATIVE模式和html5兩種模式的優(yōu)點(diǎn)，實(shí)現(xiàn)跨平臺(tái)開發(fā)。

關(guān)鍵詞：html5；跨平臺(tái)；移動(dòng)框架

中圖分類號(hào)：TP311.52

隨著3G時(shí)代的到來，無線數(shù)據(jù)通信技術(shù)的發(fā)展，越來越多的移動(dòng)應(yīng)用融入到了人們的日常出行中。移動(dòng)信息技術(shù)將在未來航空業(yè)中扮演重要的角色。目前移動(dòng)應(yīng)用軟件多采用NATIVE 模式。這種模式的優(yōu)點(diǎn)在于用戶體驗(yàn)好、響應(yīng)速度快。同樣缺點(diǎn)也比較明顯，主要是更新不方便，跨平臺(tái)的開發(fā)成本高。而html5方式，恰好可以彌補(bǔ)NATIVE模式的不足，當(dāng)然也存在其缺點(diǎn)，如數(shù)據(jù)的加密、壓縮和交互體驗(yàn)等。

1 國內(nèi)外研究對(duì)比

目前國內(nèi)外手機(jī)跨平臺(tái)技術(shù)比較多，比較著名的是PHONEGAP。它借助于HTML+CSS+JAVASCRIPT技術(shù)，完成UI設(shè)計(jì)和與客戶端的交互。針對(duì)ANDROID、winphone、IPHONE等主流的開發(fā)平臺(tái)，PHONEGAP都提供了完整的架構(gòu)。

PHONEGAP模式的優(yōu)勢(shì)就在于率先提出了手機(jī)應(yīng)用開發(fā)的跨平臺(tái)技術(shù)，實(shí)現(xiàn)WEB技術(shù)訪問手機(jī)本地資源，對(duì)于傳統(tǒng)互聯(lián)網(wǎng)開發(fā)人員來說入門門檻低，同時(shí)很好地解決了在網(wǎng)頁中調(diào)用手機(jī)設(shè)備接口的問題。但該技術(shù)同樣也有其缺陷性，其缺陷性主要體現(xiàn)在：

（1）該技術(shù)基于開放的思想，所有代碼都采用WEB模式，大部分邏輯和展示都在客戶端，對(duì)產(chǎn)品的知識(shí)產(chǎn)權(quán)保護(hù)有限。

（2）該技術(shù)在設(shè)計(jì)中并未考慮到手機(jī)網(wǎng)絡(luò)流量問題。

（3）該技術(shù)采用純WEB模式，在顯示效果和用戶體驗(yàn)方面有所欠缺，無法滿足高質(zhì)量的用戶體驗(yàn)需求。

2 MSKYGAP框架設(shè)計(jì)和研究

為了很好地實(shí)現(xiàn)手機(jī)跨平臺(tái)開發(fā)的同時(shí)，彌補(bǔ)PHONEGAP模式的不足，本文融合NATIVE模式和html5兩種模式的優(yōu)點(diǎn)，設(shè)計(jì)了MSKYGAP框架，以解決移動(dòng)應(yīng)用顯示界面與手機(jī)本身的耦合問題。該框架實(shí)現(xiàn)了手機(jī)應(yīng)用的跨平臺(tái)，數(shù)據(jù)的有效通信和服務(wù)端資源訪問手機(jī)本地功能，形成初步的移動(dòng)開發(fā)技術(shù)框架和規(guī)范。

MSKYGAP框架包含主要功能：

（1）基礎(chǔ)庫（節(jié)點(diǎn)操作、觸摸事件等）

基礎(chǔ)庫主要包含控件庫（事件調(diào)度、緩存、ajax引擎、模板引擎等）和移動(dòng)庫（通知、文件處理、地理位置等），它支持低帶寬和多類型數(shù)據(jù)處理、通信的完整性和數(shù)據(jù)加密、不穩(wěn)定網(wǎng)絡(luò)的異步消息傳遞、本地?cái)?shù)據(jù)的緩存機(jī)制等。

（2）客戶端和html5應(yīng)用相結(jié)合

MSKYGAP可以理解為由webkit引擎和html5組成，將純客戶端分解成兩部分，一部分專注基礎(chǔ)引擎的開發(fā)，另一部分專注應(yīng)用開發(fā)。應(yīng)用部分進(jìn)行分類，對(duì)于易變動(dòng)的部分，與服務(wù)器的交互采用web開發(fā)常用的dwr操作數(shù)據(jù)的方式，這樣方便了web開發(fā)人員平滑的過渡到手機(jī)客戶端的開發(fā)，同時(shí)充分發(fā)揮瀏覽器調(diào)試工具的作用。手機(jī)客戶端與用戶粘合度高，但是更新比較繁瑣，需要用戶重新下載客戶端。針對(duì)復(fù)雜的業(yè)務(wù)，UI的產(chǎn)生由服務(wù)器端完成，目前UI主要采用類WEB頁面的方式進(jìn)行展示。針對(duì)簡單的、更新不頻繁的應(yīng)用，UI直接在客戶端生成。對(duì)于類WEB頁面，MSKYGAP在HTML5標(biāo)簽的基礎(chǔ)上，擴(kuò)展WEB標(biāo)簽，以適應(yīng)手機(jī)客戶端需要，實(shí)現(xiàn)其與手機(jī)客戶端的交互。

（3）客戶端數(shù)據(jù)的緩存

考慮到移動(dòng)設(shè)備流量的寶貴性及離線的可訪問性，產(chǎn)品將用戶訪問的數(shù)據(jù)緩存于本地，用戶在使用過產(chǎn)品后，后續(xù)的使用均默認(rèn)從緩存獲取數(shù)據(jù)，只有當(dāng)用戶顯式的刷新時(shí)才會(huì)從服務(wù)器重新獲取數(shù)據(jù)。

在MSKYGAP客戶端中集成了Local Storage 的緩存處理，并且針對(duì)本地存儲(chǔ)做了兩點(diǎn)優(yōu)化：

首先對(duì)每個(gè)要存儲(chǔ)的數(shù)據(jù)增加臟數(shù)據(jù)標(biāo)志位的判斷。解決在實(shí)踐中遇到Local Storage的刪除操作完成后，緩存數(shù)據(jù)并未真正刪除的問題。 其次在本地存儲(chǔ)的基礎(chǔ)上增加對(duì)象內(nèi)存緩存，提高了讀取數(shù)據(jù)的性能。

（4）數(shù)據(jù)傳輸?shù)募用軝C(jī)制

移動(dòng)通信的特點(diǎn)是在傳輸?shù)倪^程中，數(shù)據(jù)容易被截獲，MSKYGAP框架實(shí)現(xiàn)了數(shù)據(jù)交互過程中，對(duì)請(qǐng)求數(shù)據(jù)進(jìn)行加密處理，加密采用DES對(duì)稱加密算法。用于數(shù)據(jù)加密的密碼保存于手機(jī)客戶端，為了提高安全性，我們對(duì)密碼采用定期更新的方式，通過客戶端定期從服務(wù)器端獲取密碼，保證密碼的實(shí)時(shí)更新。

（5）實(shí)現(xiàn)跨平臺(tái)的XMPP協(xié)議消息及時(shí)通知

MSKYGAP框架基于XMPP（可擴(kuò)展消息處理現(xiàn)場協(xié)議）協(xié)議標(biāo)準(zhǔn)，實(shí)現(xiàn)服務(wù)端和客戶端相互通知及不穩(wěn)定網(wǎng)絡(luò)的異步消息的推送。XMPP用于IM（即時(shí)消息）以及在線現(xiàn)場探測，它促進(jìn)服務(wù)器之間的準(zhǔn)即時(shí)操作，可以比短信等模式節(jié)約成本，更易于客戶端結(jié)合。該模式通過數(shù)據(jù)通道，不占用語音通道，不影響通話業(yè)務(wù)，通過native擴(kuò)展的接口友好的呈現(xiàn)給用戶，該技術(shù)的消息很大程度地改善了用戶的互動(dòng)體驗(yàn)。

3 MSKYGAP框架效果分析

MSKYGAP框架融合了傳統(tǒng)客戶端和html5應(yīng)用的特點(diǎn)，目前多款航空旅行應(yīng)用中均采用MSKYGAP框架開發(fā)完成，在保證用戶體驗(yàn)的同時(shí)，縮短了開發(fā)周期，節(jié)省了大量的人力成本。

其效果主要體現(xiàn)在下面幾方面：

（1）MSKYGAP對(duì)于產(chǎn)品數(shù)據(jù)傳輸采用加密機(jī)制，不僅加強(qiáng)了數(shù)據(jù)的保密性，同時(shí)也對(duì)產(chǎn)品保障有利。

（2）MSKYGAP實(shí)現(xiàn)了在數(shù)據(jù)傳輸層采用數(shù)據(jù)壓縮和數(shù)據(jù)完整性匹配，采用NATIVE和類WEB應(yīng)用相結(jié)合模式，盡可能降低數(shù)據(jù)流量，另外MSKYGAP在客戶端建立UI緩存，在服務(wù)器端可以設(shè)定某個(gè)應(yīng)用的更新策略。

（3）MSKYGAP采用客戶端應(yīng)用和類WEB應(yīng)用結(jié)合的方式，在一定程度上充分利用客戶端組件的特性，降低了設(shè)計(jì)成本。在一些顯示效果方面也有明顯提升。

4 結(jié)束語

本文通過基于native和html的兩種模式的優(yōu)勢(shì)，可以根據(jù)應(yīng)用的特點(diǎn)進(jìn)行客戶端與類WEB應(yīng)用相結(jié)合的方式，快速的實(shí)現(xiàn)app開發(fā)。該框架充分考慮NATIVE模式和傳統(tǒng)WEB應(yīng)用的優(yōu)劣勢(shì)，通過該框架便于內(nèi)容提供商提供后續(xù)應(yīng)用和產(chǎn)品升級(jí)，免除用戶頻繁更新的困擾，提高代碼跨平臺(tái)的復(fù)用性，實(shí)現(xiàn)了手機(jī)應(yīng)用的跨平臺(tái)開發(fā)，便于大規(guī)模產(chǎn)品開發(fā)。

參考文獻(xiàn)：

[1]劉春華.基于HTML5的移動(dòng)互聯(lián)網(wǎng)應(yīng)用發(fā)展趨勢(shì)[J].移動(dòng)通信，2013，9.

[2]武晶晶.跨平臺(tái)的PhoneGap研究[J].信息安全與技術(shù)，2012，12.

作者簡介：唐紅武（1977.02-），男，工程師，研究方向：民航信息化，移動(dòng)互聯(lián)。

作者單位：中國民航信息網(wǎng)絡(luò)股份有限公司，北京 100027