iPhone5和iOS6上HTML5開發的新增功能

　　開發移動應用究竟是選擇Native、Web應用或者混合應用？答案是不一樣的移動應用須要不一樣的技術，選擇合適的就行。其實大多數移動應用，無論是企業移動應用仍是互聯網移動應用，90%均可以使用基於HTML5的Web技術就足夠。在Android 4.0和iOS 6以上瀏覽器已是最快的應用了，比任何本地的微博、微信都快，無須更新升級，無須上傳分裂的APP市場，無須忽然被蘋果下架應用。再看看最近發佈 Firefox OS 開發手機的配置也大概知道，運行大多數應用不須要那麼高配置。

　　目前主流的智能終端中，iOS6對HTML5的支持程度仍舊是最好的，領先於Android和Windows phone。隨着iPhone5的性能再次翻倍，以及iOS不斷提高的canvas渲染性能，加之Android的webGL，Win8/wp8的本地api對Javascript開放，性能已經再也不是開發優秀移動應用的主要屏障，現在要考慮的是如何發揮HTML5的優點作出用戶喜歡的應用。下面看看iPhone5和iOS6上HTML5開發的新增功能。

　　iPhone 5：

• 新的屏幕尺寸
• 新模擬器
• 你須要作的
• 問題

　　iOS 6的新功能：

• 文件上傳、具備媒體捕捉攝像頭的訪問和文件API
• 網絡音頻API
• 本機應用程序集成的智能應用橫幅
• CSS 3過濾器
• 交叉淡入淡出CSS 3
• CSS Partial圖片支持
• 全屏支持
• 動畫計時API
• 支持多分辨率的圖像
• Passbook優惠券和月票交付
• 存儲API和Web應用程序的變化
• 本機Web應用程序的Web View的改變
• 遠程Web Inspector調試
• 更快的JavaScript引擎和其餘新功能

　　iPhone 5

　　新的iPhone 5，以及自從iPod Touch第5代開始，在Web開發方面有一個大的變化：屏幕分辨率。 這些設備具備寬4寸屏幕，WDVGA（廣角雙 VGA）640×1136像素，326 DPI的Retina Display。 這些設備和iPhone 4/4S同樣具備相同的寬度但高176像素。

　　新模擬器 

　　  包含iPhone 5仿真器的Xcode4 iOS 模擬器

　　新的Xcode 4（Mac AppStore ）包括更新後的iPhone模擬器。 新版本的iPhone模擬的三個選項： 

• iPhone：iPhone 3GS，iPod Touch的第一，第三代
• iPhone Retina 3.5「：iPhone 4，iPhone 4s，iPod Touch的第四代
• iPhone Retina 4「：iPhone5，iPod Touch的第5代

　　新的模擬器還包括取代谷歌地圖的新地圖應用程序和Passbook。

　　你須要爲新設備作的

　　一般狀況下，若是你的網站/應用程序進行了優化，可垂直滾動，不該該有任何問題。 同一個視口(Viewport)中，圖標和iPhone 4/4S技術應能正常工做。 但當更新了iOS，同時也更新了Web View：這意味着全部的本機Web應用程序，如PhoneGap/Apache Cordov應用程序和僞瀏覽器，如iOS上谷歌瀏覽器也更新了。 可是， 若是您的解決方案是高度相關的，那麼可能有一個問題，看看下面的例子，iPhone 4和iPhone 5的谷歌地圖網站。 因爲這是說做爲一個恆定的高度，不隱藏狀態欄，並在底部有一欄空白。 

　　 若是你設計了一個特定高度的谷歌地圖。 正如你能夠看到的（右圖來自iPhone 5）有一個白色的底欄和URL地址欄沒法隱藏，由於沒有足夠的內容。

　　若是您使用的是響應性的Web設計，你不該該有太多的麻煩，一般狀況下，RWD技術使用的是寬度而不是高度做爲條件。

　　設備檢測

　　在寫這篇文章的時候，尚未iPhone 5在市面上。 沒有辦法在服務器端檢測iPhone 5 。 用戶代理只有iOS 6系統的iPhone，以及使用徹底相同的用戶代理的iOS6系統的iPhone 4S和iPhone 5。

　　Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25

　　 所以， 客戶端檢測4寸iPhone設備惟一的方法來是使用JavaScript或媒體查詢。請記住，這些器件具備1136像素的高度，但咱們所談論的CSS像素（獨立分辨率像素）約568像素高度，爲這些設備像素的一半。

