Dcloud崔紅保:打造極致的Web APP原生體驗
原創2016年8月26-27日,由51CTO.com主辦的【WOT2016移動互聯網技術峰會】在北京粵財JW萬豪酒店隆重召開。自2012年以來,WOT品牌大會秉承專注技術、服務技術人員的理念已經成功舉辦十一屆,不僅積累了大量的專家資源,更獲得廣大IT從業者和技術愛好者的認可和好評,并成為業界重要的技術分享及人脈拓展平臺。
在前端技術專題主場,記者采訪了DCloud前端架構師崔紅保,請他分享在提升Web APP用戶體驗方面的經驗。
Web App和Native App誰會笑到***?
在論壇現場,當崔紅保問到有誰在做Native App開發時,會場有不少人都舉起了手,這些人來聽崔紅保談HTML5如何提升Web App的用戶體驗,由此可見大家都非常關注Web App的未來發展。
對于Web App和Native App的未來發展前景,崔紅保有自己的觀點。他表示,“我認為Web App和Native App二者在相當一段時間內都將是并存的關系,但是會呈現出此長彼消的發展態勢,Web App的比重會越來越高,而Native App的用戶比例會逐漸降低。”
之所以會得出這樣的結論,崔紅保認為最關鍵的還是成本問題及用戶獲取內容體驗問題,原生開發需要分平臺進行,人力成本、多團隊溝通成本都較高;原生App的推廣成本更是Web App的10倍以上。此外,對比PC互聯網,目前很少有用戶愿意在PC上安裝客戶端,有任何需求基本都會直接通過瀏覽器搞定,手機未來也將是如此。而像微信這樣的超級APP入口,它其實已經承載了很多Web App功能,從這也能看出Web App也將代表著未來的一個走勢。而HTML5則是Web App的主要支撐技術。
三箭齊發,提升HTML5性能
雖然HTML5技術從功能、性能體驗、開發調試都比原生要差,但是通過四層合力,Web App的js能力一樣可以與原生拉齊:首先,W3C、ECAMScript、webkit擴展這些規范自身大概有7萬左右的API;在此基礎上,HTML5+規范封裝了30大類、幾百個常用的API,可以滿足一般App開發所需的能力需求;通過Native.js,讓JS直調40w原生API;在Active Plugin,可以用JS調用各種原生SDK和插件。
對于如何提升HTML5性能,崔紅保認為可以從三個方面入手,一是硬件方面,提升設備能力;二是OS操作系統方面,升級到更高版本的操作系統, Android 4.4+ 目前的市場占有率已超過80%;三是利用HTML5+強化引擎、MUI前端框架,來提升Web強化引擎的性能。
崔紅保告訴記者,HTML5其實一直在完善,例如本地存儲的容量問題,現在通過增加引擎封裝擴展了本地存儲,還了封裝了本地IO系統、文件系統,可以實現與原生應用一樣操縱本地資源文件。至于安全性問題,可以把一些敏感數據做加密,再存儲本地。
Web App用戶體驗差在哪?
崔紅保認為,Web App目前用戶感受較差的地方主要集中在以下方面:
首先是下拉刷新,現在業務大多有下拉刷新需求,在Web APP上面會出現閃屏抖動情況;其次是頁面切換,從A頁面跳到B頁面的時候,可能有一個等待,出現白板頁面。***是Web APP能力上面的限制,例如二維碼掃描,對于定位方面的需求可能存在局限性。
除此之外,像HTML5展示頁面還容易出現頂部標題在滾動時閃爍、點擊延遲等現象。
一心二用的流應用
崔紅保告訴記者,流應用是一個新發行技術,相當于流媒體發行。過去人們看電影,要找一個資源先下載到本地,再通過播放器播放。后來優酷、愛奇藝出現后,大家可以緩沖看,邊看邊下載,流應用也是同樣的概念。
和原生應用不同,流應用不需要經歷搜索下載、本地安裝、權限確認、安裝完成這些繁瑣步驟,流應用在點擊下載按鈕后,可以一邊使用一邊下載,例如大家下載大眾點評外賣,后臺在下載,但是用戶可以直接先進入大眾點評網的首頁直接開始操作,其實首頁也只有100K大小,也就相當于大家刷一下朋友圈的流量,基本上在5秒鐘內就可以開始應用,可以大大提升用戶使用體驗。
還有一點優勢也非常明顯,那就是流量問題。原生APP大多都在幾十兆到上百兆大小,用戶下載耗費流量。而流應用可以降低流量,它把公有引擎內置手機里面,這樣用戶不需要下這個引擎,只需要下對應的資源就可以了。這個資源可能只有幾百K或者幾兆大小。可以有效避免下載折損。
記者了解到,在IOS和Android上已經有了流應用的應用,在360手機助手微應用專區,看到的所有應用都是流應用。