Breaking Limits on Mobile HTML5 - TopConf Tallinn
-
Upload
maximiliano-firtman -
Category
Technology
-
view
1.888 -
download
0
description
Transcript of 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!
[email protected] @firt
firt.mobi/pmw Tomorrow
Google Glass talk#TopConf