　　isPhone4inches = (window.screen.height==568);

　　使用CSS媒體查詢和響應性Web設計技術，咱們能夠檢測到iPhone 5使用：

　　@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {

　　/* iPhone 5 or iPod Touch 5th generation */

　　}

　　主屏幕的webapps

　　主屏幕的webapps問題彷佛是很嚴重的。 我已經報告了這個問題，在NDA尚未來自蘋果的任何答案。

　　 當你添加一個網站的首頁到屏幕，支持apple-mobile-web-app-capable元標籤的web應用只工做在iPhone 3.5「仿真模式（它不考慮整個高度）。 

　　 在圖像裏能看到黑欄條。 這是iPhone 5和新iPod Touch默認狀況下全屏幕webapp。

　　若是操做系統是不肯定是否支持更寬的屏幕，不給web應用擴展高度是一個好主意。 若是你提供一個apple-touch-startup-image爲640×1096，iPhone 5將它調整大小爲640×920放在主屏幕。

　　解決方案是， 你須要忘記viewport的width=device-width or width=320。 若是不提供viewport，webapps將正常工做。 一樣的，若是你使用其餘屬性而不是寬度也相似，若是你不但願viewport默認980px，能夠這樣：

　　<meta name="viewport" content="initial-scale=1.0">

　　甚至若是指定一個不一樣於320寬能夠這樣：

　　<meta name="viewport" content="width=320.1">

　　不動viewport，下面的腳本也能夠達到目的：

　　if (window.screen.height==568) { // iPhone 4"

　　document.querySelector("meta[name=viewport]").content="width=320.1";

　　}

　　若是程序啓動圖像爲640×1096，並在不一樣的設備上使用不一樣的圖像，你可使用媒體查詢。 一些報道說，你須要將啓動圖片象本機程序同樣命名爲「Default-568h@2x.png」但不正確。 不過你想要的話，能夠將它命名。 但大小屬性被徹底忽略。

　　您可使用媒體查詢，提供不一樣的啓動圖片：

　　<link href="startup-568h.png" rel="apple-touch-startup-image" media="(device-height: 568px)">

　　<link href="startup.png" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)">

　　若是你想爲低分辨率設備提供了另外一種版本，那麼你可使用WebKit的設備像素比的條件了。 若是你想知道爲何是568px而不是1136px，記住咱們使用的CSS像素和這些設備的像素比爲2。

　　另外一個問題是，購買了新設備後， iTunes將是否再次從備份安裝快捷方式圖標，這是不明確的

　　iOS 6和HTML5的開發

　　iOS 6是爲每個iOS 5設備免費提供更新的，除了iPad第一代，因此咱們會看到這個版本瀏覽網頁真的很快，iPad的市場被第一次分割。 下面的調查結果是可用於全部iOS升級iOS設備。

　　文件管理問題

　　iOS 6 上的 Safari 瀏覽器支持的文件上傳而且有HTML Media Capture的部分支持。 一個簡單的文件上傳，會要求用戶從相機或相冊裏輸入一個文件，你能夠在圖中看到。 我真的很喜歡Safari顯示圖片預覽，而不是一個臨時文件名。

　　<label>Single file</label>

　　<input type="file">

　　咱們也可使用HTML5新的布爾屬性請求multiple文件。 在這種狀況下，用戶能夠不使用相機做爲源。

　　<label>Multiple files</label>

　　<input type="file" multiple>

　　 咱們可使用文件上傳訪問攝像頭和相冊

　　雖然沒有辦法強制使用攝像頭， 但咱們可使用accept屬性只指定想捕捉的圖像或視頻。

　　<input type=file accept="video/*">

　　<input type=file accept="image/*">

　　不支持其餘類型的文件 ，如音頻，Pages文檔或PDF文件。 也沒有getUserMedia攝像頭的實時流媒體支持。

　　有圖片和視頻選擇後你能作什麼呢？

• 使用multipart POST表單提交上傳
• 使用XMLHttpRequest 2 AJAX上傳（甚至進度支持）
• 使用文件API ，在iOS 6容許JavaScript直接讀取的字節數和客戶端操做文件。 HTML5ROCKS 有一個很好的API例子。

　　網絡音頻API

　　HTML5遊戲開發商應該是喜歡！ 網絡音頻API在移動瀏覽器第一次出現。 這個JavaScript API容許咱們處理和合成音頻。 若是你歷來沒有玩過一些低級別的音頻，API可能看起來有點怪異，但一段時間之後就不難理解了。 一樣，HTML5ROCKS有一個好文章使用音頻API上手。

