建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
HTML5 移動(dòng)開(kāi)發(fā)未來(lái)可否取代 iOS 和安卓
大量新生移動(dòng)設(shè)備的興起，改變了互聯(lián)網(wǎng)的未來(lái)。在技術(shù)的發(fā)展上，HTML5會(huì)取代App應(yīng)用嗎？或者說(shuō)能夠在多大程度上取代呢？在HTML5規(guī)范中，已經(jīng)加入了相機(jī)、磁力羅盤(pán)、GPS信息的支持。很多新興瀏覽器也已經(jīng)開(kāi)始支持這些新特性。能否用一個(gè)統(tǒng)一的HTML5來(lái)替代android和ios并行開(kāi)發(fā)的雙重成本呢？以下譯自Michael Mahemoff的一篇文章，詳細(xì)分析了HTML5能否取代Android和iOS應(yīng)用程序。
成都創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)提供安陽(yáng)企業(yè)網(wǎng)站建設(shè),專(zhuān)注與成都做網(wǎng)站、成都網(wǎng)站建設(shè)、H5頁(yè)面制作、小程序制作等業(yè)務(wù)。10年已為安陽(yáng)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。
介紹
移動(dòng)應(yīng)用程序(App)和HTML5都是目前最火的技術(shù)，二者之間也有不少重疊之處。在移動(dòng)設(shè)備瀏覽器里運(yùn)行的html5的web頁(yè)面，也可以重新打包成不同平臺(tái)上運(yùn)行的app。目前很多瀏覽器都有很好的跨平臺(tái)支持，（譯注：firefox居然可以在android中使用和windows下同樣的瀏覽器內(nèi)核），HTML5的web方案，對(duì)開(kāi)發(fā)者來(lái)說(shuō)更為方便。完成一次，即可多平臺(tái)使用。但這確實(shí)可行嗎？仍然有許多必要原因，使得開(kāi)發(fā)者選擇了app開(kāi)發(fā)。很明顯，很多人已經(jīng)在這么做了。本文將詳細(xì)分析兩種方案的優(yōu)劣。
功能豐富
正方：App里可以開(kāi)發(fā)出更豐富的功能
我們把移動(dòng)功能分成兩類(lèi)。程序本身和程序與系統(tǒng)的結(jié)合。比如android里，加入widget圖標(biāo)或者通知提醒之類(lèi)的。App對(duì)這兩者都沒(méi)問(wèn)題。不用多說(shuō)，這是肯定的。
反方：APP是挺強(qiáng)，但Web也正在迎頭跟進(jìn)
確實(shí)很多原生app實(shí)現(xiàn)的功能是HTML5望塵莫及的。不管你的web做的再牛，如果停留在一個(gè)沒(méi)有攝像頭支持的沙盒中，很多場(chǎng)合還是玩不轉(zhuǎn)。幸運(yùn)的是，現(xiàn)在沒(méi)有這樣的沙盒限制了。如果你需要你的web照相片，可以做一個(gè)負(fù)責(zé)照像的app，再把你的web打包進(jìn)這個(gè)應(yīng)用里面。開(kāi)源的PhoneGap框架是這么干的。這樣widget，手機(jī)提醒也都沒(méi)問(wèn)題了。
但這種混合開(kāi)發(fā)的問(wèn)題在于，增加了復(fù)雜性，而且不象傳統(tǒng)web那樣可以直接在瀏覽器里運(yùn)行。這個(gè)問(wèn)題短時(shí)間內(nèi)恐怕沒(méi)轍。好在現(xiàn)在網(wǎng)絡(luò)標(biāo)準(zhǔn)在不斷的高速擴(kuò)充，先進(jìn)的瀏覽器也在一直跟進(jìn)。Android 3.1已經(jīng)支持camera了。iOS瀏覽器也支持WebSocket和設(shè)備方向檢測(cè)了。
總得來(lái)說(shuō)，移動(dòng)設(shè)備在發(fā)展，而web也同樣在快速變化。桌面瀏覽器本身，有5家主要瀏覽器開(kāi)發(fā)商在改進(jìn)現(xiàn)有標(biāo)準(zhǔn)，豐富新的功能。所以原生App在快速前進(jìn)，同時(shí)，web也在縮小差距。
運(yùn)行效率
正方：原生APP速度更快
原生APP沒(méi)有瓶頸，而且可以直接調(diào)用GPU加速、使用多線程。
反方：現(xiàn)如今Web已經(jīng)快多了，而且多數(shù)應(yīng)用也用不著那么快。
這說(shuō)法有點(diǎn)落伍了。Chrome發(fā)布之時(shí)帶來(lái)的Javascript V8，給Web速度帶來(lái)的飛躍。而現(xiàn)在，計(jì)算速度變得更快了：
圖片處理引擎已經(jīng)使用web加速。現(xiàn)在硬件加速也已經(jīng)開(kāi)始應(yīng)用了?？纯从蒙嫌布铀俚腸anvas（圖表來(lái)源）
要開(kāi)發(fā)3D游戲的就不用抬杠了，但對(duì)于平而來(lái)說(shuō)，新聞、郵件、時(shí)間管理、社交網(wǎng)絡(luò)，這些用Web都?jí)蛴昧?。試試Steve Souders的手機(jī)性能測(cè)試工具。 另外，越來(lái)越多的框架結(jié)合WebGL，可以發(fā)揮OpenGL的優(yōu)勢(shì)了。比如ImpactJS，幫助開(kāi)發(fā)JS游戲。
開(kāi)發(fā)感受
正方：原生APP好寫(xiě)
原生APP使用強(qiáng)壯的程序語(yǔ)言（Java, Objective C, C++）。適合寫(xiě)復(fù)雜程序，經(jīng)過(guò)歷史驗(yàn)證，API豐富。在桌面環(huán)境可以方便的用模擬器測(cè)試。而Web程序的runtimes和亂七八糟的各路瀏覽器讓人頭大。
反方：一般都是Web更簡(jiǎn)單，特別是需要兼容不同設(shè)備的時(shí)候。
Web最初的功能只限于文檔展示，而不是程序應(yīng)用，貌似最近倆星期才有了JS。但有了JS后，web的世界馬上就不一樣了。更何況web不只是靜止的，HTML5，CSS3，EcmaScript Harmony（誰(shuí)知道這是什么？）都給開(kāi)發(fā)者極大幫助。你是喜歡C++，java, JavaScript，那你的個(gè)人愛(ài)好，也是基于你已經(jīng)攢下的代碼。但是現(xiàn)在沒(méi)人能否認(rèn)JavaScript也和前者站在同一擂臺(tái)上。
瀏覽器/runtime的互不兼容（碎片），反過(guò)來(lái)看做APP也是一樣。用Java寫(xiě)了Android app，然后又要面對(duì)iOS的Objective C。如果能寫(xiě)一個(gè)程序，馬上能在Android和iOS上運(yùn)行，多省事啊。這咱還沒(méi)提WebOS, BlackBerry，Windows Mobile呢。當(dāng)然，這是理論上的。要是想讓程序在每個(gè)平臺(tái)都跑得很漂亮，得做不少調(diào)試和妥協(xié)。這對(duì)很多原生APP也是一樣的。不同OS版本，不同的設(shè)備。。。
所謂的Web碎片化，一直都是如此。但好消息是現(xiàn)在已經(jīng)有很多不錯(cuò)的解決辦法。Modernizr庫(kù)，用得好的話，可以幫你兼容一大批主流設(shè)備，不管是啥系統(tǒng)，哪個(gè)牌子的?？纯次覀?011年的Google IO演示。
用戶(hù)體驗(yàn)
正方：原生APP更切合原有平臺(tái)
操作感受的定義之一，就是用戶(hù)希望在你的程序里，用與系統(tǒng)連貫統(tǒng)一的方式來(lái)操作。不同的平臺(tái)，都有一些約定俗成的習(xí)慣。比如長(zhǎng)按按鈕會(huì)有啥反應(yīng)。你不能指望用一套統(tǒng)一的HTML5 App去滿(mǎn)足所有用戶(hù)。
此外，整個(gè)平臺(tái)的操作感受都由用平臺(tái)自有的軟件庫(kù)協(xié)調(diào)。直接調(diào)用平臺(tái)工具包就能直接免費(fèi)獲得完整支持。
反方：我們Web有自己的傳統(tǒng)，你要特想做原有平臺(tái)那種感覺(jué)的web，也一樣能做出來(lái)
前面說(shuō)了，Web開(kāi)發(fā)的方式，是先做一個(gè)大體適合所有平臺(tái)的版本，然后再針對(duì)不同平臺(tái)不斷改進(jìn)。當(dāng)這些改進(jìn)主要是針對(duì)功能時(shí)，你可以選擇幾個(gè)你最關(guān)心的平臺(tái)做優(yōu)化。類(lèi)似于瀏覽器檢測(cè)。技術(shù)論壇里的悲催技術(shù)員們，經(jīng)常抱怨這事。太多不同的瀏覽器版本了。不過(guò)如果你優(yōu)先關(guān)注兩三種主流平臺(tái)，是值得為他們多花點(diǎn)時(shí)間做做優(yōu)化。
web本來(lái)就有自己的操作感受。我們也可以說(shuō)，不同的默認(rèn)瀏覽器以及運(yùn)行環(huán)境造就了獨(dú)特的"Web感受"。從更廣的角度看，這本身就是一種用戶(hù)公認(rèn)的方式。此外，還有很多成功的案例并不遵循移動(dòng)設(shè)備的原生操作習(xí)慣，人家也成功了。想想你最喜歡的手機(jī)游戲的界面？很多更傳統(tǒng)的app也是一樣，比如Twitter客戶(hù)端。
html5會(huì)取代原生的安卓開(kāi)發(fā)嗎
據(jù)我所知目前各大應(yīng)用里面，純 HTML5 開(kāi)發(fā)整個(gè)界面的基本沒(méi)有，大部分都是說(shuō)，基本是原生界面，部分內(nèi)容用 H5 的方式來(lái)展現(xiàn)，這個(gè)才是主流。
未來(lái)會(huì)是朝哪個(gè)方向發(fā)展呢？答案肯定還是朝原生的方向發(fā)展，因?yàn)楝F(xiàn)在用戶(hù)對(duì)手機(jī)的交互越來(lái)越挑剔了，而 H5 的方式你很難做到非常流暢。即使是當(dāng)前流行的混合開(kāi)發(fā)技術(shù)，像 facebook 出現(xiàn)的 react native，它用 H5 寫(xiě)代碼，但渲染出來(lái)的是原生界面，所以大家都是在追求流暢的交互和體驗(yàn)，如果將這個(gè)作為目標(biāo)的話，作為iOS開(kāi)發(fā)者以及原生系統(tǒng)的開(kāi)發(fā)者，應(yīng)該是需求越來(lái)越多的，純 H5 開(kāi)發(fā)的項(xiàng)目基本上已經(jīng)沒(méi)有了。
當(dāng)然，我還是希望各位 iOS 開(kāi)發(fā)者能夠多接觸一些 H5 的知識(shí)，在工作中多多少少還是會(huì)涉及一些混合開(kāi)發(fā)的界面，如果你懂這些知識(shí)，會(huì)很大程度上幫助你。
如何利用html5開(kāi)發(fā)android界面
H5開(kāi)發(fā)安卓界面需要注意以下三點(diǎn)：
（上）包括Android設(shè)備多分辨率的問(wèn)題，Android中構(gòu)建HTML5應(yīng)用程序基礎(chǔ)
（中）包括Android與JS之間的互動(dòng)，Android處理JS的警告對(duì)話框等，Android中的調(diào)試
（下）包括本地儲(chǔ)存在Android中的應(yīng)用，地理位置的應(yīng)用，離線應(yīng)用的構(gòu)建
進(jìn)入正題
● Android設(shè)備多分辨率的問(wèn)題
Android瀏覽器默認(rèn)預(yù)覽模式瀏覽 會(huì)縮小頁(yè)面 WebView中則會(huì)以原始大小顯示
Android瀏覽器和WebView默認(rèn)為mdpi。hdpi相當(dāng)于mdpi的1.5倍 ldpi相當(dāng)于0.75倍
三種解決方式：1 viewport屬性 2 CSS控制 3 JS控制
1 viewport屬性放在HTML的meta中
html代碼：
span style="font-size: x-small;" head
titleExmaple/title
meta name=”viewport” content=”width=device-width,user-scalable=no”/
/head/span
meta中viewport的屬性如下：
span style="font-size: x-small;" meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi |
high-dpi | medium-dpi | low-dpi]
"
/
/span
2 CSS控制設(shè)備密度
為每種密度創(chuàng)建獨(dú)立的樣式表（注意其中的webkit-device-pixel-ratio 3個(gè)數(shù)值對(duì)應(yīng)3種分辨率）
html代碼：
link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" /
link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" /
link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" /
3 JS控制
Android瀏覽器和WebView支持查詢(xún)當(dāng)前設(shè)別密度的DOM特性
window.devicePixelRatio 同樣值有3個(gè)（0.75,1,1.5對(duì)應(yīng)3種分辨率）
JS中查詢(xún)?cè)O(shè)備密度的方法
js代碼：
if (window.devicePixelRatio == 1.5) {
alert("This is a high-density screen");
} else if (window.devicePixelRation == 0.75) {
alert("This is a low-density screen");
}
Android中構(gòu)建HTML5應(yīng)用
使用WebView控件 與其他控件的使用方法相同 在layout中使用一個(gè)WebView標(biāo)簽
WebView不包括導(dǎo)航欄，地址欄等完整瀏覽器功能，只用于顯示一個(gè)網(wǎng)頁(yè)。
安卓開(kāi)發(fā)和html5都是開(kāi)發(fā)的，我所了解到的是安卓主要用代碼攻于后臺(tái)，而h5負(fù)責(zé)網(wǎng)頁(yè)頁(yè)面的交互，也
有中間件類(lèi)似于phonegap，可以完成你要的功能，操作數(shù)據(jù)庫(kù)，本地文件，訪問(wèn)攝像頭，訪問(wèn)各種傳感器都沒(méi)問(wèn)題。
類(lèi)似的中間件還有AppCan等等。
甚至你自己弄一個(gè)WebView，然后用java給這個(gè)webview中的js提供本地操作的接口，也可以實(shí)現(xiàn)的，這也就是中間件完成的功能。
另外，腳本語(yǔ)言怎么了，安卓的那一套XML布局，就是借鑒了HTML和CSS，微軟的XAML也是HTML的變種。html+css+js是最完美的MVC思想的體現(xiàn)，CSS是創(chuàng)建UI最強(qiáng)大的語(yǔ)言。
最近炒得很火的hibrid混合開(kāi)發(fā)，就是用的這種思想。很多UI特別復(fù)雜的功能，用NativeCode可能幾千行代碼，用webview+html，寥寥幾百行就可以搞定。淘寶的很多手機(jī)應(yīng)用就是webview搭載html實(shí)現(xiàn)的，只不過(guò)用戶(hù)根本感覺(jué)不出來(lái)而已。
html5能代替IOS和安卓上的原生程序嗎？
不可以；
1、html5是一種移動(dòng)版網(wǎng)絡(luò)網(wǎng)頁(yè)編程的簡(jiǎn)稱(chēng)，iOS和安卓都是一種系統(tǒng)的代名詞，它們的本質(zhì)不相同；
2、html5展示是多元化的網(wǎng)頁(yè)形式展現(xiàn)，iOS和安卓系統(tǒng)是單獨(dú)的防護(hù)系統(tǒng)和安裝系統(tǒng)的承載體，html5在移動(dòng)端的安裝需要iOS和安卓的支持；
3、html5的開(kāi)發(fā)是一種建議辦的網(wǎng)站頁(yè)面，iOS和安卓開(kāi)發(fā)是基于移動(dòng)端系統(tǒng)引用的強(qiáng)大功能的支持軟件；
4、html5的作用在于程序簡(jiǎn)便性，iOS和安卓系統(tǒng)代表的事系統(tǒng)運(yùn)行的快慢和打開(kāi)速度后占用空間大小的一種待命次。
h5開(kāi)發(fā)和原生app開(kāi)發(fā)以及web開(kāi)發(fā)有什么區(qū)別呢？
一、開(kāi)發(fā)方面
原生App
⊙ 每一種移動(dòng)操作系統(tǒng)都需要獨(dú)立的開(kāi)發(fā)項(xiàng)目【點(diǎn)擊查看APP開(kāi)發(fā)的真正報(bào)價(jià)】
⊙ 每種平臺(tái)都需要獨(dú)立的開(kāi)發(fā)語(yǔ)言。Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)等等
⊙ 需要使用各自的軟件開(kāi)發(fā)包，開(kāi)發(fā)工具以及各自的控件
移動(dòng)Web App
⊙ 因?yàn)檫\(yùn)行在移動(dòng)設(shè)備的瀏覽器上，所以只需要一個(gè)開(kāi)發(fā)項(xiàng)目
⊙ 這種應(yīng)用可以使用HTML5,CSS3以及JavaScript以及服務(wù)器端語(yǔ)言來(lái)完成（PHP,Ruby on Rails,Python）
⊙ 這里可沒(méi)有標(biāo)準(zhǔn)的SDK，基本任意選擇別忘了有一些跨平臺(tái)的開(kāi)發(fā)工具，比如PhoneGap, Sencha Touch 2，APPcan以及Appcelerator Titanium等等。
二、能力方面
原生App
⊙ 能夠與移動(dòng)硬件設(shè)備的底層功能，比如個(gè)人信息，攝像頭以及重力加速器等等
移動(dòng)Web App
⊙ 只能使用有限的移動(dòng)硬件設(shè)備功能。
三、獲取方法
原生App
⊙ 直接下載到設(shè)備
⊙ 以獨(dú)立的應(yīng)用程序運(yùn)行(并不需要瀏覽器)
⊙ 用戶(hù)必須手動(dòng)去下載并安裝這些原生App
⊙ 有一些商店與賣(mài)場(chǎng)來(lái)幫助用戶(hù)尋找你的App，目前app市場(chǎng)不計(jì)其數(shù)
移動(dòng)Web App
⊙ 從移動(dòng)設(shè)備上的瀏覽器訪問(wèn)
⊙ 不需要安裝額外的軟件
⊙ 軟件更新只需要服務(wù)器就夠了
⊙ 因?yàn)楝F(xiàn)在沒(méi)有什么商品或賣(mài)場(chǎng)提供這種App，所以如何搜索這些移動(dòng)Web App相當(dāng)不簡(jiǎn)單。
四、版本控制
原生App
⊙ 用戶(hù)可以自由地選擇是否更新軟件版本，所以會(huì)出現(xiàn)不同用戶(hù)同時(shí)使用不同版本的情況
移動(dòng)Web App
⊙ 所有的用戶(hù)都是用同樣的版本
五、優(yōu)勢(shì)
原生App
⊙ 比移動(dòng)Web App運(yùn)行快
⊙ 一些商店與賣(mài)場(chǎng)會(huì)幫助用戶(hù)尋找原生App
⊙ 官方賣(mài)場(chǎng)的應(yīng)用審核流程會(huì)保證讓用戶(hù)得到高質(zhì)量以及安全的App
⊙ 官方會(huì)發(fā)布很多開(kāi)發(fā)工具或者人工支持來(lái)幫助你的開(kāi)發(fā)
移動(dòng)Web App
⊙ 跨平臺(tái)開(kāi)發(fā)
⊙ 用戶(hù)不需要去賣(mài)場(chǎng)來(lái)下載安裝App
⊙ 任何時(shí)候都可以發(fā)布App，因?yàn)楦静恍枰俜劫u(mài)場(chǎng)的審核
⊙ 如果你已經(jīng)有了一個(gè)Web App，你可以使用 responsive web design來(lái)輔助改進(jìn)
六、缺陷
原生App
⊙ 開(kāi)發(fā)成本高，尤其是當(dāng)需要多種移動(dòng)設(shè)備來(lái)測(cè)試時(shí)
⊙ 因?yàn)槭遣煌拈_(kāi)發(fā)語(yǔ)言，所以開(kāi)發(fā)，維護(hù)成本也高
⊙ 因?yàn)橛脩?hù)使用的App版本不同，所以你維護(hù)起來(lái)很困難
⊙ 官方賣(mài)場(chǎng)審核流程復(fù)雜且慢，會(huì)嚴(yán)重影響你的發(fā)布進(jìn)程
移動(dòng)Web App
⊙ 無(wú)法使用很多移動(dòng)硬件設(shè)備的獨(dú)特功能
⊙ 要同時(shí)支持多種移動(dòng)設(shè)備的瀏覽器讓開(kāi)發(fā)維護(hù)的成本也不低
⊙ 如果用戶(hù)使用更多的新型瀏覽器，那問(wèn)題就更不好處理了
⊙ 對(duì)于用戶(hù)來(lái)說(shuō)，這種App很難被用戶(hù)發(fā)現(xiàn)。
想要了解更多有關(guān)APP開(kāi)發(fā)的相關(guān)信息，推薦咨詢(xún)豬八戒網(wǎng)。豬八戒網(wǎng)有千萬(wàn)服務(wù)商為企業(yè)、公共機(jī)構(gòu)和個(gè)人提供定制化的解決方案，將創(chuàng)意、智慧、技能轉(zhuǎn)化為商業(yè)價(jià)值和社會(huì)價(jià)值。2011年豬八戒網(wǎng)獲得IDG投資并被評(píng)選為中國(guó)2011年度“最佳商業(yè)模式十強(qiáng)”企業(yè)；專(zhuān)業(yè)性值的信賴(lài)。
新聞名稱(chēng)：安卓開(kāi)發(fā)與html5開(kāi)發(fā),安卓 html5 開(kāi)發(fā)
鏈接地址：http://fisionsoft.com.cn/article/dscoeps.html
