[[54879]]

現狀和改變

這篇文章是移動Web應用程序報告的第二版。之前的版本分別在2011年2月和2011年5月發布，所有這些版本的發布都需要感謝W3C Wiki的支持。歡迎大家將對這篇文章的想法告訴作者(dom@w3.org)，或許這些想法將會出現在下一版的報告中。這篇文章記錄了從上一個版本到現在為止，Web平臺上發生的所有重大變化：

• 新增了一個設備適配領域
• 新增了一個W3C Community Groups開展W3C標準制定工作
• Web Performance Working Group推出了四個新的API: Performance Timeline, User Timing, Efficient Script Yielding和Timing control for script-based animations
• 完成了Web Real-Time Communication的初稿
• 一批標準已經引起了更多的重視(WOFF, Contacts API,DeviceOrientation Event, Network Information API,Widgets specifications系列文章)
• 提出了基于模型的用戶界面的一些建議
• 更新了Device APIs Working Group charter

文章結構

下面將逐一介紹Web平臺上新增的技術功能：

• 圖像處理
• 多媒體
• 設備適配
• Forms
• 用戶交互
• 數據存儲
• 個人信息管理
• 傳感器和硬件集成
• 網絡
• 通訊
• 封裝
• 性能和優化

每一節里面都有一個表對各個功能進行了總結，其中包括：

• W3C對該功能的規范定義，
• W3C中負責相應規范的團隊，
• 規范的成熟度，
• 規范文檔的穩定性評估，由本報告的作者對規范文檔需要改動的幅度進行評估，分為三個等級：低（規范文檔基本已經穩定）、中（部分穩定，而其他部分需要大幅度修改）、高（整個文檔需要大幅度調整），
• 在移動設備上實施后的可用性評估，這個評估只是粗略的定性描述，
• ***規范文檔的鏈接
• 相應功能測試集的鏈接

需要指出的是，W3C在制定Web標準的過程中，需要按照 Recommendation track經歷以下幾個階段：

• “Editors drafts”表示該定義僅僅代表作者的個人觀點，并不是標準的定義。
• “Working Drafts”是工作組取得的初步進展。
• “Last Call Working Drafts”表明工作組認為規范已經滿足要求并且所有已經發現的問題都已得到解決，需要獲取更加廣泛的反饋。
• “Candidate Recommendations”會邀請開發人員實現規范中的內容并且給出反饋意見；工作組會在按照規范開發的應用上運行測試集。
• “Proposed Recommendations”表明規范已經得到了充分的實踐檢驗，只差W3C的最終審核。
• “W3C Recommendations”表明規范已經是一個穩定并且完整的Web標準了；相關的文檔很少會再被更新了，它通過了“Edited Recommendation”過程，是工作組經過反復修正的成果。

工作組只有通過W3C Members的討論或是被W3C Member Submission接受后方能開始制定標準。

W3C最近新成立了一個Community Groups，該機構幫助人們在W3C的基礎設施上做各種實驗，并在知識產權允許的范圍內將他們所做的工作轉化為W3C標準。

圖像處理

SVG（Scalable Vector Graphics） ,可縮放矢量圖，是基于XML用于描述二維矢量圖形的一種圖形格式。由于圖像是由一組幾何圖形構成的，這些圖形能夠按照用戶的需求任意縮放，因此它非常適合移動設備上的開發。用它開發動畫也是相當方便的，因此可以用來優化用戶界面。

SVG為HTML5帶來了更加豐富的功能，例如可以為多媒體文件增加高級圖像過濾器（使用SVG的過濾器）。

HTML5提供的標簽是對SVG申明的補充，該標簽提供了一個2D編程API，能夠減少圖像處理時的內存開銷。這個API不僅可以實現圖像渲染，還能用于圖像的處理和分析。

SVG和HTML都能夠使用CSS (Cascading Style Sheets)設計圖形樣式；值得一提的是，CSS3（CSS第三版）提供了一組標準樣式集，里面有許多新的功能，使得用戶能夠方便地打造圖像效果，如圓角、復雜的背景圖像、陰影（CSS Backgrounds and Borders）、旋轉（CSS 2D Transforms）、動畫（CSS AnimationsCSS Transitions）、甚至是3D效果（CSS 3D Transforms）。