　　API更多的信息和消息在 http://www.html5audio.org

　　智能應用程序橫幅

　　網站仍是本機應用程序？ 若是咱們都有，如今咱們能夠將咱們的網站與咱們的本機應用程序鏈接 。 有了智能應用程序橫幅，當網站上有一個相關聯的本機應用程序時，Safari瀏覽器能夠顯示一個橫幅。 若是用戶沒有安裝這個應用程序將顯示「安裝」按鈕，或已經安裝的顯示「查看」按鈕可打開它。 咱們也能夠從網絡發送參數給本機應用程序。 例如打開與用戶在網站上看到內容相同的本機應用程序位置。

　　要定義一個智能應用程序橫幅，咱們須要建立一個meta標籤， 名稱=「apple-itunes-app」。 首先，咱們須要去iTunes Link Maker搜索咱們的應用程序和應用程序ID。

　　<meta name="apple-itunes-app" content="app-id=9999999">

　　咱們可使用 app-argument 提供字符串值，若是咱們參加的iTunes聯盟計劃，咱們還能夠添加子公司相同的元標記數據 

　　<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx">

　　<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx, affiliate-data=partnerId=99&siteID=XXXX">

　　橫幅須要156像素（設備是312 hi-dpi）在頂部，直到用戶在下方點擊內容或關閉按鈕，您的網站上才爲你的網站展示所有的高度。 它就像HTML的DOM對象，但它不是一個真正的DOM。 

　　有了智能應用程序橫幅，瀏覽器會自動邀請用戶安裝或打開本機應用程序

　　幾秒鐘內，橫幅顯示「加載」動畫時系統驗證應用程序對當前用戶的設備和App Store是有效的。 若是它是無效的，旗幟自動隱藏，例如，它是一個iPad的惟一的應用程序，你正在瀏覽iPhone或應用程序僅適用於德國的App Store，而您的賬戶是在美國。

　　CSS 3過濾器

　　CSS 3 過濾器是一組圖像操做，咱們可使用CSS的功能，如灰度，模糊，下拉陰影，亮度等功效。 這些功能將在屏幕上顯示內容前被應用。 咱們能夠用spaces使用多個過濾器。

　　這裏你能夠嘗試一個很好的演示。 一個簡單的例子，例如：

　　-webkit-filter: blur(5px) grayscale (.5) opacity(0.66) hue-rotate(100deg);

　　CSS 3交叉淡變

　　iOS 6開始支持一些新的CSS Image Values，包括交叉淡入淡出功能。 有了這個功能，咱們能夠將兩個圖像在同一個地方有不一樣程度的透明度，它甚至能夠是過渡或動畫的部分。

　　簡單的例子：

　　background-image: -webkit-cross-fade(url("logo1.png"), url("logo2.png"), 50%);

　　Safari中的全屏幕

　　除了chrome-less 主屏幕meta標籤，如今的iPhone和iPod Touch（而不是在iPad）支持全屏幕模式的窗口。 這是完美的身臨其境的體驗，如遊戲或多媒體應用程序。 沒有辦法強制全屏模式，它須要由用戶啓動（工具欄上的最後一個圖標）。 可是，咱們能夠邀請用戶，移動到窗口，並按下屏幕上的全屏圖標來激活咱們的應用程序。 若是咱們混合了一些觸摸事件處理，咱們就能夠隱藏URL地址欄來提供良好界面，直到用戶離開全屏幕。

　　 iPhone和iPod Touch上的全螢幕導航

　　你總能找到兩個或三個覆蓋底部的按鈕，你應該知道，哪一個後退按鈕，可選的前進按鈕和取消全屏。

　　您可使用onresize事件檢測是否用戶切換到全屏幕。

　　動畫計時API

　　遊戲開發人員很幸運。 iOS 6支持的動畫計時API ，也被稱爲requestAnimationFrame，一個新的方法來管理基於JavaScript的動畫。 這裏有一個很好的示範，更詳細的說明看來自保羅愛爾蘭博客 。

　　CSS圖片Set，這是沒有任何標準組的一部分。 這是一個新的圖像功能， 圖像集接收一組附加的條件或圖片。有了這個新的功能，咱們不須要爲不一樣的分辨率，使用媒體查詢來定義不一樣的圖像。 工做的語法是：

　　-webkit-image-set(url(low.png) 1x, url(hi.jpg) 2x)

