基于HTML5的移動Web APP開發

樊斌鋒

（山西職業技術學院 山西省太原市 030006）

眾所周知，我們目前所處的時代是一個高速發展的信息時代，各種高新的信息技術已經在各項社會工作當中進行應用，目前圖書館的移動應用正在朝向智能化、信息化的方向進行發展，這也是開放的Web 網絡平臺的重要基礎。這標志著HTML5 不再是面向傳統的網頁設計，各種不同類型的終端設備的使用需求也就能夠得到滿足了，使得移動互聯網時代中的網頁應用能夠得到更加豐富的開發標準。

1 移動應用開發技術具體發展變化

從整體的角度上進行考量的話，移動應用開發技術的發展主要分為三個階段，分別是早期的WAP、流行原生應用和后期的以HTML5 標準的基礎的Web APP。目前在移動應用開發市場當中已經具有了大量的移動端開發工作企業和人員，而且隨著移動應用開發技術的快速發展，對移動端開發人員水平的要求是不斷變高，開發人員必須要掌握一定的底層技術，熟悉基礎架構等[1]。2008年，HTML5 標準草案頒布，為移動應用開發提供了另外一種技術方案。而在2010年發生了比較大的變革，蘋果宣布其出產的移動設備不再支持傳統的Flash 插件，HTML5 成為了移動網站打造豐富網頁應用的首選。而且，Native APP 效果的 Web APP 在實踐應用過程中具有更優越的安全性、跨平臺訪問性，符合用戶隱私方面的需求。除此之外更為重要的是，Web APP 的開發難度比較低，與Native APP 進行比較的話，其難度降低的趨勢更加明顯，在實踐應用中，Web APP 的實用性是更高的。

2 圖書館的移動應用開發發展的流程

2.1 發展趨勢

2.1.1 服務內容綜合化

從最早期的短信提醒服務內容開始，圖使館的移動應用開發距今已經經歷了多次的技術革新，在界面表現和用戶可用性方面著重進行了提升，使得圖書館的諸多結構能夠集成融合。例如，目前提供的服務內容是非常多樣化的，包含移動參考依循、移動咨詢推送以及移動借閱管理等等[2]，這是綜合性非常強的服務內容，適合用戶的使用習慣。

2.1.2 創新了應用類型

事實上，早期甚至是現如今時代中的大部分圖書館移動應用，其實都是對傳統的實體圖書館或者是數字圖書館業務、功能的復刻，也就是實現傳統圖書館業務到移動終端設備的遷移。隨著基于HTML5的移動Web APP開發技術的出現，使得圖書館移動應用開發得到創新發展，應用類型也更加符合現代人們的使用習慣。

2.1.3 建設主體多樣化

目前圖書館移動應用的實施體系和系統體系都在由簡單到復雜的方向進行變化，建設主體由此也變得多樣化，但是需要注意的是，其中圖書館在其中應該擔當什么樣的角色，并且以何種方案參與到移動應用開發過程中也是需要多加注意的，這一過程中，多個建設主體的分工和協調、配合也是極為重要的[3]。

2.1.4 系統結構日益復雜

眾所周知，早期的圖書館移動應用具有比較多的劣勢，其中包含功能單一、系統結構相對比較簡單等等。而隨著時間的推移，在基于HTML5 的移動應用開發技術的幫助之下，現如今的圖書館移動應用已經變得非常豐富，基本上能夠滿足現代人民群眾使用上的需求，但是與此同時，其系統結構也相對比較復雜，簡答區分可以將其劃分為數據資源層、系統接口層以及應用實現層等等。其中的應用層就是利用WAP、APP、HTML5 等移動技術構建功能豐富[4]、內容展示美觀的用戶使用平臺。

2.2 HTML5給予了圖書館移動應用開發新的契機

筆者進行相關的調查和了解之后發現，從HTML4 到HTML5的技術革新和理念革新經歷了大約十多年的演變，其中的變化不再是小的改變和升級而是質的改變，其不僅適應了目前移動智能終端設備，還定位在了一個功能完整的網頁應用開發平臺。

