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

Transcription

1 Coding Tips You Should Know Before Distributing Your HTML5 Web App on Mobile Devices Russell Beattie, Amazon November 15, 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.

2 Agenda Welcome HTML5 Mobile Web App Basics Setup DevTools Demo Coding Tips and Best Practices HTML CSS Javascript Offline

3 HTML5 Mobile Web App Basics

4 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

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

19 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

20 Coding Tips and Best Practices

21 HTML

22 Headers - Apple <meta name="apple-touch-fullscreen" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="uvm Home"> <link rel="apple-touch-startup-image" href="/startup.png"> <link rel="apple-touch-icon" sizes="128x128" href="niceicon.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touchicon-144x144-precomposed.png"> <link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57- precomposed.png"> <link rel="shortcut icon" href="img/touch/apple-touch-icon.png">

23 Headers - Google, Blackberry, Microsoft  <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= />

24 Headers - Firefox, W3C, etc. <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> <link rel="shortcut icon" href="favicon.ico" /> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="address=no"/> <link rel="dns-prefetch" href="page2.html"> <meta name="description" content=""/> <meta name="keywords" content=""/>

25 Input Field Types <form> Date: <input type="date" value=" " name="dateinput"> Datetime: <input type="datetime" name="datetimeinput"> Datetime-local: <input type="datetime-local" value=" t20:00" name="datetime-local"> <input type=" " name=" input"> Month: <input type="month" value=" " 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>

26 Required and Validation <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;

27 CSS

28 Interaction 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;

29 Interaction continued /* 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;

30 Hardware acceleration /* 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;

31 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; // Javascript content.addeventlistener("webkitanimationiteration", countanims, false);

32 Transitions // 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);

33 Media screen and (orientation:portrait) { /* portrait-specific styles screen and (orientation:landscape) { /* landscape-specific styles only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (minresolution: 144dpi) { /* Style adjustments for viewports that meet the condition */

34 JavaScript

35 Orientation Detection var mql = window.matchmedia("(orientation: portrait)"); if(mql.matches) { // Portrait orientation else { // Landscape orientation mql.addlistener(function(m) { if(m.matches) { // Changed to portrait else { // Changed to landscape ); // Resizing window.addeventlistener("resize", function() { // window.innerheight > window.innerwidth..., false);

36 Device Resolution 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);

37 Canvas pre-rendering // 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);

38 Canvas batch calls // 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();

39 Canvas Redraw Regions // redraw entire canvas context.fillrect(0, 0, canvas.width, canvas.height); // redraw only 'dirty' areas context.fillrect(last.x, last.y, last.width, last.height); // faster way to redraw canvas context.clearrect(0, 0, canvas.width, canvas.height)

40 RequestAnimationFrame 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);

41 Reflows and repaints var bstyle = document.body.style; // cache bstyle.padding = "20px"; // reflow, repaint bstyle.border = "10px solid red"; // another reflow and a repaint bstyle.color = "blue"; // repaint only, no dimensions changed bstyle.backgroundcolor = "#fad"; // repaint bstyle.fontsize = "2em"; // reflow, repaint // new DOM element - reflow, repaint document.body.appendchild(document.createtextnode('hello...'));

42 Minimize dimension or location queries // 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';

43 Debounce Events function SomeObject() { var self = this; this.lastexecthrottle = 500; // limit to one call every "n" msec this.lastexec = new Date(); this.timer = null; this.resizehandler = function() { var d = new Date(); if (d-self.lastexec < self.lastexecthrottle) { if (self.timer) { window.cleartimeout(self.timer); self.timer = window.settimeout(self.resizehandler, self.lastexecthrottle); return false; // exit self.lastexec = d; // update "last exec" time self.callresizehandlerfunctions(); var someobject = new SomeObject(); window.onresize = someobject.resizehandler;

44 Offline

45 Server MIME Types AddType text/cache-manifest.manifest AddType text/cache-manifest.appcache AddType application/x-web-app-manifest+json.webapp

46 App cache manifest CACHE MANIFEST # Version 1.0 # filename: app.manifest or name.appcache CACHE: index.html Game-Break.mp3 Game-Death.mp3 Game-Shot.mp3 Game-Spawn.mp3 main.js main.css three.min.js... <html manifest="app.manifest">

47 W3C Web App Manifest { "name": "Flip.io", "description": "Flip.io 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": " "default_locale": "en", "fullscreen": "true"

48 Amazon Mobile Web App Platform Manifest { "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": " :30: ", "created_by": "webappdev"

49 Real World App Demo

50 Please give us your feedback on this presentation MBL301 As a thank you, we will select prize winners daily for completed surveys! Thank beattier@amazon.com developer.amazon.com/webapps