breaking limits on mobile html5 - 15 hacks you might not know
Post on 17-Oct-2014
12.053 views
DESCRIPTION
Slides from the talk "Breaking Limits on Mobile HTML5' during Mobilism 2013, May 16th 2013TRANSCRIPT
Max Firtman @firt
BREAKING LIMITS
ON MOBILE
HTML5
Amsterdam, May 16th, 2013
Thursday, May 16, 13
mobile+web developer
maximiliano @firt
Thursday, May 16, 13
Thursday, May 16, 13
Thursday, May 16, 13
hacks, why?
Thursday, May 16, 13
Thursday, May 16, 13
Thursday, May 16, 13
Thursday, May 16, 13
Thursday, May 16, 13
Thursday, May 16, 13
1- UI hacks
Thursday, May 16, 13
UI
Full screen
Thursday, May 16, 13
full screen
Thursday, May 16, 13
full screen
4 solutionsThursday, May 16, 13
full screen
Solution #1
Thursday, May 16, 13
full screen
<meta name="apple-mobile-web-app-capable" content="yes">
Thursday, May 16, 13
full screen
<meta name="apple-mobile-web-app-capable" content="yes">
if (navigator.standalone) { }
Thursday, May 16, 13
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width">
Thursday, May 16, 13
Thursday, May 16, 13
Thursday, May 16, 13
full screen
<meta name="apple-mobile-web-app-capable" content="yes"><meta name="viewport" content="width=320.1">
Thursday, May 16, 13
full screen
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width"><meta name="viewport" content="..." media="device-height: 568px">
Thursday, May 16, 13
full screen
Thursday, May 16, 13
full screen
Solution #2
Thursday, May 16, 13
full screen
Thursday, May 16, 13
full screen
@media (orientation: landscape) and (height: 214px), (orientation: landscape) and (height: 181px) {}
Thursday, May 16, 13
full screen
Solution #3
future platforms
Thursday, May 16, 13
full screenvar body = document.documentElement;
if (body.requestFullScreen) { body.requestFullScreen();}
Thursday, May 16, 13
full screenvar body = document.documentElement;
if (body.requestFullScreen) { body.requestFullScreen();} else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen();}
Thursday, May 16, 13
full screenvar body = document.documentElement;
if (body.requestFullScreen) { body.requestFullScreen();} else if (body.webkitRequestFullScreen) { body.webkitRequestFullScreen();} else if (body.mozRequestFullScreen) { body.mozRequestFullScreen();}
Thursday, May 16, 13
full screen
Solution #4
...
Thursday, May 16, 13
full screen
window.addEventListener("load", function() { window.scrollTo(0, 0); });
// use with caredocument.addEventListener("touchmove", function(e) { e.preventDefault() });
Thursday, May 16, 13
UI
Snapped mode Windows 8
Thursday, May 16, 13
snapped mode
Thursday, May 16, 13
snapped mode
@media only screen and (max-width: 400px) { @-ms-viewport { width: 320px; }}
Thursday, May 16, 13
UI
High resolutioncanvas
Thursday, May 16, 13
hi-res canvas
<canvas width="300" height="200"></canvas>
300px
Thursday, May 16, 13
hi-res canvas
300 CSS pixels
300 1.00390 1.30450 1.50600 2.00672 2.24900 3.00
device px px ratio
Thursday, May 16, 13
hi res canvas
<canvas width="300" height="200"> </canvas>
300px
Thursday, May 16, 13
hi res canvas
var devPxRatio = window.devicePixelRatio;
var canvasPxRatio = document.querySelector("canvas") .getContext("2d") .webkitBackingStorePixelRatio;
Thursday, May 16, 13
hi res canvas
<canvas width="300" height="200"> </canvas>
300px
devPxRatio = 2canvasPxRatio = 1
Thursday, May 16, 13
hi res canvas
<canvas width="300" height="200"> </canvas>
300px
devPxRatio >= 1canvasPxRatio = undefined
Thursday, May 16, 13
Solution #1
hi res canvas
Thursday, May 16, 13
hi res canvas
<meta name="viewport" content="width=640">
<canvas width="600" height="400"></canvas>
600px
Thursday, May 16, 13
Solution #2
hi res canvas
Thursday, May 16, 13
hi res canvas
<script>document.querySelector("canvas") .getContext("2d") .setScale(2, 2);</script>
300px
Thursday, May 16, 13
hi res canvas
<canvas width="600" height="400"></canvas>
300px
<script>document.querySelector("canvas") .getContext("2d") .setScale(2, 2);</script>
Thursday, May 16, 13
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>
Thursday, May 16, 13
multi-platform &multi-resolution
Thursday, May 16, 13
execution &memory
Thursday, May 16, 13
UI
truly numeric !eld
Thursday, May 16, 13
numeric
<input type="number">
Thursday, May 16, 13
numeric
<input type="number">
Thursday, May 16, 13
numeric
<input type="number">
Thursday, May 16, 13
Solution
Thursday, May 16, 13
numeric
<input type="number" pattern="[0-9]*">
Thursday, May 16, 13
numeric
<input type="password" pattern="[0-9]*">
Thursday, May 16, 13
UI
rich editor
Thursday, May 16, 13
rich editor
<ul contenteditable> <li>First item</ul>
Thursday, May 16, 13
rich editor
<ul contenteditable> <li>First item</ul>
Thursday, May 16, 13
rich editor
<ul contenteditable> <li>First item</ul>
Thursday, May 16, 13
UI
background tabresurrection
Thursday, May 16, 13
background
Thursday, May 16, 13
background
Thursday, May 16, 13
Thursday, May 16, 13
<blink>Welcome to my website!</blink>
Thursday, May 16, 13
<bgsound src="welcome.wav">
Thursday, May 16, 13
<font family="Arial" size="20">
Thursday, May 16, 13
background
<meta http-equiv="refresh" content="60">
Thursday, May 16, 13
background<meta http-equiv="refresh" content="2">
Thursday, May 16, 13
background<meta http-equiv="refresh" content="2">
<script>var mr = document.querySelector("meta");setInterval(function() { mr.content=mr.content; }, 1000); </script>
Thursday, May 16, 13
Thursday, May 16, 13
background
Thursday, May 16, 13
DISCLAIMER
Thursday, May 16, 13
only from iOS 6.1(5.0+ similar)
Thursday, May 16, 13
UI
images for different screen densities
Thursday, May 16, 13
screen densities
<img src="photo.png" width="300">
Thursday, May 16, 13
screen densities
Thursday, May 16, 13
300 CSS pixels
300 1.00390 1.30450 1.50600 2.00672 2.24900 3.00
device px px ratio
screen densities
Thursday, May 16, 13
Solution #1
Thursday, May 16, 13
screen densities
use vector images <img src="photo.svg" width="300">
<svg></svg>
@font-face {}
Thursday, May 16, 13
screen densities
Thursday, May 16, 13
screen densities
Thursday, May 16, 13
Solution #2
Thursday, May 16, 13
screen densities
<img src="photo.png" width="300">
if (window.devicePixelRatio > 1.5) { // change URL}
Thursday, May 16, 13
Solution #3
Thursday, May 16, 13
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;}
Thursday, May 16, 13
Solution #4
Thursday, May 16, 13
screen densities
<div id="photoContainer">
#photoContainer { background-image: url('photo-lo.png'); width: 300px; height: 200px;}
Thursday, May 16, 13
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;}
}
Thursday, May 16, 13
screen densities
<div id="photoContainer">
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5) {
}
Thursday, May 16, 13
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) {
}
Thursday, May 16, 13
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) {
}
Thursday, May 16, 13
always query on ranges
@media (-webkit-device-pixel-ratio: 2)
Thursday, May 16, 13
always query on ranges
@media (-webkit-min-device-pixel-ratio: 1.7)
Thursday, May 16, 13
!nd the balance300x300 900x900
Thursday, May 16, 13
2- device interaction hacks
Thursday, May 16, 13
device
media capture
Thursday, May 16, 13
media capture
<input type="file">
Thursday, May 16, 13
Solution
Thursday, May 16, 13
media capture
<input type="file" accept="image/*">
<input type="file" accept="video/*">
<input type="file" accept="audio/*">
Thursday, May 16, 13
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
Thursday, May 16, 13
device
interacting with native apps
Thursday, May 16, 13
native integration
Thursday, May 16, 13
Thursday, May 16, 13
Solution, part I
Thursday, May 16, 13
DON'T DO THAT
Thursday, May 16, 13
Solution, part II
Thursday, May 16, 13
native integration
<meta name="apple-itunes-app" content="app-id=999">
Thursday, May 16, 13
native integration
Thursday, May 16, 13
native integration
<meta name="apple-itunes-app" content="app-id=999">
<meta name="app-argument" content="">
Thursday, May 16, 13
native integration
<meta name="msApplication-ID" content="App"><meta name="msApplication-PackageFamilyName" content="myPackage">
Thursday, May 16, 13
native integration
Thursday, May 16, 13
native integration
Thursday, May 16, 13
native integration
Thursday, May 16, 13
native integration
<meta name="msApplication-ID" content="App"><meta name="msApplication-PackageFamilyName" content="myPackage">
<meta name="msApplication-Arguments" content="">
Thursday, May 16, 13
no apino android
Thursday, May 16, 13
Solution, part III
Thursday, May 16, 13
native integration
<a href="customprotocol://">Open app</a>
Thursday, May 16, 13
native integration
<a href="twitter://post?message=HTML5">Tweet this</a>
Thursday, May 16, 13
native integration
Thursday, May 16, 13
native integration
function tweet() { location.href="twitter://post?message=HTML5"; setTimeout(function() {
location.href="postCall.html"; }, 1000);}
Thursday, May 16, 13
native integration
Thursday, May 16, 13
native integrationfunction tweet() { iframe.location.href= "twitter://post?message=HTML5"; setTimeout(function() {
appNotInstalled(); }, 1000);}
Thursday, May 16, 13
device
push noti!cation
Thursday, May 16, 13
push
<a href="suscription.passbook"> Subscribe to this site</a>
Thursday, May 16, 13
push
Thursday, May 16, 13
push
Thursday, May 16, 13
3- enhancing your app hacks
Thursday, May 16, 13
enhance your app
iOS home screen title
Thursday, May 16, 13
home screen
Thursday, May 16, 13
home screen
Thursday, May 16, 13
home screen
<title>My long title for SEO</title><meta name="apple-web-app-title" content="My App">
UNDOCUMENTED
Thursday, May 16, 13
enhance your app
IE10 Live Tile
Thursday, May 16, 13
live tile
Thursday, May 16, 13
live tile
Thursday, May 16, 13
live tile
<meta name="msapplication-TileImage" content="tile.png">
<meta name="msapplication-TileColor" content="#ef0303">
Thursday, May 16, 13
enhance your app
You've said live tile!!!
Thursday, May 16, 13
live tile
<meta name="msapplication-badge" content="frequency=60;polling-uri=XXX">
Thursday, May 16, 13
live tile<meta name="msapplication-badge" content="frequency=60;polling-uri=XXX">
<?xml version="1.0" ?><badge value="3" />
Thursday, May 16, 13
live tile<meta name="msapplication-badge" content="frequency=60;polling-uri=XXX">
<?xml version="1.0" ?><badge value="newMessage" />
Thursday, May 16, 13
enhance your app
Storage limits
Thursday, May 16, 13
storage
AppCache, localStorage, WebSQL, IDB
Thursday, May 16, 13
storage
Different domains, iframes and Cross Document Messaging API
Thursday, May 16, 13
storage
Thursday, May 16, 13
this might not work in the future
Thursday, May 16, 13
do you really need more space?
Thursday, May 16, 13
4- tools
Thursday, May 16, 13
Tools
Bandwidth simulators
Thursday, May 16, 13
Tools
Virtual Mobile Labs
Thursday, May 16, 13
keynotedeviceanywhere.com
Thursday, May 16, 13
most used key combinations?
Thursday, May 16, 13
Thursday, May 16, 13
Thursday, May 16, 13
Tools
Live Reload
Thursday, May 16, 13
wrapping up
Thursday, May 16, 13
we need hacks because
• browsers are different• no enough information• undocumented features• buggy
Thursday, May 16, 13
however
• usability and Performance matters• be careful• your app should work anyway • use feature detection
Thursday, May 16, 13
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
Thursday, May 16, 13
Thursday, May 16, 13
“change is the only constant“Heraclitus
Thursday, May 16, 13
you can reach a good experience
Pictures)from)freedigitalphotos.net)
thank you!
[email protected] @!rt
!rt.mobi/pmw
Thursday, May 16, 13