2.2.1 開發難度低且能夠實現跨平臺訪問

與傳統的移動應用開發技術進行比較的話，基于HTML5的移動Web APP開發技術最主要的優勢就是開發難度比較低，其初衷是為了能夠在低能耗和低流量的手機終端應用開發標準。HTML5是基于B/S 架構的標準，因此不存在Native APP 的固有缺點，能夠實現跨平臺訪問的功能，簡單來說，相關的設計者、開發工作者能夠具有豐富多樣化的移動應用開發功能和標準，這對于移動應用開發工作是非常重要的，還使得WAP 標準功能弱小的不足得到了有效得彌補[5]。

2.2.2 降低了技術門檻

HTML5 使得圖書館移動應用開發的技術門檻降低了很多，而且隨著時間的推移，圖書館對HTML5 標準之下的技術應用和相關的流程變得更加的熟悉，而且HTML5 是在HTML4 基礎之上發展起來的，其開發部署方案與HTML4 具有很多的相似點和共同之處，與全新的Native APP 方案進行相比的話，在HTML5 技術背景之下，移動應用開發工作是更加容易被相關的技術工作人員和用戶所接納的，也比較適合當代發展形勢。

2.2.3 為圖書館建設注入新的活力

HTML5 標準的頒布使得傳統的圖書館移動應用開發局面得到了改變，在實際的開發過程中，圖書館可以多元化地采取相關的建設策略，并且加速移動應用的開發。對于一些功能多樣化而體系相對復雜的移動應用需要適量購買，而對于一些開發難度比較低的移動應用，圖書館自身條件和環境適宜的情況之下可以自建。

筆者經過實際的而研究和調查之后發現，目前自建移動應用的實踐其實并不是很多，但是HTML5 的出現，可以將其易用、開放和難度比較低的特點，使其成為圖書館自建或者是弓箭的通用標準。

3 HTML5的核心功能概述

3.1 2D/3D圖像繪制技術

按照現階段的開發技術發展來說，Canvas 是 HTML5 標準中新晉的標簽元素，它還提供了基于 JavaScript 的 2D 和 bitmap 圖形的API。Canvas 是最強大的API 之一，只需要利用JavaScript 就能夠實現相關的圖書或者是動畫，Canvas 對于Web APP 的開發意義也是重大的，這也是HTML5 受到關注程度更高的功能之一。Canvas能夠給與2D 圖形、圖標、動畫效果的制作良好的技術方面的支持，這些API 為HTML5 移動用用開發定義了基本繪畫方式。再加上HTML5 創建3D 圖像是具有多種方案的，目前主要使用三種模型，首先是標準低級API（OpenGL ES）[6]，這種方式也被專業工作人員稱之為WebGL。其次就是DOM tree，也就是所謂的X3DOM 模式，也是目前主要使用的方式之一。最后是O3D 模式，這一模式是3D應用程序的一個借口，是由GOOGLE 進行研發的。

3.2 離線應用技術

所謂的離線應用技術，顧名思義，就是脫離傳統的移動應用開發的網絡環境，使得Web APP 依舊能夠進行工作，既能夠實現數據儲存，還能夠實現交換業務功能等等，從宏觀角度上來說，離線應用技術的存在促使Web APP 克服了傳統的開發技術離線既無用的局限性，使得應用的適應性更加強大，也符合用戶離線的情況、環境。

這一技術的出現是非常重要的，使得產品的開發工作避免了時間和空間方面的限制，這項技術具體能夠實現以下三種功能，首先是離線資源的緩存，html5 可以通過緩存清單，指明Web APP 離線工作時所需的資源文件，并且支持自動和手動兩種緩存更新方式；

其次還能夠實現在線狀態監測功能的實現，HTML5 提供了事件監控兩種檢測方式，分別是Navigator.online 屬性值判斷和Online/Offline，具體的應用則需要根據實際的發展情況來進行制定，并且離線應用技術在檢測這一方面是比較全面的，能夠促使html5的移動Web APP 開發工作變得更加的穩定；

