過去這些年,HTML5顛覆了PC互聯網的格局,優(yōu)化了移動互聯網的體驗,接下來,HTML5將顛覆原生App世界。這聽起來有點危言聳聽,但若認真分析HTML5的發(fā)展史,你會發(fā)現,這個世界的發(fā)展趨勢確實就是這樣。
成都創(chuàng)新互聯公司2013年開創(chuàng)至今,我們提供高端網站建設、成都微信小程序、電商視覺設計、app軟件定制開發(fā)及網絡營銷搜索優(yōu)化服務,在傳統(tǒng)互聯網與移動互聯網發(fā)展的背景下,我們堅守著用標準的設計方案與技術開發(fā)實力作基礎,以企業(yè)及品牌的互聯網商業(yè)目標為核心,為客戶打造具商業(yè)價值與用戶體驗的互聯網+產品。
熟知歷史才能預知未來,先讓我們來看看HTML5為什么誕生、這8年是怎么過來的。
一、 HTML5的誕生
自W3C于1999年發(fā)布HTML4后,Web世界快速發(fā)展,一片繁榮。人們一度認為HTML標準不需要升級了。一些致力于發(fā)展Web App的公司另行成立了WHATWG組織,直到2007年,W3C從WHATWG接手相關工作,重新開始發(fā)展HTML5。
HTML5的發(fā)展史,有用戶的需求在推動,有技術開發(fā)者的需求在推動,更有巨大的商業(yè)利益在推動。
在互聯網的早期,對用戶而言,能打開瀏覽器接入到互聯網世界就是一個神奇的事情,但互聯網發(fā)展到2005年前后,開始出現下一個變化,就是寬帶互聯。
隨著寬帶的普及和電腦性能的增強,人們不再滿足于單純的通過互聯網看新聞、收發(fā)郵件,消耗更高帶寬的娛樂產品開始出現,就是流視頻和網頁游戲。其實視頻和游戲是古老的需求,在互聯網不普及的時候,需求的滿足方式是離線傳輸的VCD和游戲光盤;后來互聯網逐漸普及,人們更改了使用方式,通過下載軟件+本地媒體播放器來看視頻,下載體積較大的端游玩游戲。
但是對消費者體驗更好的新方式還是出現并顛覆了以前的一切,那就是流媒體和網頁游戲。Youtube等公司把握住潮流飛速崛起,各種頁游公司也如雨后春筍。
但是HTML標準沒有把握住產業(yè)的變化及時演進,瀏覽器產品也未升級,這塊新需求被瀏覽器插件滿足了,那就是Flash。這個部署在億萬瀏覽器里的商業(yè)插件儼然成為事實標準。2005年Adobe巨資收購Macromedia,把Flash收歸旗下,緊接著大幅推廣FLV流媒體和action script語言,很明顯這樁收購可以列為IT并購的經典案例,FLV流媒體和Flash游戲風靡互聯網,Adobe在新的產業(yè)升級中攫取了大量的利潤。
除了Flash這個商業(yè)產品成為了事實標準,W3C還面臨一個尷尬,就是另一個私有擴展協(xié)議的制造者—IE。IE當時在桌面瀏覽器占有壟斷地位,并且擴展了大量的IE Only語法,開發(fā)者完全不知道這些語言是誰定義的。整個web世界,就被兩家公司微軟+Adobe綁架了。
很多IT巨頭都坐不住了,尤其是蘋果和Google。PC操作系統(tǒng)的世界難有突破,Web瀏覽器被蘋果寄予厚望,而且第一代iPhone只支持網頁,那時還沒有Appstore,Safari是喬布斯非??粗氐漠a品;新貴Google雖然大量贊助Mozilla,但并未對IE的地位產生實質影響,收購了YouTube后發(fā)現底層被Adobe控制,也是非常難過,而且Google每年給IE的搜索框和Adoble FLV繳納的費用真不是小數目。
既然大家都是W3C的主席單位,好吧,我們重新開始做HTML5吧。
是的,HTML5其實就是這么誕生的。那是2007年,IE和Flash由盛轉衰的轉折點。
二、 HTML5第一階段: Web 增強與破壟斷
自HTML5誕生以來,一共經歷了兩個階段,分別是Web增強和移動互聯網。我們先從Web 增強說起。
web體驗的豐富增強主要表現在:1. webapp,比如gmail;2. 流媒體;3. 游戲。我們就這3個方面來講HTML5做了什么。
1. webApp
HTML5新增了離線存儲、更豐富的表單(比如Input type=date)、js線程、socket王樂、標準擴展embed、以及很多css3新語法…
2. 流媒體
HTML5新增了audio、video
3. 游戲
HTML5新增了canvas、webgl
當然還有Google努力在HTML5中推進Header和Section等標簽,以利于搜索引擎分析,這些不多述。
HTML5補充流媒體和游戲能力后,加上蘋果強勢拒絕在iOS上引入Flash,成功的遏制了Flash的發(fā)展,然后就該遏制IE私有語法了。
在HTML5標準的升級過程中,蘋果和Google同時也看到了瀏覽器市場重新洗牌的機會,他們一方面參與HTML5的規(guī)范,一邊在瀏覽器產品上發(fā)力。Apple首先開始大力發(fā)展Safari,建立WebKit開源項目,Mac、iOS、Windows多平臺齊發(fā)力;Google起初是贊助Mozilla開發(fā)Firefox,后來自己開發(fā)了v8引擎,合并WebKit,于2008年正式推出Chrome?!癐E的私有規(guī)范+Flash不是標準,我們才是標準”這樣的口號在新一代瀏覽器大戰(zhàn)中打響,IE瞬間成為千夫所指的壟斷代表,甚至成了阻礙Web發(fā)展的罪人(當時IE6已數年未更新,并且絲毫不懼Firefox的發(fā)展)。
偏偏微軟此時也出了暈招,推出了一系列即不完整支持規(guī)范又互相不兼容的IE7、8、9、10,徹底失去了開發(fā)者的心。
Adobe的Flash被遏制,與Web霸主的位子擦肩而過;IE的私有標準被遏制,并且造成IE市場份額不停下滑,直到IE最新的移動版本反過來開始支持WebKit私有語法,真是令人唏噓。不知道HTML6是不是該打倒WebKit壟斷了。
三、 HTML5第二階段: 移動互聯網
隨著Chrome和Safari的高歌猛進,以及IE+Flash的衰落,HTML5告一段落,進入了下一個時代——移動互聯網。HTML5的跨平臺優(yōu)勢在移動互聯網時代被進一步凸顯。HTML5是唯一一個通吃PC、Mac、iPhone、iPad、Android、Windows Phone等主流平臺的跨平臺語言。Java和Flash都曾夢想這個位置,但夢斷于iOS。此時人們紛紛開始研究基于HTML5開發(fā)跨平臺手機應用。很多人當時認為,原生應用只是過渡,就像當年從C/S結構轉變?yōu)锽/S結構一樣。而且學習Objective-C和Java很費勁,我既然會網頁開發(fā),為何不試試HTML5。
W3C此時成立了Device API工作組,為HTML5擴展了Camera、GPS等手機特有的API,然而麻煩的是,移動互聯網初期的迭代太快了,手機OS在不停的擴展硬件API,陀螺儀、距離感應器、氣壓計。。。每年手機OS都有大版本更新。而W3C作為一個數百家會員單位共同決策的組織,從標準草案的提出到達成一致是非常復雜的過程,跟不上移動互聯網初期的快速迭代。
PhoneGap的出現,給開發(fā)者打開了一扇窗。很多人期待PhoneGap不停擴展API,來補充瀏覽器的不足。Adobe看到PhoneGap仿佛看到了重振江湖地位的希望,但在Adobe收購PhoneGap后,又發(fā)現這個東西可商用性不足,而且開源使得Adobe無法像Flash那樣獲取商業(yè)利益,于是就把PhoneGap捐給了Apache,改名為Cordova。
因為各種原因,Cordova的定位最終沒有成為瀏覽器的強化,而走向了混合式開發(fā)?;诋敃r的背景,他們認為原生是不可替代的,“原生+HTML5”的混合模式更有意義。所以現在Cordova的使用模型是“原生工程師+HTML5工程師”一起協(xié)作完成App。
這時Facebook加入了W3C,牽頭成立了Mobile Web工作組。Facebook是混Web圈的,并且在手機OS上沒有自己的領地,他不喜歡被蘋果和Google掌控的原生應用生態(tài)系統(tǒng)。Mobile Web這個工作組的重要目標就是讓HTML5開發(fā)的網頁應用達到原生應用的體驗。然而,事與愿違,它不努力也就算了,結果是努力了卻失敗了。2012年,Facebook放棄了HTML5的新聞充斥了全世界的IT媒體,HTML5瞬間被打入冷宮。
Facebook為何放棄HTML5?核心是當時基于HTML5真的做不出好的移動App。對比Twritter等競爭對手的原生App,Facebook的HTML5版本實在無法讓用戶滿意。比如Push功能,到現在HTML5的推送和原生的推送體驗差距依然巨大,更不用說HTML5應用的頁面切換白屏、下拉刷新/側滑菜單不流暢等眾多問題??粗こ處熭p松實現搖一搖、二維碼、語音輸入、分享到朋友圈等功能,更是讓HTML5工程師感覺自己站錯了隊。
即使Facebook不喜歡被控制,也不能拿被用戶拋棄來冒險。而且Facebook并沒有掌握關鍵點—手機瀏覽器內核。如果瀏覽器不跟上,徒然定一堆標準草案落不了地。
而瀏覽器在手機上的表現是什么呢?先看Google,Chrome性能雖高,但Android上的瀏覽器卻并非Chrome,而是WebKit改出來的一個蹩腳的Android瀏覽器;再看蘋果,iOS上不允許其他瀏覽器引擎上架App Store,而且其他使用Safari引擎的應用也無法調用蘋果自己的JavaScript加速引擎Nitro。結果是蘋果和Google不但不在瀏覽器上積極實現HTML5關于移動App所需的規(guī)范,反而對HTML5做出種種限制。
不管是當時硬件能力不足,還是手機OS廠商的故意限制,總之結果就是:在移動互聯網的初期,一定是原生應用生態(tài)系統(tǒng)的天下,iOS和Android首先自己的地盤穩(wěn)固后,產業(yè)才會向下個階段升級。
Facebook也好,PhoneGap也好,想在移動互聯網初期就分一杯羹是分不到的,但堅持下來,機會往往會出現。
Safari不支持HTML5錄音。
現在瀏覽器中最好的解決方案是WebRTC下的 navigator.getUserMedia API。
可是當使用Can I use查看兼容性的時候,我發(fā)現
不過這個是有歷史原因的,我記得RTC是在去年,2013,才剛剛由思科提出并且確定下來的(沒記錯的話)。但Audio標簽在制定初就是HTML5規(guī)范的一部分,兼容性如下,因此你的陳述有誤。
所以,我在做相關Application時候,就不得不得考慮退化,然而多媒體方面的能做的退化的最好的方案就是Flash。
因此我就順著思路又用AS3實現了一遍,在前端做分狀態(tài)異步加載,當我檢測到瀏覽器支持相關API(getUserMedia),我直接切換到HTML5模式,Div中裝載Canvas、WebWorker等等;反之,就加載Flash控件。
至于你說的Safari支持音頻,但音頻!=錄音,事實上Audio和Video標簽是Safari 3.1以后開始支持的,至于之前的Safari基本上就靠Quicktime了。
另外支不支持HTML5 API,取決的是瀏覽器實現,和系統(tǒng)關系不大。一會兒Safari,一會兒Windows的.....你要么就寫IE,誰說windows上不能跑chrome的?
實現語音輸入
input type="text" x-webkit-speech /
只要在input元素上加上x-webkit-speech屬性就可以了。如果你用的是xhtml,那么就需要這樣寫x-webkit-speech="x-webkit-speech";
lang 說明語音識別的語言種類
input type="text" x-webkit-speech lang="zh-CN" /
x-webkit-grammar 精確語音內容,如果是用搜索可以自動去掉 “的”之類的字
input type="text" x-webkit-speech x-webkit-grammar="bUIltin:search" /
onwebkitspeechchange事件,即語音發(fā)生變化時觸發(fā)的事件,一般可以作為提交
input type="text" x-webkit-speech onwebkitspeechchange="$(this).closest('form').submit()"/
隨著HTML5技術日趨成熟,越來越多的行業(yè)巨頭也正不斷向HTML5示好,在未來幾年,HTML5將會以更多的形式滲透到我們生活中的方方面面,因此更多的從業(yè)者開始關注HTML5開發(fā)行業(yè),選擇學習HTML5的人也越來越多,企業(yè)也更加重視HTML5開發(fā)人員,究竟為什么呢?今天我們就來看一看為什么HTML5學習開發(fā)如此受歡迎。
1、基于HTML5強大的兼容性,因為HTML5提供了前所未有的數據與應用接入開放接口,使外部應用可以直接與瀏覽器內部的數據直接相連,例如視頻影音可直接與microphones及攝像頭相聯,就因為這種強大的兼容性,使得在當下開發(fā)界是如此的火,同樣也是因為這強大的兼容性,使得手機應用軟件,app更適合,也更方便。所以更適合手機app軟件開發(fā),正好補充了手機小巧的不足。
2、HTML5 開發(fā)支持的手機系統(tǒng)有android、ios。
3、HTML5其突出的特點就是強化了web頁的表現性,追加了本地數據庫,可以用作離線應用的開發(fā),離線應用就是把需要的資源先緩存到本地,下次再查看時無需聯網。
4、HTML5 開發(fā),能提供更快、更簡便的服務,代碼可高度重用,服務發(fā)布方便。
5、動畫、游戲動態(tài)效果,地理定位等很多app應用正在崛起,而HTML5技術的強大優(yōu)勢就是這種讓我們驚嘆的效果。而未來采用HTML5開發(fā)app的,將會大量減少代碼量,應用軟件也會得到更高的用戶體驗,更好的視覺效果。
我們第一次談論 HTML5 要改變世界大概是因為喬布斯,他堅持在 iOS 上不兼容 Flash,在 Adobe 統(tǒng)治多媒體開發(fā)的那個年代,這需要付出極大的勇氣。這么多年過去了,雖然所有人都在談論 HTML5,但是大部分人甚至都忘了它還是一個仍在完善中的體系。
2007 年 W3C(萬維網聯盟)立項 HTML5,直至 2014 年 10 月底,這個長達八年的規(guī)范終于正式定稿。接下來,HTML5 將真正開始顛覆原生(Native) App 世界。雖然這種危言聳聽已經讓人有點厭煩。但是如果回顧 HTML 這些年走過的路,你就不會再懷疑它的能量。
一、HTML5的誕生
自 W3C 于 1999 年發(fā)布 HTML4 后,Web 世界快速發(fā)展,一片繁榮。人們一度認為 HTML 標準不需要升級了。一些致力于發(fā)展 Web App 的公司另行成立了 WHATWG 組織,直到 2007 年,W3C 從 WHATWG 接手相關工作,重新開始發(fā)展 HTML5。
HTML5 的發(fā)展史,有用戶的需求在推動,有技術開發(fā)者的需求在推動,更有巨大的商業(yè)利益在推動。在互聯網的早期,對用戶而言,能打開瀏覽器接入到互聯網世界就是一個神奇的事情,但互聯網發(fā)展到 2005 年前后,開始出現下一個變化,就是寬帶互聯。
隨著寬帶的普及和電腦性能的增強,人們不再滿足于單純的通過互聯網看新聞、收發(fā)郵件,消耗更高帶
寬的娛樂產品開始出現,就是流視頻和網頁游戲。其實視頻和游戲是古老的需求,在互聯網不普及的時候,需求的滿足方式是離線傳輸的 VCD
和游戲光盤;后來互聯網逐漸普及,人們更改了使用方式,通過下載軟件 + 本地媒體播放器來看視頻,下載體積較大的端游玩游戲。
但是對消費者體驗更好的新方式還是出現并顛覆了以前的一切,那就是流媒體和網頁游戲。Youtube 等公司把握住潮流飛速崛起,各種頁游公司也如雨后春筍。
HTML
標準沒有把握住產業(yè)的變化及時演進,瀏覽器產品也未升級,這塊新需求被瀏覽器插件滿足了,那就是
Flash。這個部署在億萬瀏覽器里的商業(yè)插件儼然成為事實標準。2005 年 Adobe 巨資收購 Macromedia,把 Flash
收歸旗下,緊接著大幅推廣 FLV 流媒體和 action script 語言,很明顯這樁收購可以列為 IT 并購的經典案例,FLV 流媒體和
Flash 游戲風靡互聯網,Adobe 在新的產業(yè)升級中攫取了大量的利潤。
除了 Flash 這個商業(yè)產品成為了事實標準,W3C
還面臨一個尷尬,就是另一個私有擴展協(xié)議的制造者—IE。IE 當時在桌面瀏覽器占有壟斷地位,并且擴展了大量的 IE Only
語法,開發(fā)者完全不知道這些語言是誰定義的。整個 web 世界,就被兩家公司微軟 +Adobe 綁架了。
很多 IT 巨頭都坐不住了,尤其是蘋果和 Google。PC
操作系統(tǒng)的世界難有突破,Web 瀏覽器被蘋果寄予厚望;新貴 Google 雖然大量贊助 Mozilla,但并未對 IE
的地位產生實質影響,收購了 YouTube 后發(fā)現命脈在 Adobe 手里,也是非常難過,而且 Google 每年給 IE 的搜索框和
Adoble FLV 繳納的費用真不是小數目。
既然大家都是 W3C 的主席單位,好吧,我們重新開始做 HTML5 吧。是的,HTML5 其實就是這么誕生的。
二、HTML5第一階段: Web 增強與破壟斷
自 HTML5 誕生以來,一共經歷了兩個階段,分別是 Web 增強和移動互聯網。我們先從 Web 增強說起。Web 體驗的豐富增強主要表現在:
WebApp HTML5新增了離線存儲、更豐富的表單(比如Input type=date)、js線程、socket、標準擴展embed、css3…
流媒體 HTML5新增了audio、video
游戲 HTML5新增了canvas、webgl
當然 HTML5 還為搜索引擎的語義分析做了優(yōu)化,比如新增 Header 和 Section 等標簽,也在無障礙等領域做了不少工作,這些不再多述。HTML5 在流媒體和游戲方面的努力,成功的遏制了 Flash 的發(fā)展,然后就該遏制 IE 私有語法了。
在 HTML5 標準的升級過程中,蘋果和 Google
同時也看到了瀏覽器市場重新洗牌的機會,他們一方面參與 HTML5 的規(guī)范,一邊在瀏覽器產品上發(fā)力。Apple 首先開始大力發(fā)展
Safari,建立 WebKit 開源項目,遷移 Safari 到 Windows 平臺;Google 起初是贊助 Mozilla 開發(fā)
Firefox,后來自己開發(fā)了 v8 引擎,合并 WebKit,于 2008 年正式推出 Chrome?!癐E 的私有規(guī)范 +Flash
不是標準,我們才是標準”這樣的口號在新一代瀏覽器大戰(zhàn)中打響,IE 瞬間成為千夫所指的壟斷代表,甚至成了阻礙 Web 發(fā)展的罪人(當時 IE6
已數年未更新,并且絲毫不懼 Firefox 的發(fā)展)。
、
偏偏微軟此時也出了暈招,推出了一系列即不完整支持規(guī)范又互相不兼容的 IE7、8、9、10,徹底失去了開發(fā)者的支持。
Adobe 的 Flash 被遏制,與 Web 霸主的位子擦肩而過;IE
的私有標準被遏制,并且造成 IE 市場份額不停下滑,直到 IE 最新的移動版本反過來開始支持 WebKit 語法,真是令人唏噓。不知道
HTML6 是不是該打倒 WebKit 壟斷了。
三、HTML5第二階段: 移動互聯網
隨著 Chrome 和 Safari 的高歌猛進,以及 IE+Flash
的衰落,HTML5 告一段落,進入了下一個時代——移動互聯網。HTML5 的跨平臺優(yōu)勢在移動互聯網時代被進一步凸顯。HTML5 是唯一一個通吃
PC、Mac、iPhone、iPad、Android、Windows Phone 等主流平臺的跨平臺語言。Java 和 Flash
都曾夢想這個位置,但夢斷于 iOS。此時人們紛紛開始研究基于 HTML5 開發(fā)跨平臺手機應用。很多人當時認為,原生應用只是過渡,就像當年從
C/S 結構轉變?yōu)?B/S 結構一樣。而且學習 Objective-C 和 Java 很費勁,我既然會網頁開發(fā),為何不試試 HTML5。
W3C 此時成立了 Device API 工作組,為 HTML5 擴展了
Camera、GPS 等手機特有的 API,然而麻煩的是,移動互聯網初期的迭代太快了,手機 OS 在不停的擴展硬件
API,陀螺儀、距離感應器、氣壓計。。。每年手機 OS 都有大版本更新。而 W3C
作為一個數百家會員單位共同決策的組織,從標準草案的提出到達成一致是非常復雜的過程,跟不上移動互聯網初期的快速迭代。
PhoneGap 的出現,給開發(fā)者打開了一扇窗。很多人期待 PhoneGap 不停擴展 API,來補充瀏覽器的不足。Adobe 看到
PhoneGap 仿佛看到了重振江湖地位的希望,但在 Adobe 收購 PhoneGap 后,又發(fā)現這個東西問題很多,而且開源使得 Adobe
無法像 Flash 那樣獲取商業(yè)利益,于是就把 PhoneGap 捐給了 Apache,改名為 Cordova。
因為各種原因,Cordova
的定位最終沒有成為瀏覽器的強化,而走向了混合式開發(fā)?;诋敃r的背景,他們認為原生是不可替代的,“原生 +HTML5”的混合模式更有意義。所以現在
Cordova 的使用往往是“原生工程師 +HTML5 工程師”一起協(xié)作完成 App。
這時 Facebook 加入了 W3C,牽頭成立了 Mobile Web
工作組。Facebook 是混 Web 圈的,并且在手機 OS 上并無自己的領地,他不喜歡被蘋果和 Google
掌控的原生應用生態(tài)系統(tǒng)。Mobile Web 這個工作組的重要目標就是讓 HTML5
開發(fā)的網頁應用達到原生應用的體驗。然而,事與愿違,它不努力也就算了,結果是努力了卻失敗了。2012 年,Facebook 放棄了 HTML5
的新聞充斥了全世界的 IT 媒體,HTML5 瞬間被打入冷宮。
Facebook 為何放棄 HTML5?核心是當時基于 HTML5 真的做不出好的移動
App。對比 Twritter 等競爭對手的原生 App,Facebook 的 HTML5 版本實在無法讓用戶滿意。比如 Push 功能,到現在
HTML5 的推送和原生的推送體驗差距依然巨大,更不用說 HTML5 應用的頁面切換白屏、下拉刷新 /
側滑菜單不流暢等眾多問題。看著原生工程師輕松實現搖一搖、二維碼、語音輸入、分享到朋友圈等功能,更是讓 HTML5 工程師感覺自己站錯了隊。
即使 Facebook 不喜歡被控制,也不能拿被用戶拋棄來冒險。而且 Facebook 并沒有掌握關鍵點—手機瀏覽器內核。如果瀏覽器不跟上,其他都是白搭。
而瀏覽器在手機上的表現是什么呢?先看 Google,Chrome 性能雖高,但
Android 上的瀏覽器卻并非 Chrome,而是 WebKit 改出來的一個蹩腳的 Android 瀏覽器;再看蘋果,iOS
上不允許其他瀏覽器引擎上架 App Store,而且其他使用 Safari 引擎的應用也無法調用蘋果自己的 JavaScript 加速引擎
Nitro。結果是蘋果和 Google 不但不在瀏覽器上積極實現 HTML5 關于移動 App 所需的規(guī)范,反而對 HTML5 做出種種限制。
不管是當時硬件能力不足,還是手機 OS 廠商的故意限制,總之結果很明顯:在移動互聯網的初期,一定是原生應用生態(tài)系統(tǒng)的天下,iOS 和 Android 首先把自己變成老大后,其他小弟才能尋覓到成長的機會。
Facebook 也好,PhoneGap 也好,想在移動互聯網初期就分一杯羹是分不到的,但堅持下來,機會往往會出現。
四、HTML5這回真的來了
HTML5 在這個時間定稿,不晚不早,硬件性能更強、手機 OS 迭代速度下降。隨著
HTML5 標準定稿,一切紛爭將告一段落,現在,屬于 HTML5 的時代到來了。這個曾讓人滿懷希望,又被 Facebook
等眾多滿懷希望的開發(fā)者放棄的技術,現在會告訴大家,曾經讓各位失望的原因,現在已經不存在了!這聽起來有些驚人,大家不禁要問:是真的嗎?讓我們細細分
析。
業(yè)內俗稱 HTML5 有“性功能”障礙。即 HTML5 性能不如原生、開發(fā)工具不如原生、能力調用不如原生。
這幾個問題導致開發(fā)者無法使用 HTML5 做出與原生一樣的 App。然而,不管是硬件升級還是 OS 廠商策略變化,以及相關軟件技術的成熟,已解決了 HTML5 的“性工能”障礙。
移動端硬件軍備競賽 2011年,iPhone 4s的CPU是A5,現在iPhone 6是A8,按蘋果的歷次發(fā)布會的說法,速度共提升了7.5倍。這3年間7.5倍的速度提升,抹平了太多HTML5的性能問題。
蘋果、Google的策略變化 Google
在2013年底發(fā)布的Android 4.4,內置的Webview不再是蹩腳的Android
WebKit瀏覽器,而是Chromium。2012年iPhone
5發(fā)布后,HTML5在iOS上的表現已令人滿意,Safari獨家的JavaScript加速引擎Nitro不再那么重要,不過在iOS
8發(fā)布后,蘋果還是很識趣地取消了三方程序調用Nitro的限制,現在任意瀏覽器或應用調用iOS的UIWebview都可以利用Nitro加速。兩大手
機操作系統(tǒng)霸主和瀏覽器巨頭的態(tài)度發(fā)生了變化,使得HTML5在手機上的發(fā)展不再受限,而且這個變化不可逆只能繼續(xù)向前,這種變化勢必會產生深遠的影響。
軟件技術的成熟 PhoneGap的發(fā)展雖然放緩了,但其他產品技術卻成熟了。2014年的iWeb大會上,眾多廠商的產品提供了面向開發(fā)者免費或開源的HTML5性工能障礙的解決方案。
我們都知道瀏覽器的默認控件樣式和原生控件樣式差別很大,一個高性能的、樣式體驗與原生控件一樣
的 UI 框架是非常重要的,之前 jQuery Mobile 等產品的因性能不足,所以難當此任。在這里做一個廣告,我所在的 DCloud 公司在
iWeb 大會上發(fā)布了系統(tǒng)的 HTML5“性工能缺失”的解決方案,包括解決 HTML5 性能問題的手機端引擎、超快的 HTML5 開發(fā) IDE
產品 HBuilder、還有把 40 萬原生 API 封裝成 JavaScript 對象,以解決 HTML5 能力不足問題的
Native.js 技術。
英特爾公司發(fā)布了 Crosswalk 引擎,可以讓 Android 4.0-4.3
的手機上的應用打包 Chromium 引擎而不是 Android WebKit。雖說未來 Android 4.4
會占據更多市場份額,但目前主流的 Android 手機的系統(tǒng)版本畢竟還是 4.1、4.2。
在專業(yè)方向上很多公司也做出了不錯的成績。觸控的 Cocos2d-html5、Egret runtime 和 Ludei CocoonJS 強化了 Canvas 的表現,讓 HTML5 游戲體驗更好;UC、獵豹等手機瀏覽器也強化了音視頻播放的表現。
不管是硬件升級、軟件成熟,還是操作系統(tǒng)廠商策略變化,都在強力推動 HTML5 的爆發(fā)。
不過要注意,我說的 HTML5 爆發(fā),不是指手機瀏覽器爆發(fā)。有人說 HTML5 不好,因為用戶討厭打開瀏覽器輸入 URL
的過程。我想說這種想法是對 HTML5 的片面理解。HTML5!= 傳統(tǒng)瀏覽器,雖然編程語言還是
HTML、Javascript、CSS,但發(fā)行方式絕不是傳統(tǒng)網站那么簡單。HTML5 應用的入口,反而很少是啟動瀏覽器輸入
URL,它可以是存在于手機桌面的圖標、也可以來自超級
App(如微信朋友圈)、以及搜索引擎、應用市場、廣告聯盟。。。到處都是它的入口。它的入口,比原生 App 更多。
五、原生App的顛覆
HTML5 的“性工能”障礙得到解決,可以接近原生 App 的效果,所以它就可以替代原生
App 嗎?很多人認為,即使 HTML5 會發(fā)展的比現在好,也將是與原生 App 各占一部分市場的格局,要求不高的長尾應用會使用
HTML5,而主流應用仍是原生 App 的天下。
但我認為這樣的想法很危險,就像 HP 的高層告訴沃茲:誰會在家里擺一臺電腦呢?未來 HTML5 肯定會顛覆原生 App?!靶怨つ堋闭系K的消除,只是 HTML5 的劣勢被削弱,但劣勢被消除后,它的優(yōu)勢就會大放異彩,HTML5 的優(yōu)勢是什么?對開發(fā)者來說:
跨平臺 在
多屏年代,開發(fā)者的痛苦指數非常高,人人都期盼HTML5能扮演救星。多套代碼、不同技術工種、業(yè)務邏輯同步,這是折磨人的過程。有點類似個人電腦早期世
界,那個時候的每家電腦都有自己的操作系統(tǒng)和編程語言,開發(fā)者疲于做不同版本,其實DOS的盛行也很大程度是因為開發(fā)者實在沒精力給其他電腦寫程序??缙?/p>
臺技術在早期大多因為性能問題夭折,但中后期硬件能力增強后又會占據主流,因為跨平臺確實是剛需。
快速迭代 移
動互聯網是一個快魚吃慢魚的時代,誰對用戶的需求滿足的更快,誰的試錯成本更低,誰就擁有巨大的優(yōu)勢?;ヂ摼W產品大多免費、且有網絡效應,后入者搶奪用戶
的難度非常大。使用原生開發(fā),從招聘、開發(fā)、上線各個環(huán)節(jié)的效率都慢一倍以上,而且參與的人越多,溝通效率往往拖慢不止一倍。
減低成本 創(chuàng)業(yè)者融資并不容易,如何花錢更高效非常重要。如果你使用原生開發(fā)的App和競爭對手使用HTML5開發(fā)的App沒什么區(qū)別,但你的開發(fā)成本高出一倍,我相信沒有投資人會喜歡給你投錢。
導流入口多 HTML5應用導流非常容易,超級App(如微信朋友圈)、搜索引擎、應用市場、瀏覽器,到處都是HTML5的流量入口。而原生App的流量入口只有應用市場。聰明的HTML5開發(fā)者當然會玩轉各種流量入口從而取得更強的優(yōu)勢。
分發(fā)效率高 前
段時間微信朋友圈風靡一時《神經貓》,這個游戲如果放到Appstore,絕對沒有那么多流量,超級App帶來的流量,遠大于原生應用市場。假如微信允許
游戲在桌面創(chuàng)建快捷方式、假如游戲后續(xù)升級解決持續(xù)娛樂問題,未來不可想象。除了入口多、流量大,導流效率高也不可忽視,誰都知道:頁游和端游打同樣的廣
告,廣告變用戶的轉化率,頁游遠遠高于端游。
HTML5
對用戶的好處是:和流量入口多、分發(fā)效率高相對應的。大幅降低使用門檻。用戶眼睛看到一個興趣點,點擊后,就應該立即開始滿足用戶需求。比如流媒體可以立
即看,頁游可以立即玩。而目前的原生應用市場,用戶需要這樣操作:選一個應用、等待下載、確認權限、等待安裝,然后點擊打開。這樣糟糕的體驗遲早要被顛
覆。不管是 App、游戲還是音視頻,未來都將即點即用。誰先滿足用戶這個需求,誰就制勝。
這就是所謂“天下武功,唯快不敗”。分析至此,我們可以明顯的看出,不管是站在最終用戶角度、還是站在開發(fā)者角度,HTML5 必將取代原生應用當前的位置。并由此引發(fā)一系列顛覆。
六、還有什么會被改變?
HTML5 的爆發(fā),原生 App 生態(tài)系統(tǒng)的顛覆,是一場產業(yè)革命,很多角色都會受到影響,我們來預測一番。
標準的 HTML5 引擎并不能解決 HTML5 的所有問題,擁有大流量入口的互聯網巨頭,莫不在思考內嵌更優(yōu)秀的增強引擎。騰訊推出了 X5 瀏覽器引擎,就是看中這個機會。
目前各路瀏覽器廠商、應用市場廠商、甚至 rom 廠商,都在努力整合更優(yōu)質的瀏覽器引擎。
假使微信內嵌的 webview 可以運行更優(yōu)秀的 canvas 游戲、假使 360 手機助手可以發(fā)行即點即用的 HTML5
應用并且能力體驗與原生一致、假使小米 rom 內置更強大的 webview 使得所有 HTML5
應用在小米手機上運行的更流暢。所有巨頭都會聞風而動,沒錯,這場戰(zhàn)役會是移動互聯網世界的二次世界大戰(zhàn)。
應用分發(fā)市場將面臨洗牌,
由于超級 App 的巨大流量能輕易成為 HTML5
應用的入口,并且會形成大者更大的效應,傳統(tǒng)的應用商店、甚至線下預裝,這些流量不足和效率偏低的發(fā)行模式將被擠出市場主流。本身也是超級 App
的大流量應用商店,如果轉型得當,也將以發(fā)行 HTML5 應用為主。
原生的廣告和統(tǒng)計SDK提供商會面臨尬尷,Google、百度等基于網頁的廣告和統(tǒng)計服務會取得更大的優(yōu)勢。開發(fā)者不再需要打包 SDK,引入一個 Script 即可。
開源技術將在移動互聯網領域更加流行。HTML 的開放性造就了大量的開源產品,也反向促進了 HTML 的繁榮。在 Github 上有大量的 JS 框架,而原生的開源代碼數量相比甚少。而未來移動互聯網世界將因為開源而發(fā)展的更迅速,這里也同樣存在類 Github 廠商的機遇。
早期 HTML 只需要記事本寫幾個 Tag,中期的 HTML、JS、CSS
比較復雜,需要更高級的文本編輯器,但 HTML5 到來后,它的代碼量、復雜度、開發(fā)模型將與原生開發(fā)看齊,需要類似 XCode、Eclipse
等專業(yè)的 IDE 工具來解決開發(fā)、調試的問題。一些以會使用記事本寫代碼為榮的開發(fā)者,將面臨思路轉換甚至被更高效的開發(fā)者淘汰。
HTML5 的強大會引發(fā)很多安全問題,并且解決思路與原生不一樣,業(yè)內有可能會出現新的安全廠商領導者。
七、結語
寫到結尾,感覺話題有點大了。其實未來如何發(fā)展是沒人能準確預測的,變量非常多。但我想讓用戶和開發(fā)者都更方便的趨勢是不會錯的。歡迎大家一起討論 HTML5 的問題,在爭議中提煉真知。(36氪最近將會優(yōu)先接受一些 HTML5 的開發(fā)者來投稿參與討論,關注但不限于 HTML 游戲開發(fā),瀏覽器內核,輕應用分發(fā),郵箱 tips#36kr.com)
如果想指定語言類別,還可以增加lang屬性,如:inputx-webkit-speech lang="zh-CN"/。以及表示語法的(據說bUIltin:search可以過濾助詞):input x-webkit-speech x-webkit-grammar="bUIltin:search" /
還有一個onwebkitspeechchange的方法,發(fā)生在語言識別成功,且文字輸入到文本框后觸發(fā)。
網站標題:html5語音輸入,html5 語音聊天
標題網址:http://m.rwnh.cn/article14/phghde.html
成都網站建設公司_創(chuàng)新互聯,為您提供網站排名、標簽優(yōu)化、網站改版、微信公眾號、搜索引擎優(yōu)化、定制開發(fā)
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