　　它就像CSS背景圖像同樣工做 。  有了這個新的語法，咱們能夠有更清晰的多分辨率圖像清晰度，所以咱們並不須要使用媒體查詢和background-size 值。

　　Passbook 

　　Passbook是一個新的iOS應用程序，一個虛擬容器，例如通行證，門票，優惠券，會員卡，禮品卡。 做爲一名Web開發人員，你可能想爲用戶提供優惠券，門票，你的下一個航班的電子客票或忠誠卡。

　　蘋果容許網站不須要本機程序就可提供這種通行證 。

　　爲了在您的網站上提供通行證，你須要使用application/vnd.apple.pkpass MIME類型或經過電子郵件發送

　　蘋果提供了一個工具，您能夠在您的服務器上快速地安裝打包和定製簽名通行證可能包括當前用戶的信息

　　要傳遞的文件僅僅是一個JSON元數據文件和一對圖像。 咱們須要打包文件，並簽署。 不幸的是 ， 要簽署經過，咱們須要蘋果的簽名 ，這意味着Web開發人員須要一個iPhone開發者計劃賬戶（$ 99/year）。 若是您收到通知已經簽署，您能夠將它在本身的網站上。

　　通行證的強大功能之一是，一旦安裝結束，並經過推送通知服務，能夠提供一些網絡服務給用戶和推送消息提醒，操做系統將調用你的Web服務，更新信息的傳遞。

　　更多passbook信息developer.apple.com

　　存儲API和web應用程序的更新

　　沒有新的存儲API。 沒有索引型數據庫的支持。 然而，也有一些變化，你應該考慮：

• 應用程序緩存限制增長至25MB。
• Chromeless web應用程序 （使用apple-mobile-web-app-capable meta標籤）如今有本身的存儲沙箱 。 這意味着，即便他們來自同一個域，來自主屏幕上web應用都會有它本身的持久本地存儲和SQL存儲。 即便你屢次安裝的圖標，每一個圖標都會有本身的沙箱。 雖然這是個好消息，但若是你從網站經過存儲傳遞信息給主屏幕小部件，它可能也是一個問題。 看喬治·亨納的文章 。
• 有一個新的未公開的meta標籤，可用於在任何網站上（ apple-mobile-web-app-capable元標記），容許咱們爲主屏幕圖標定義不一樣的標題 。 正如你可能知道，在默認狀況下Safari瀏覽器文檔的標題限制爲13個字符。 如今咱們能夠定義主屏幕使用的替代標題

　　<meta name="apple-mobile-web-app-title" content="My App Name">

　　我還發現， apple-mobile-web-app-orientations接受的可能值有portrait, portrait-upside-down, landscape-right, landscape-left, portrait-any。

　　Web View更新

　　Web View（pseudobrowsers，PhoneGap/Cordova應用程序，嵌入式瀏覽器） 上Javascript運行比Safari慢3.3倍（或者說，Nitro引擎在Safari瀏覽器是Web應用程序是3.3倍速度）。

　　咱們能夠找到一些其餘的好消息：

• web應用程序的調試Remote Web Inspector
• 一個新的supressesIncrementalRendering的布爾屬性，改進了部分呈現機制 。 我相信，以減小加載網頁感受，這個功能是很是有用的。
• 一個新的WebKitStoreWebDataForBackup info.plist的布爾功能，在這裏咱們能夠定義咱們要存儲在本地存儲和Web SQL數據庫進行備份的地方，如在iCloud。 這個問題已經出如今iOS 5.01，如今它解決了
• 開發者協議的改變 彷佛限制只使用本地的WebView來解析HTML和JS的了。 這很好，若是有人從蘋果能夠證明這一點。 內部WebKit引擎它是惟一可以下載並執行新的代碼的引擎，確保預期相同的應用程序行爲 。 若是你不從網絡上下載的代碼您可使用本身的引擎。 這可能打開一扇門...如提供咱們本身的engine，例如，WebGL支持。

　　遠程調試

　　這是對Web開發人員一個巨大的變化。 iOS上Safari第一次，包括官方的Remote Web Inspector。 所以，iWebInspector或Weinre工具，將由於這個版本將變得過期。 遠程調試器能夠與模擬器或經過USB鏈接設備一塊兒工做。

　　要啓動遠程檢查會話，你須要使用桌面Safari 6瀏覽器 。 這是壞消息：你只能在Mac桌面電腦上調試你的web應用。 這是一個無聲的變化，但適用於Windows的Safari已不存在，因此它停留在5.x中 所以，只有與Mac OS計算機，您才能夠在您的iOS設備開啓（至少如今正式）網絡調試會話。