最后是本地數據儲存功能，html5 具有兩種獨立的數據儲存機制，其中Web storage 是以key-value 的形式來進行數據的保存，類似html4 當中的cookie，但是二者進行相比較的話，前者的安全性方面的表現是要更加的優秀的。另外，web SQL Database 是在HTML5 草案中追加的一個新功能，這一功能更能夠允許用戶在客戶端進行數據的操作，相當于給予了用戶極大的自由，這也體現出來了基于HTML5的移動Web APP開發的“以用戶為主體”的主要特點。

3.3 設備適配技術

事實上，不同類型、系列的移動設備在各個方面都存在著不可忽視的差異，傳統的移動開發技術就很難對設備方面做好平衡，html5 面對這種情況，為了使得不同移動設備的瀏覽訪問得到兼容，使得輸出合適的頁面布局，html5 給予了兩種適配方案[7]。

在設備信息方面，可以使用一個統一的服務器API，并且允許Web 開發者從眾多的設備信息庫中，獲取到相關的配置信息數據，進而實現不同移動設備之間的適配；

其次就是給予CSS 的適配，提供了一套特殊的機制，使得適配布局和行為得到優化，其中CSSDeviceAdaptation 定義了一套CSS 指令，參照所持設備的尺寸，指定每個布局所適用的尺寸。

3.4 提供豐富的拓展API

Html5 的出現，使得很多設備硬件能夠實現更多的功能，提供了很多操作移動設備硬件的API，其中包含地理位置API、通用感應器API 以及信息交互API 等等，這是其前身HTML4 無法做到的，因此這也是HTML5 的移動Web APP 的優勢之一。

4 圖書館HTML5的移動Web APP構建案例

4.1 設計思路

圖書館移動應用的主要目的就是實現其教育功能，但是目前很多圖書館移動應用使用過程中，用戶的參與程度并不高，教育效果也不是很好。在進行圖書館HTML5 的移動Web APP 構建過程中，在設計思路方面需要增強其趣味性，為了實現這一點可以在其中涉及到一定的游戲因素，譬如可以增加限時通關，意在使得讀者在規定的時間之內將桌面之上的圖書全部放回到書架的正確位置之上，并且可以通過主流的社交網絡與好友進行分享，這還使得移動Web APP 得到了有效的推廣。

4.2 具體實現過程

（1）首先需要重視，本案例中的設計思路是以游戲為載體的，而在游戲當中，場景是非常重要的，場景能夠清晰向圖書館的讀者傳達游戲玩法和意義。為了實現這一點，設計工作人員可以采用卡通描繪的方式進行游戲場景的設計，這不光能夠展現出游戲目的，還是一種性價比非常高的方式，對于自身負責圖書館移動應用開發的單位來說能夠減少非常多的負擔，通過生動有趣的畫面吸引讀者進入到游戲中。

（2）其次負責設計的工作人員需要將上架過程進行細致的分化。

（3）最后，設計工作人員需要重視設計游戲的情節表現，情節表現直接影響著游戲的趣味性和可玩性，也是基于HTML5 的圖書館移動Web APP 開發的主要效果。為了實現這一點，設計者可以為不同的讀者設計好不同的難度，譬如游戲中，設加入了計時控制，讀者必須在倒計時結束前完成圖書上架。還可以發揮出游戲中的激勵特點，每當讀者完成不同的游戲任務，設計工作人員可以設計好不同的榮譽勛章，這樣便能夠有效地激勵不同的讀者。而且其中的動作設計還為游戲增添了真實性的特點，也完成了圖書館移動應用的教育性質功能。

5 結論

綜上所述，就是目前為止針對【基于HTML5 的移動Web APP開發】的相關研究和分析了，現如今時代發展過程中，對于全面、功能豐富的全媒體應用的需求成都是非常高的，其中基于HTML5的移動Web APP 開發能夠發揮出重要的作用，因此作為移動應用開發者，需要基于其足夠的重視程度，并且在新的技術環境之下，促使移動Web APP 具有富內容、富體驗、富交互的主要特點，這對于時代洪流中的年輕用戶體驗是非常重要的。