動畫通常是非常消耗資源的——基于腳本的動畫API提供了時間控制器，能夠控制動畫更新的頻率，從而限制動畫對資源的占用。

在構造圖形界面時，字體的選擇也是非常重要的，但通常移動設備上可供選擇的字體是非常有限的。WOFF (Web Open Font Forma)的出現解決了這一問題：它允許用戶從樣式庫中自動下載各種字體，并且能夠根據實際的需要調整字體的大小。

注：WebGL——3D圖形API的定義工作是由Khronos Group完成的（并不是W3C）；這個API與OpenGL ES是兼容的，主要用于移動設備的開發。

多媒體

HTML5通過添加<video>和<audio> 這兩個標簽顯著提升多媒體內容在Web上的集成度。這兩個標簽幫助Web開發者擺脫對插件的依賴，可以更加方便地在Web中使用音頻和視頻內容了。從此可以像處理圖像一樣方便地處理多媒體內容了。

這兩個標簽允許播放多媒體內容，而HTML Media Capture和Media Capture API 定義了使用攝像機和麥克風記錄多媒體內容的方法，這是移動設備上普遍具備的功能。Web Real-Time Communications Working Group也將開發可以直接處理攝像機和麥克風上的數據流的API。

此外，Web平臺上還新增了兩個API用來處理多媒體內容。一個是我們之前已經提到過的Canvas 2D ContextAPI：可以使用它來修改圖像，甚至有可能用它來編輯視頻。W3C Incubator Group同樣也在開發一個音頻API(Mozilla’s proposal draft)，詣在修改音頻內容，其中包括對聲音的分析和合成——這些工作為Audio Working Group今后的開發打下了良好的基礎。

***，Device APIs Working Group的新規范中包含了一個API，該API用于讀取設備當前音頻的音量，并通過與用戶的交互調整設備音量。

所有的這些功能表明Web正向著綜合的多媒體平臺發展。將Web和TV領域結合起來是目前的發展趨勢（這一點已經得到了W3C Web and TV Interest Group的證實）。越來越多的用戶開始使用移動設備收看電視節目，移動設備將成為第二大電視媒體，用戶能夠通過他們的移動設備找到更多的電視節目甚至在觀看節目的同時還能與節目進行互動。

HTML5 videoelement

設備的適配

移動設備不僅與傳統的電腦有著明顯的差異，就是各種移動設備彼此之間也有著不小的區別。不同類型的移動設備具有不同大小的屏幕尺寸和分辨率，鍵盤的類型也各有不同，還有許多其他的差異。

Device Description Repository API是一個服務器端API，當用戶使用移動設備訪問服務器上的網頁時，服務器可以獲取設備的相關信息，Web開發人員調用這個API就能從服務器上獲取用戶正在使用的設備信息了。

客戶端也有一個相應的API，它已經作為Systems Information API的一部分；相關的規范目前正在被重新修訂，設備APIs工作組希望能夠進一步完善設備信息API。

為了充分利用手機設備上豐富的多媒體資源，The Media Capture API提供了這些設備的功能和性能信息。

CSS Media Queries使得Web頁面能夠根據設備的特性在設備上更加合理地顯示出來。

Device information

表單

基于Web的應用程序之所有能夠有豐富的信息主要是靠用戶的輸入。由于移動設備上鍵盤的限制，在移動設備上輸入大量的信息對很多用戶來說是一件相當麻煩的事；HTML5通過添加一組新的表單控制類型來簡化用戶的輸入：

• 日期時間條利用一組表單控件（如<input type="date">）使得用戶可以直接使用本地的日期控件；
•  <input type="email">、<input type="tel"> 和 <input type="url">可以簡化用戶對復雜數據的輸入方式，例如可以使用虛擬鍵盤。或者是利用設備的訪問記錄（如地址簿或者是書簽等）簡化用戶輸入工作；
• Pattern屬性既能簡化用戶的輸入，又能避免服務器端的檢查（服務器檢查需要花費一個往返的網絡開銷）或是基于JavaScript的檢查（JavaScript的檢查開銷通常更大）；
• Placeholder屬性在用戶輸入文本時，會根據需要輸入的文本類型給用戶相應的提示信息；
• 新增加的<datalist>元素允許用戶根據輸入的需要創建新的輸入類型，而不再受限于原有的類型定義。

