Download pdf - Breaking Limits on Mobile HTML5 - 15 Hacks you might not know

Max Firtman @firt

BREAKING LIMITS

ON MOBILE

HTML5

Amsterdam, May 16th, 2013

Thursday, May 16, 13

http://qconlondon.com/london-2012/presentation/Mobile,%20HTML5%20and%20the%20cross-platform%20promise


















mobile+web developer

maximiliano @firt




hacks, why?







1- UI hacks


UI

Full screen


full screen


full screen

4 solutionsThursday, May 16, 13

full screen

Solution #1


full screen

<meta name="apple-mobile-web-app-capable" content="yes">


full screen


if (navigator.standalone) { }



<meta name="viewport" content="width=device-width">




full screen

<meta name="apple-mobile-web-app-capable" content="yes"><meta name="viewport" content="width=320.1">


full screen


<meta name="viewport" content="width=device-width"><meta name="viewport" content="..." media="device-height: 568px">


full screen


full screen

Solution #2


full screen


full screen

@media (orientation: landscape) and (height: 214px), (orientation: landscape) and (height: 181px) {}


full screen

Solution #3

future platforms


full screenvar body = document.documentElement;

if (body.requestFullScreen) { body.requestFullScreen();}



if (body.requestFullScreen) { body.requestFullScreen();} else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen();}



if (body.requestFullScreen) { body.requestFullScreen();} else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen();} else if (body.mozRequestFullScreen) { body.mozRequestFullScreen();}


full screen

Solution #4

...


full screen

window.addEventListener("load", function() { window.scrollTo(0, 0); });

// use with caredocument.addEventListener("touchmove", function(e) { e.preventDefault() });


UI

Snapped mode Windows 8


snapped mode


snapped mode

@media only screen and (max-width: 400px) { @-ms-viewport { width: 320px; }}


UI

High resolutioncanvas


hi-res canvas

<canvas width="300" height="200"></canvas>

300px


hi-res canvas

300 CSS pixels

300 1.00390 1.30450 1.50600 2.00672 2.24900 3.00

device px px ratio


hi res canvas

<canvas width="300" height="200"> </canvas>

300px


hi res canvas

var devPxRatio = window.devicePixelRatio;

var canvasPxRatio = document.querySelector("canvas") .getContext("2d") .webkitBackingStorePixelRatio;


hi res canvas


300px

devPxRatio = 2canvasPxRatio = 1


hi res canvas


300px

devPxRatio >= 1canvasPxRatio = undefined


Solution #1

hi res canvas


hi res canvas

<meta name="viewport" content="width=640">


600px


Solution #2

hi res canvas


hi res canvas

<script>document.querySelector("canvas") .getContext("2d") .setScale(2, 2);</script>

300px


hi res canvas


300px



hi res canvas

<canvas width="600" height="400" style="width: 300px; height: 200px"></canvas>

300px



multi-platform &multi-resolution


execution &memory


UI

truly numeric !eld


numeric

<input type="number">


numeric



numeric



Solution


numeric

<input type="number" pattern="[0-9]*">


numeric

<input type="password" pattern="[0-9]*">


UI

rich editor


rich editor

<ul contenteditable> <li>First item</ul>


rich editor



rich editor



UI

background tabresurrection


background


background



<blink>Welcome to my website!</blink>


<bgsound src="welcome.wav">


<font family="Arial" size="20">


background

<meta http-equiv="refresh" content="60">


background<meta http-equiv="refresh" content="2">


background<meta http-equiv="refresh" content="2">

<script>var mr = document.querySelector("meta");setInterval(function() { mr.content=mr.content; }, 1000); </script>



background


DISCLAIMER


only from iOS 6.1(5.0+ similar)


UI

images for different screen densities


screen densities

<img src="photo.png" width="300">


screen densities


300 CSS pixels

300 1.00390 1.30450 1.50600 2.00672 2.24900 3.00

device px px ratio

screen densities


Solution #1


screen densities

use vector images <img src="photo.svg" width="300">

<svg></svg>

@font-face {}


screen densities


screen densities


Solution #2


screen densities

<img src="photo.png" width="300">

