What is the state of the Mobile Browser? Find out in this presentation for State of the Browser.
State ofthe MobileBrowsergoogle.com/+PaulKinlangoo.gl/3LyMW
View Slide
Overview
> 1 Billionusers have amodernbrowser.
Every devicehas to have a"decent"browser.
The browseris still themost usedapplication.
Rounded Corners
Naive Look
What isyourmobiletraffic?
> 50%"We now have moreusers engaging withGoogle+ from mobilethan desktop." - IO2012
MobileTheimportantbits
2THINGS
PerformanceWhere do youlook?
Developers look at the ....Network(time to glass)
I also thinkUI Jank(time to frustration)
Lumpiness=LessEngagement
They have to hack it up like crazyIts no longer your father's HTML.● Just a
Where are the bottlenecks?● Javascript?● DOM manipulation?● Paint?
It's not just the JS+ Re-Layouts.+ Re-paints+ Decode timeXX
Go homeand measure[email protected]
Inconsistencies
WotConsistentPlatform?
100% SupportMostly boringstuff
Media Queries100%onmobile.iwanttouse.com/#css-mediaqueries
Geolocation86%http://onmobile.iwanttouse.com/#geolocation
Offlinehttp://onmobile.iwanttouse.com/#offline-apps86%
Nativedevelopersbuild online in
Webdevelopersbuild offline in
Adding offlineis a lot harderthan online
Camera AccessDemohttp://jsbin.com/avawaj/186%
SVG80%It would be 100% if not forAndroid < 3
Flex BoxIt would be 100% if not forAndroid < 380%
WebSQL Database86%
IndexedDB3%Reaching 3% of theweb you might aswell use any API youwant....
Thinking aboutstorage interms of API'sis wrong
WebSockets86%On mobile use wss(secure sockets)
Device Orientationonmobile.iwanttouse.com/#deviceorientation67%window.ondeviceorientation = function(event) {// process event.alpha, event.beta and event.gamma};jsbin.com/ofeces/1
FileReader66%
requestAnimationFrame44%
Web Audioonmobile.iwanttouse.com/#audio-api40%
The followingmight lookdepressing
But it's reallyexciting
Shadow DOMonmobile.iwanttouse.com/#shadowdom3%
getUserMediaonmobile.iwanttouse.com/#stream2%jsbin.com/iyekuc/3/quietnavigator.getUserMedia({audio:true, video: true},function(stream) {videoEl.src = URL.createObjectURL(stream);});
WebRTConmobile.iwanttouse.com/#streams1%apprtc-m.appspot.com
WebGLhttp://onmobile.iwanttouse.com/#webgl1%Demo:dungeonfury.playcanvas.com
CSS Filtershttp://onmobile.iwanttouse.com/#css-filters43%?<br/>img {<br/>-webkit-filter: blur(30px);<br/>}<br/>http://jsbin.com/orekeb/2/
CSS Custom Shaders0%
The mobileweb is a richplatform
Go and domoarAwesome