HTML5 Date and Time state of input element

用戶交互

觸摸式交互在移動設備上越來越普及了。雖然傳統的交互方式（如鍵盤、鼠標）并不會從未來的Web平臺上消失，但是無疑觸摸式交互將給Web平臺帶來更好的用戶體驗，這一點至關重要。因此，在DOM上定義觸摸事件的工作已經在積極開展了。

另一方面，許多移動設備運用觸覺反饋（例如震蕩）創造新的交互方式；Device APIs Working Group有意開發一個震動API（最近添加到了工作組的近期工作計劃中）。

由于是在新興的設備上完成Web開發，而這些設備又新增了許多用戶交互機制，這就需要Web開發者處理更加抽象的用戶操作：除了傳統的“點擊”、“按鍵”、“觸摸”

操作以外，還有諸如“撤銷”、“下一頁”此類的操作，弄清楚用戶如何使用這些操作控制設備將有助于開發出獨立于具體設備的Web應用程序。Web Events Working Group正在開發抽象DOM事件用于解決上述需求。

用戶通常會將移動設備隨身攜帶，許多用戶將移動設備當做備忘錄：Web Notification提出將這一功能加入到Web環境中。

同樣的，一個新添加到Device APIs Working Group 的工作計劃中的API可以產生系統蜂鳴聲（而不是應用程序提供的聲音），從而將各種不同系統采用的機制整合起來。

移動設備，尤其是手機，通常需要支持聲音交互；HTML Speech Incubator Group希望能夠就用戶通過聲音與Web頁面交互的問題制定一個標準協議框架（詳見use cases and requirements）。

Touch Events Specification

數據存儲

許多應用程序的主要功能就是保存信息，顯示信息，以及將系統上其他文件和服務的數據整合起來。

Web Storage規范為簡單的數據存儲提供了兩個基本方法——localStorage和sessionStorage，localStorage可以將數據一直保留在本地，而localStorage可以在瀏覽器會話保持期間幫助用戶保存數據。

Web平臺新增了許多用于與設備文件系統交互的API：File Reader API用于下載文件的內容信息，File Writer API用于保存或者修改文件，新增的FileSystems API支持更加常用的文件操作（包括目錄管理操作）。

除了對文件的操作外，Web平臺還提供了Indexed Database API，用來操作結構化的數據庫對象，在JavaScript中可以方便地調用這些API，從而高效地修改和查詢數據。值得一提的是，客戶端的基于SQL的數據庫從2009年推出發展到今天，已經逐漸被新的系統所拋棄。

Web Storage

個人信息管理

應用程序應該充分利用已有的數據記錄；在移動設備上，地址簿和日歷是非常重要的信息來源，開發人員可以通過調用Contacts API和Calendar API獲取這些信息。

Contacts API

傳感器與硬件集成

移動設備上集成了許多傳感器，方便用戶與虛擬世界交互：如GPS、加速計、光檢測器、麥克風、攝像頭、溫度計等。

為了方便Web開發者利用這些傳感器，需要提供一組接口供開發者使用。

Geolocation API提供了一個設備定位通用接口，并且對底層技術（GPS，WIFI網絡發現，蜂窩網絡三角測量等）是透明的。

DeviceOrientation Event Specification也在開發處理傳感器上的方向和速度信息的方法。

雖然目前還不確定開發一個通用的方法是否實用，但System Information API已經計劃開發一組通用API，用于提取并監控傳感器的數據。

正如在多媒體一節中提到的，目前已經有許多工作詣在開發一組訪問攝影機和麥克風數據流的API。

Geolocation API

網絡

網絡連接是移動設備***的優勢：Web打破了移動設備之間的界限，上面存儲了海量的信息，并且能夠利用這些信息源源不斷地創造出更加豐富的資源。

