Breaking Limits on Mobile HTML5 - TopConf Tallinn

Max Firtman @firt

!

BREAKING LIMITS

ON MOBILE

HTML5

!

!

!Tallinn, Nov 6, 2013

questions

yes, please !

QA at the end

agenda

Hacks for breaking limits - UI - device interaction - enhancing apps - tools

my goal

hacks, why?

1- UI hacks

UI

Full screen

full screen

full screen

3 solutions

full screen

Solution #1

full screen

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

full screen

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

full screen

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

if (navigator.standalone) { }

demo

full screen

Solution #2

future platforms

full screenvar body = document.documentElement; !

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

full screenvar body = document.documentElement; !

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

full screenvar body = document.documentElement; !

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

full screen

Solution #3

...

full screen

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

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

UI

Snapped mode Windows 8

snapped mode

snapped mode

snapped mode

Solution

snapped mode

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

snapped mode

UI

images for different screen densities

screen densities

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

screen densities

300 CSS pixels

300 1.00 390 1.30 450 1.50 600 2.00 672 2.24 900 3.00 !

!

device px px ratio

screen densities

300 CSS pixels

300 1.00 390 1.30 450 1.50 600 2.00 672 2.24 900 3.00 !

!

device px px ratio

screen densities

Firefox OS

Galaxy SIIiPhone 5BB Z10Nexus 5

Nexus 7

Solution #1

screen densitiesuse 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 }

screen densities

devicePixelRatio = window.screen.availWidth / document.documentElement.clientWidth

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

<div id="photoContainer">

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

screen densities

<div id="photoContainer">

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

}

screen densities

<div id="photoContainer">

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

!

!

!

!

}

screen densities

<div id="photoContainer">

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

!

!

!

}

screen densities

<div id="photoContainer">

@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)

find the balance300x300 900x900

UI

High resolution canvas

hi-res canvas

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

300px

hi-res canvas

300 CSS pixels

300 1.00 390 1.30 450 1.50 600 2.00 672 2.24 900 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

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

300px

devPxRatio = 2 canvasPxRatio = 1

hi res canvas

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

300px

devPxRatio >= 1 canvasPxRatio = undefined

Solution #1

hi res canvas

hi res canvas

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

<canvas width="600" height="400"> </canvas>

600px

Solution #2

hi res canvas

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

300px

hi res canvas

<canvas width="600" height="400"> </canvas>

300px

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

hi res canvas

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

300px

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

multi-platform & multi-resolution

execution & memory

UI

truly numeric field

numeric

<input type="number">

numeric

<input type="number">

numeric

<input type="number">

Solution

numeric

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

numeric

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

UI

where is my date picker?

date

<input type="date">

date

<input type="datetime">

date

<input type="datetime">

Solution

date

<input type="datetime-local">

UI

rich editor

rich editor

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

rich editor

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

rich editor

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

UI

zombie tab

background

background

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

<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

on iOS 6 on iOS 7

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>

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

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

(old spec)

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 api no android

3- enhancing your app hacks

push notification

enhance your app

push

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

push

push

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

Changing tint iOS 7

tint

body { background-color: red; }

body { background-color: yellow; }

tint

tintbody { background-color: blue; /* for the tint */ background-image: linear-gradient(to bottom, green 0%, green 100%); /* for the body */ }

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

It’s even better on IE11

live tile

<meta name="msapplication-notification" content=“frequency=30;polling-uri=“> !

!

live tile

document.addEventListener('mssitepinned', startPeriodicUpdateBatch, false); !

!

live tile

document.addEventListener('mssitepinned', startPeriodicUpdateBatch, false); !

!

buildmypinnedsite.com

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

slowyapp.com

charlesproxy.com

Tools

Remote debuggers

time for demo?

Tools

Virtual Mobile Labs

developer.nokia.com

developer.samsung.com

keynotedeviceanywhere.com

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

“change is the only constant“Heraclitus

“in the mobile world, change is the only constant“

you can reach a good experience

Pictures)from)freedigitalphotos.net)

thank you!

firtman@gmail.com @firt

firt.mobi/pmw Tomorrow

Google Glass talk#TopConf