FINHTML5 - Breaking the mobile web

Max Firtman @firt !

!

BREAKING LIMITS

ON MOBILE

HTML5

!

!

!

!Helsinki, Oct 31, 2013

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

questions

yes, please !

QA at the end

agenda

Mobile HTML5 Hacks for breaking limits Next step: Google Glass

mobile development

mobile

1- websites 2- apps

with html5 we can create...

we can create

1- websites

Using the browser

URL

Web Server

1- websiteswe can create

we can create

2- webapps

Browser to install

Full-screen

Icon on home screen

Web Server

2- webappswe can create

full screen webapps

home screen webapps

webapps are also known as(

)

we can create

3- native webapps

Package, compile, sign

Icon on home screen

App Store

No web server

3- native webappswe can create

hybrid apps

packaged webapps

native webapps are also known as

(

)

mobile

1- websites 2- apps

a- native b- webapps c- native webapps

mobile

1- websites 2- apps

web platforms

How many browsers do you know on desktop?

web platforms

5web platforms

How many browsers do you know on mobile?

web platforms

...web platforms

Android Browser

Android Browser 2.2

Android Browser 2.3

Android Browser 4.x

Did I mention it is NOT Google Chrome?

(

)

Google Chrome

Google Chrome Android

Google Chrome iOS

Safari on iOS

Opera Mobile

Opera Mini

Opera for Android

Firefox

Firefox OS

Internet Explorer

BlackBerry Browser 5-7.x

BlackBerry Browser PB

BlackBerry Browser BB10

Nokia Browser

Nokia Browser Symbian

Nokia Browser MeeGo

Nokia Browser Series 40

UC Web

Dolfin

should I continue?

(

)

Proxy browsers

web platforms

And it’s not just browsers!

web platforms

Web View

web platforms

Official (native) webapp platforms

web platforms

unknown future

2013: glasses

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


if (navigator.standalone) { }

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

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 #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

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

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


300px

hi res canvas

var devPxRatio = window.devicePixelRatio; !

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

hi res canvas


300px

devPxRatio = 2 canvasPxRatio = 1

hi res canvas


300px

devPxRatio >= 1 canvasPxRatio = 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

<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">

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>

UI

background tab resurrection

background

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

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

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

Solution #1

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

<svg></svg>

@font-face {}

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)

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

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

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

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

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

push

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

3- enhancing your app hacks

enhance your app

iOS home screen title

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: 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

<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

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.com


developer.samsung.com


keynotedeviceanywhere.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

“change is the only constant“Heraclitus

1- glass experience

quick video( )

Notifications on your head

Your content is not so important

specs

nHD transparent 640x360 25" - 2.5m / 8 ft away

specs

Sensors

specs

Camera

specs

Multi-touch panel

specs

wifi bluetooth

specs

Android 4.0

specs

bone conduction transducer

quick demo( )

native GDK vs

cloud Mirror API

httpscontent

httpscontent

actions

https

http(s)

content

actions

glassware

timeline

past, now, future

quick demo( )

timeline

timeline items = card

timeline

card

code!

built-in menu items share navigate to read aloud delete

voice call reply toggle pin view website

timeline

contextual eventsgeolocation !

browser

invocationgoogle search card's action

quick demo( )

browser

interactionscroll point and click

browser

responsive web designmobile user agent width: 427px pixel ratio: 1.5

browser

html5video, audio devicemotion scroll and touch events no geo, speech, camera yet

timeline

contextual eventsgeolocation share

timeline

contextual eventsgeolocation share launch "ok glass" menu

glass

- understand the experience - mirror api vs gdk vs browser - Glassware cloud-based - it's just the beginning

you can reach a good experience

Pictures)from)freedigitalphotos.net)

thank you!

[email protected] @firt

firt.mobi/pmw Next Tuesday @ Tallin

Mobile HTML5 Workshop

topconf.com

mailto:[email protected]

http://topconf.com

FINHTML5 - Breaking the mobile web

Technology

Transcript of FINHTML5 - Breaking the mobile web