Web平臺上開發出了越來越多的API用來將不同環境下的各種網絡互連起來。

XMLHttpRequest（AJAX中的“X”）是一個廣泛使用的API，用于通過HTTP和HTTPs協議從遠端Web服務器上下載內容。

該規范的第二版——XMLHttpRequest Level 2 完善了***版的部分功能：能夠在不同的域名中向服務器發送請求，在網絡操作過程中能夠給出反饋，能夠更加有效地處理二進制內容。

瀏覽器默認地禁止一個Web頁面上跨域名的訪問；這一規定是為了禁止某些網站濫用甚至是盜用其他Web網站的內容。網站可以通過使用Cross-Origin Resource Sharing機制解除上述限制，從而增強Web程序和Web服務間的合作。

XMLHttpRequest是一個由客戶端觸發的網絡請求，但受限于移動設備的網絡能力以及網絡請求的開銷，***能提供一個由服務器觸發的網絡請求。Server-Sent EventsAPI允許服務器將請求推送給客戶端（通過HTTP或是其他協議）。

基于IETF的WebSocket protocol開發的WebSocket API，提供了一個雙向連接，比XMLHttpRequest更加靈活，并且資源占用更少。

當然，使用一個網絡連接首先需要知道一個網絡連接是否已經建立，并且能夠識別當前可用的網絡類型。在Web環境中，可以通過 HTML5 onLine DOM flag（ononline）查看網絡連接是否已經建立。

network-information API能夠識別網絡特征，從而判斷用戶使用的網絡類型（如用戶使用的是WIFI還是3G）。

XMLHttpRequest

通訊

一個好的移動開發平臺不僅能夠讓用戶享受在線服務，還能允許用戶之間通過設備或應用程序彼此通訊。

Messaging API不僅可以通過連接（如使用sms：，mms：，和mailto：URI schemes）添加信息和發送信息，還能在信息中添加附件，并降低了信息發送失敗的概率。

HTML5 Web Messaging的postMessage API可以實現Web程序之間的交互。

Device APIs Working Group受到Web Introducer和相關工作的啟發，致力于將各種Web應用程序更加緊密地聯系起來。

Web Real-Time Communications Working Group的成立標志著將會有更加豐富的通訊方式產生:

• 設備間的P2P連接
• P2P視頻音頻流使得用戶能夠實時通訊

The Messaging API

封裝

應用程序想要具備良好的用戶體驗，就必須讓用戶覺得這個程序是***可用的（即使當這個程序已經下線，這點對于移動設備來說尤為重要），此外讓用戶能夠方便地分享或是從應用程序商店購買到應用程序也是非常重要的——通過將應用程序封裝起來能夠很好地解決上述問題。

Web平臺上新增了兩種Web應用程序封裝方法：

• HTML5的 ApplicationCache使用一個文件列表訪問離線的Web應用程序，瀏覽器可以將文件列表上的內容緩存在本地；
• W3C Widgets的一系列規范定義了一種發布Web應用程序的方法——通過配置文件（詳見Widget Packaging and Configuration）將Web應用程序以Zip文件的形式發布；配置文件中定義了應用程序的簽名、允許訪問的API、對網絡使用的限制等等。

HTML***pplication Cache

性能和優化

由于移動設備的CPU以及電池的限制，移動設備的開發需要特別關注性能問題。

Web Performance Working Group的Navigation Timing , Resource Timing, Performance Timeline 和 User Timing提供了許多工具用于幫助開發者優化Web程序的性能。

Efficient Script Yielding的工作為Web開發者提供了更加高效的異步編程方式。

查看Web頁面是否顯示的API（Page Visibility API）能夠根據Web程序的需要調整資源配置，例如當頁面最小化時釋放部分網絡帶寬。類似地， Timing control for script-based animations API能夠減少播放動畫時使用的資源。

除了優化資源外，應用程序的響應速度也是移動用戶體驗的重要組成部分。線程工作機制可以通過Web Workers將資源消耗較大的操作放到后臺執行，從而提高應用程序的響應速度。

Mobile Web Application Best Practices給出了關于如何在移動設備上開發優秀的Web App的一些建議。

Timing hooks