tips you should know before distributing your html5 web app on mobile (mbl301) | aws re:invent 2013

© 2013 Amazon.com, Inc. and its affiliates. All rights reserved. May not be copied, modified, or distributed in whole or in part without the express consent of Amazon.com, Inc.

Russell Beattie, Amazon

November 15, 2013

Coding Tips You Should Know Before Distributing Your HTML5 Web App on Mobile Devices

Friday, November 15, 13

Agenda• Welcome• HTML5 Mobile Web App Basics

• Setup• DevTools Demo

• Coding Tips and Best Practices• HTML• CSS• Javascript• Offline


HTML5 Mobile Web App Basics


Setup• Text Editor• Modern Desktop Browser

• Chrome, Firefox, Safari, IE 11, etc.

• Modern Mobile Browser or Tester• Amazon Web App Tester, Chrome, etc.

• Android SDK• For remote debugging


<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Basic Template</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <style> html, body {height: 100%; margin: 0; padding: 0; background: #000; color: #FFF} </style> <link rel="stylesheet" href="main.css"> </head> <body> <div id="content"></div> <script src="main.js"></script> </body></html>

Basic HTML5 Web App Template<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Basic Template</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <style> html, body {height: 100%; margin: 0; padding: 0; background: #000; color: #FFF} </style> <link rel="stylesheet" href="main.css"> </head> <body> <div id="content"></div> <script src="main.js"></script> </body></html>


<!DOCTYPE html>



<!DOCTYPE html><html>



<!DOCTYPE html><html> <head>



<!DOCTYPE html><html> <head> <meta charset="UTF-8">



<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Basic Template</title>



<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Basic Template</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">



<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Basic Template</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <style> html, body {height: 100%; margin: 0; padding: 0; background: #000; color: #FFF} </style>



<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Basic Template</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <style> html, body {height: 100%; margin: 0; padding: 0; background: #000; color: #FFF} </style> <link rel="stylesheet" href="main.css">



<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Basic Template</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <style> html, body {height: 100%; margin: 0; padding: 0; background: #000; color: #FFF} </style> <link rel="stylesheet" href="main.css"> </head> <body>



<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Basic Template</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <style> html, body {height: 100%; margin: 0; padding: 0; background: #000; color: #FFF} </style> <link rel="stylesheet" href="main.css"> </head> <body> <div id="content"></div>



<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Basic Template</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <style> html, body {height: 100%; margin: 0; padding: 0; background: #000; color: #FFF} </style> <link rel="stylesheet" href="main.css"> </head> <body> <div id="content"></div> <script src="main.js"></script>



<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Basic Template</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> <style> html, body {height: 100%; margin: 0; padding: 0; background: #000; color: #FFF} </style> <link rel="stylesheet" href="main.css"> </head> <body> <div id="content"></div> <script src="main.js"></script> </body></html>



DevTools Demo• Connecting (via WebSockets or TCP/IP)• Live modification of page (CSS, HTML)• Interaction with device via inspection button• Debugging (JavaScript, Network, etc.)• Frame-rate / GPU• Profiling


Coding Tips and Best Practices


HTML


<meta name="mobile-web-app-capable" content="yes"><link rel="shortcut icon" sizes="196x196" href="nice-highres.png"><link rel="shortcut icon" sizes="128x128" href="niceicon.png">

<meta name="HandheldFriendly" content="true"><meta name="cursor-event-mode" value="native"><meta http-equiv="x-rim-auto-match" content="none">

<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="cleartype" content="on"><meta name="msapplication-TileImage" content="pics/logowin8pin.png"/><meta name="msapplication-TileColor" content="#B20099"/><meta name="msapplication-badge" value="frequency=1440;polling-uri=http://www.example.com/Win8TileNotification.php" />

Headers - Google, Blackberry, Microsoft

<form> Date: <input type="date" value="2013-09-03" name="dateInput"> Datetime: <input type="datetime" name="datetimeInput"> Datetime-local:

<input type="datetime-local" value="2013-09-03T20:00" name="datetime-local"> Email: <input type="email" name="emailInput"> Month: <input type="month" value="2013-09" name="monthInput"> Number: <input type="number" name="numberInput"> Password: <input type="password" name="passwordInput"> Range: <input type="range" name="rangeInput"> Search: <input type="search" name="searchInput"> Tel: <input type="tel" name="telInput"> Time: <input type="time" name="timeInput"> Url: <input type="url" name="urlInput"> </form>

Input Field Types


<input type="url" name="urlInput" required pattern="https?://.+">

...

input:required:invalid, input:focus:invalid { background-image: url(/images/invalid.png); background-position: right top; background-repeat: no-repeat;}

input:required:valid { background-image: url(/images/valid.png); background-position: right top; background-repeat: no-repeat;}

Required and Validation


CSS


html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none;}

body{ -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%;}

/* don't let "actions" dialog to come up when element is touch/held */.prevent-action { -webkit-touch-callout: none;}

Interaction


/* no dragging of element at all */.content p.no-drag { -webkit-user-drag: none;}

/* drags entire element, not the text/selection */.sidebar div.element-drag { -webkit-user-drag: element;}

/* change the character used to hide user passwords */input[type="password"] { -webkit-text-security: square;}

textarea[contenteditable] { -webkit-appearance: none;}

Interaction continued


/* position */

-webkit-transform: translate(0, 0);-webkit-transform: translateZ(0);-webkit-transform: translate3d(0, 0, 0);

/* scale */

-webkit-transform: scale(0);

/* rotation */

-webkit-transform: rotate(0);

/* opacity */

opacity: 0.5;

Hardware acceleration


@-webkit-keyframes pulse { from { -webkit-transform: scale(.1); } to { -webkit-transform: scale(1); }}

div { -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate;}

// Javascriptcontent.addEventListener("webkitAnimationIteration", countAnims, false);

Animations


// CSS

.box {left: 40px;-webkit-transition: all 0.3s ease-out;

}div.box.totheleft {

-webkit-transform: translate3d(0, 0, 0);}div.box.totheright {

-webkit-transform: translate3d(80px, 0, 0);}

// Javascript

window.addEventListener("webkitTransitionEnd", function() { // Handle the end of the transition}, false);

Transitions


@media screen and (orientation:portrait) { /* portrait-specific styles */}

@media screen and (orientation:landscape) { /* landscape-specific styles */}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { /* Style adjustments for viewports that meet the condition */}

Media Queries


JavaScript


var meta = document.createElement("meta");

meta.setAttribute('name','viewport');

var content = 'initial-scale='; content += 1 / window.devicePixelRatio; content += ',user-scalable=no';

meta.setAttribute('content', content); document.getElementsByTagName('head')[0].appendChild(meta);

Device Resolution


// no pre-rendering

function render() { drawSpaceShip(context); requestAnimationFrame(render);}

// pre-rendering

var sprite = document.createElement('canvas');sprite.width = 64;sprite.height = 64;var spriteCtx = sprite.getContext('2d');drawSpaceShip(spriteCtx);

function render() { context.drawImage(sprite, 0, 0); requestAnimationFrame(render);}

Canvas pre-rendering


// Slower

for (var i = 0; i < points.length - 1; i++) { var p1 = points[i]; var p2 = points[i+1]; context.beginPath(); context.moveTo(p1.x, p1.y); context.lineTo(p2.x, p2.y); context.stroke();}

// Faster

context.beginPath();for (var i = 0; i < points.length - 1; i++) { var p1 = points[i]; var p2 = points[i+1]; context.moveTo(p1.x, p1.y); context.lineTo(p2.x, p2.y);}context.stroke();

Canvas batch calls


// redraw entire canvascontext.fillRect(0, 0, canvas.width, canvas.height);

// redraw only 'dirty' areascontext.fillRect(last.x, last.y, last.width, last.height);

// faster way to redraw canvascontext.clearRect(0, 0, canvas.width, canvas.height)

Canvas Redraw Regions


function animate(time){

//random drawing context.clearRect(0, 0, canvas.width, canvas.height); context.beginPath(); context.rect(x, y, 50, 50); context.fillStyle = '#8ED6FF'; context.fill();

// Old way: // window.setTimeout(animate, 1000/60);

// New way: window.requestAnimationFrame(animate);

}

RequestAnimationFrame


var bstyle = document.body.style; // cache

bstyle.padding = "20px"; // reflow, repaintbstyle.border = "10px solid red"; // another reflow and a repaint

bstyle.color = "blue"; // repaint only, no dimensions changedbstyle.backgroundColor = "#fad"; // repaint

bstyle.fontSize = "2em"; // reflow, repaint

// new DOM element - reflow, repaintdocument.body.appendChild(document.createTextNode('hello...'));

Reflows and repaints


// Slower

var elem = document.getElementById('animated');elem.style.fontSize = (elem.offsetWidth / 10) + 'px';elem.firstChild.style.marginleft = (elem.offsetWidth / 20) + 'px';

// Faster

var elem = document.getElementById('animated'), elemWidth = elem.offsetWidth;elem.style.fontSize = (elemWidth / 10) + 'px';elem.firstChild.style.marginleft = (elemWidth / 20) + 'px';

Minimize dimension or location queries


Offline


AddType text/cache-manifest .manifestAddType text/cache-manifest .appcacheAddType application/x-web-app-manifest+json .webapp

Server MIME Types


CACHE MANIFEST# Version 1.0# filename: app.manifest or name.appcacheCACHE:index.htmlGame-Break.mp3Game-Death.mp3Game-Shot.mp3Game-Spawn.mp3main.jsmain.cssthree.min.js

...

<html manifest="app.manifest">

App cache manifest


{ "name": "Flip.io", "description": "Flip.io - 999 Word Puzzles. A simple, yet challenging word puzzle that will entertain novices and lexicographers alike. Presented with 10 word definitions and scrambled tiles of letter combos, can you find all the words?", "launch_path": "/", "icons": { "60": "/flip60.png", "128": "/flip128.png" }, "developer": { "name": "Russell Beattie", "url": "http://flip.io" }, "default_locale": "en", "fullscreen": "true"}

W3C Web App Manifest


http://flip.io

http://flip.io

{ "verification_key": "insert your verification key from the App File(s) tab", "launch_path": "index.html", "permissions": [ "iap", "geolocation", "auth" ], "type": "web", "version": "0.1a", "last_update": "2013-04-08 13:30:00-0800", "created_by": "webappdev"}

Amazon Mobile Web App Platform Manifest


Real World App Demo


Please give us your feedback on this presentation

As a thank you, we will select prize winners daily for completed surveys!

MBL301 Thank You

@RussB • [email protected]

developer.amazon.com/webapps


tips you should know before distributing your html5 web app on mobile (mbl301) | aws re:invent 2013

Technology