if (window.devicePixelRatio > 1.5) { // change URL}


Solution #3


screen densities

<div id="photoContainer">

#photoContainer { background-image: -webkit-image-set(url('photo-lo.png') 1x, url('photo-hi.png') 2x); width: 300px; height: 200px;}


Solution #4


screen densities


#photoContainer { background-image: url('photo-lo.png'); width: 300px; height: 200px;}


screen densities


@media (-webkit-min-device-pixel-ratio: 1.5) {#photoContainer { background-image: url('photo-hi.png'); background-size: 100%; width: 300px; height: 200px;}

}


screen densities


@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5) {

}


screen densities


@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1/2) {

}


screen densities


@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1/2), (min-resolution: 1.5dppx) {

}


always query on ranges

@media (-webkit-device-pixel-ratio: 2)


always query on ranges

@media (-webkit-min-device-pixel-ratio: 1.7)


!nd the balance300x300 900x900


2- device interaction hacks


device

media capture


media capture

<input type="file">


Solution


media capture

<input type="file" accept="image/*">

<input type="file" accept="video/*">

<input type="file" accept="audio/*">


media capture

<input type="file" accept="image/*" capture="camera">

<input type="file" accept="video/*" capture="camcorder">

<input type="file" accept="video/*" capture="microphone">

(old spec)Thursday, May 16, 13

media capture

Live demo


device

interacting with native apps


native integration



Solution, part I


DON'T DO THAT


Solution, part II


native integration

<meta name="apple-itunes-app" content="app-id=999">


native integration


native integration

<meta name="apple-itunes-app" content="app-id=999">

<meta name="app-argument" content="">


native integration

<meta name="msApplication-ID" content="App"><meta name="msApplication-PackageFamilyName" content="myPackage">


native integration


native integration


native integration


native integration

<meta name="msApplication-ID" content="App"><meta name="msApplication-PackageFamilyName" content="myPackage">

<meta name="msApplication-Arguments" content="">


no apino android


Solution, part III


native integration

<a href="customprotocol://">Open app</a>


native integration

<a href="twitter://post?message=HTML5">Tweet this</a>


native integration


native integration

function tweet() { location.href="twitter://post?message=HTML5"; setTimeout(function() {

location.href="postCall.html"; }, 1000);}


native integration


native integrationfunction tweet() { iframe.location.href= "twitter://post?message=HTML5"; setTimeout(function() {

appNotInstalled(); }, 1000);}


device

push noti!cation


push

<a href="suscription.passbook"> Subscribe to this site</a>


push


push


3- enhancing your app hacks


enhance your app

iOS home screen title


home screen


home screen


home screen

<title>My long title for SEO</title><meta name="apple-web-app-title" content="My App">

UNDOCUMENTED


enhance your app

IE10 Live Tile


live tile


live tile


live tile

<meta name="msapplication-TileImage" content="tile.png">

<meta name="msapplication-TileColor" content="#ef0303">


enhance your app

You've said live tile!!!


live tile

<meta name="msapplication-badge" content="frequency=60;polling-uri=XXX">


live tile<meta name="msapplication-badge" content="frequency=60;polling-uri=XXX">

<?xml version="1.0" ?><badge value="3" />


live tile<meta name="msapplication-badge" content="frequency=60;polling-uri=XXX">

<?xml version="1.0" ?><badge value="newMessage" />


enhance your app

Storage limits


storage

AppCache, localStorage, WebSQL, IDB


storage

Different domains, iframes and Cross Document Messaging API


storage


this might not work in the future


do you really need more space?


4- tools


Tools

Bandwidth simulators


netlimiter.com


http://slowyapp.com/


slowyapp.com




charlesproxy.com




Tools

Virtual Mobile Labs


developer.nokia.comThursday, May 16, 13



developer.samsung.comThursday, May 16, 13



keynotedeviceanywhere.com


http://dafree.keynote.com/

http://dafree.keynote.com/

most used key combinations?




Tools

Live Reload


livereload.com




wrapping up


we need hacks because

• browsers are different• no enough information• undocumented features• buggy


however

• usability and Performance matters• be careful• your app should work anyway • use feature detection


1 fullscreen2 snapped mode3 hires canvas4 numeric !eld5 rich editor6 background tab7 images & densities8 html media capture

9 push noti!cationA home screen titleB live tileC storage limitsD bandwidth simulatorsE virtual mobile labsF live reload



“change is the only constant“Heraclitus


you can reach a good experience

Pictures)from)freedigitalphotos.net)

thank you!

[email protected] @!rt

!rt.mobi/pmw


mailto:[email protected]

mailto:[email protected]