스마트폰 HTML5 지원분석 1. 개요 1) 다양한제조사 / 모델및 OS 버전으로부터기인한단말 fragmentation 은안드로이드 Native App 개발 시큰 Risk Factor 가되고있다. ( 출처 : http://developer.android.com/about/dashboards/index.html) ersion Codename API Distribution 1.6 Donut 4 0.2% 2.1 Éclair 7 2.4% 2.2 Froyo 8 9.0% 2.3-2.3.2 9 0.2% Gingerbread 2.3.3-2.3.7 10 47.4% 3.1 12 0.4% Honeycomb 3.2 13 1.1% 4.0.3-4.0.4 Ice Cream Sandwich 15 29.1% 4.1 16 9.0% Jelly Bean 4.2 17 1.2% Data collected during a 14-day period ending on January 3, 2013 2) 적당한 fragmentation 은사용자들에게선택의폭을넓힌다는측면에서긍정적이나, 상기표에서보듯크게중심이되는버전이없으며하드웨어또한다양한해상도와성능의단말이존재한다. 3) 이에따라서비스앱의 time-to-market 과유지보수를위해 native app 과 mobile web 의장점을가진 hybrid 방식의앱이선호되고있다. 4) 하지만 hybrid 앱의내장브라우저또한이러한 fragmentation 에서자유로울수없으며, 따라서본보고서에서는 hybrid 앱개발시 HTML5 적용을위한사전분석으로아래와같은조사를수행하였다. 1 OS 버전 fragmentation 에따른 HTML5 스펙지원확인을위한객관적자료검색 2 단말테스트를통한 HTML5 스펙지원여부확인 3 Animation 이적용된모바일웹화면수행결과 2. 브라우저별 HTML5 지원항목 ( 출처 : http://mobilehtml5.org) Feature Safari on ios Android Browser Google Chrome Platform iphone, ipad Phones & Tablet Android 4.0+ ersions tested 3.2 to 6.0 1.5 to 4.1 18 Application Cache 1
2.1+ Offline package installation. Web storage Persistent and session storage. Web SQL storage (no active) Persistent SQLite storage. Geolocation Geolocation & tracking using GPS, cells or Wi-Fi. Multimedia 2.3+ ideo & Audio Players Server-Sent Events 4.1+ EventSource pattern to mantain the connection to the server open Web Sockets 4.2+ Newbidireccional protocol over HTTP Web Workers 5.0+ Threading and background process communications Canvas API 2D Drawing API SG W3C Working Group 3.0+ Scalable ector Graphics Motion Sensors W3C Standard 4.2 3.0+ Partial support Accelerometer, Gyroscope, Magnetometer HTML5 Form irtual Keyboards 2
W3C Standard 4.0+ Text Inputs with different keyboards HTML5 Form New Controls 5.0+ At least: Date, Time, Month, Range Touch Events 2.1+ touchstart, touchend, touchmove, touchcancel CSS 3 Basic W3C Standard opacity, backgrounds, text effects, rounded corners CSS 3 Transforms 2D W3C Standard rotate, translate, scale, skew, matrix CSS 3 Transforms 3D W3C Standard 3.0+ scale3d, translate3d. Perspective, Backface CSS 3 Transitions W3C Standard Animations between two states CSS 3 Animations W3C Standard Animations with keyframes iewport definition supports targetdensitydpi Meta tag support. Position: fixed support W3C Standard 5.0+ Ability to mantain an element fixed in the viewport while scrolling / zooming WebGL Khronos Group API 2.2+ & non scalable viewport 2.3 only on Sony 3
Xperia 3D Canvas for the web XMLHttpRequest 2.0 5.0+ 3.0+ AJAX 2.0: upload files, progress Navigation Timing API 4.0+ Performance events for WPO Network Information API 2.2+ Connection Type: 2G, 3G, 4G, WiFi File API 6.0+ 3.0+ Opening local files through input type FileSystem API irtual FileSystem for persisten storage CORS 3.0+ Cross origin Resource Sharing, for cross domain AJAX request HTML Media Capture 6.0+ (partial) 3.0+ Taking pictures, record video and audio from an input file type Web Audio API 6.0+ Low level audio playing Notifications API Background alert notifications IndexedDB Agnostic database system (replacement for Web SQL) getusermedia 4
Camera access for <video> element Animation Timing API 6.0+ Performant timers for HTML5 animations FullScreen API Allow the application to get a full screen mode Page isibility API Determine current visibility state Remote Debugger Ability to attach a remote debugger, such as Web Inspector 6.0+ usb usb 3. 단말기종별 HTML5 지원테스트사이트확인결과 1) 테스트방법 1 Webiew를탑재한앱으로 http://html5test.com 접속 2) 테스트결과 별첨 3) 결과분석 1 안드로이드 Webiew의경우다양한속성을지정할수있으며, 이값들을지정하지않으면 default value로동작함. 예를들어, localstorage 의경우아래와같이속성을명시적으로지정해주어야함. settings.setdomstorageenabled(true); 2 속성들을 enable 시키고테스트사이트접속하면단말 OEM브라우저수준의점수가나옴. 3 안드로이드 eclair버전 (2.1) 이상과 ios에서애니메이션효과를위한 Canvas, CSS3 transform 2D 등에대한지원은모두되는것으로나왔음. 4 비디오는안드로이드단말에서영상코덱 (H.264, WebM, MPEG-4, Ogg Theora) 을지원하지않아 HTML5 태그를그대로사용할수없음. 기존에사용하는방식으로링크주소를걸어단말의재생기로재생해야함. 4. 애니메이션테스트사이트 1) 다음의테스트사이트를통해 HTML5 애니메이션을시험해볼수있다. Canvas 태그를이용한샘플 : http://www.codejs.co.kr/examples/html5/ballpool/ 5
2) 단말별체감비교 1 갤럭시S 진저브레드 (2.3.X) 의경우네이티브앱과비교하여애니메이션효과의부드러움과속도가현저히떨어짐. 갤럭시S2 단말의경우도부드럽지는못함. 2 결국, 네이티브앱과비슷한정도의애니메이션을사용한다면속도이슈가있을것으로판단됨. < 참고1. HTML5에대한만족도 > < 참고 2. 모바일브라우저속도 > < 참고 3. 모바일브라우저속도 vs PC 브라우저속도 > 6
5. Reference - 모바일의각브라우저별 HTML5 지원항목 : http://mobilehtml5.org/ - 브라우저별 HTML5 지원점수 : http://beta.html5test.com/results/mobile.html - HTML5 엘리먼트별지원브라우저정리 : http://caniuse.com/ - 안드로이드 OS 버전별점유율 : http://developer.android.com/about/dashboards/index.html 7