　　出於安全考慮，您須要先啓用Web檢查器「設置」>「Safari瀏覽器」>「高級」。 新的檢查手段意味着舊的JavaScript控制檯是不可用了。

　　 您能夠啓動調試會話：

• 在您的iOS設備或模擬器的Safari窗口
• 在您的iOS設備或模擬器上安裝的chrome-less webapp程序
• 使用Web View本機應用程序，如Apache Cordova/ PhoneGap的應用程序。

　　在談到本機應用程序，你只能夠檢查，由Xcode（本身的應用程序）安裝在設備的應用程序。 所以，沒有辦法在網站的檢查iOS上的谷歌瀏覽器。

　　 若是您正在使用Webkit Inspector 連Safari 5或Chrome，你會在Safari 6看到一個徹底從新設計版本的Inspector基於Xcode的本機開發的UI。 用Inspector調式會話，您能夠：

• 查看 HTML和CSS實時的變化
• 訪問您的存儲：cookies，本地存儲，會話存儲和SQL數據庫
• 審查Profile web應用，包括網絡請求，佈局和渲染和JavaScript和事件的表現報告。 這是性能工具方面邁出的一大步。
• 搜索你的DOM
• 在一個地方查看全部的錯誤和警告
• 管理你的workers（線程）
• 管理JavaScript斷點，並肯定未捕獲的異常斷點。
• 訪問控制檯和執行JavaScript
• 調試JavaScript代碼
• 觸摸檢查：在inspector裏面有一個小手圖標，可讓你在設備上觸摸和在inspector發現DOM元素。

　　蘋果幹得好，咱們在iOS上等這個已經很長一段時間 。 Apache Cordova 用戶使用此功能也應該喜歡。

　　其餘較小的更新

• 蘋果公司聲稱有一個更快的JavaScript引擎 。 它彷佛是真實的。 在SunSpider測試中，我在同一設備上iOS 5.1和iOS 6的JavaScript性能提升20％。
• 谷歌地圖在iOS 6 上再也不可用，如今http://maps.google.com重定向到谷歌地圖的網站，而不是本機應用程序。 所以有一個新的URL 模式，maps，這將打開本機的新的地圖應用程序。 語法是maps:?q=<query>，query能夠是搜索詞或經緯度（以逗號分隔）。 要啓動路線導航，參數是：maps:?saddr=<source>&daddr=<destination>。
• XHR2：如今XMLHttpRequestProgressEvent獲得支持
• autocomplete屬性的輸入遵循DOM規範
• 來自DOM4的Mutation Observers已經實現。 您可使用WebKitMutationObserver構造器捕獲DOM的變化
• Safari再也不老是對用 -webkit-transform:preserve-3d 的元素建立硬件加速層， 咱們應該中止使用。
• 經過window.selection 的Selection API
• <keygen>元素
• Canvas更新 ：createImageData有一個參數，如今有兩個新的功能作好準備，用webkitGetImageDataHD和webkitPutImageDataHD提供高分辨率圖像 。
• 更新SVG處理器和事件構造函數
• 新的CSS viewport的有關測量：VH（viewport的高度），VW（viewport寬度）和VMIN（VW和VH之間最小）
• CSS3 Exclusions 和CSS Regions提供Beta 1版，但他們在最終版本中被刪除。 這是一個恥辱，雖然他們太新，還不夠成熟。
• iCloud 標籤 。 您能夠在全部的設備，包括Mac電腦，iPhone和iPad之間同步您的標籤。 因此，相同的URL將經過全部的設備。 要當心使用移動網絡架構！

　　咱們仍在等待

　　有一些東西，咱們仍然須要等待下一個版本，如：

• 索引型數據庫IndexedDB
• 文件系統API
• 性能Timing API
• WebRTC和getUserMedia
• WebGL仍然被禁用
• 遊戲/ inmersive應用程序的方向鎖定API
• 集成Facebook和Twitter賬戶的原生API，因此咱們可使用當前操做系統的用戶的憑據自動，而不是迫使用戶從新登陸。

　　最後的思考

　　在iOS 6上的Safari是爲HTML5開發調試工具邁出了一大步 ，新的API，更好的JavaScript性能。 不過，我必須說，蘋果仍然忘記了文檔更新和適當地與Web開發人員溝通。