Mobile Web App Technology Roundup

MOBILE WEB APP TECHNOLOGY BRENDAN NEE

BRENDAN NEE @BRENDANNEE

DO YOU REALLY NEED A NATIVE APP?

MISCONCEPTIONS ABOUT WEB APPS ▸ Not as smooth ▸ No
full screen mode ▸ Won’t work ofﬂine ▸ No access to hardware

VS + +

WEB APPS VS NATIVE APPS ▸ Less work to build
and update ▸ Always fresh ▸ Universal access ▸ Search Engine Friendly ▸ Linkability VS

CAMERA, PHOTOS AND VIDEOS GEOLOCATION DEVICE ORIENTATION DEVICE MOTION OFFLINE
AUGMENTED REALITY

CAMERA, PHOTOS AND VIDEOS <input type="file" accept="image/*" capture="camera"> <input type="file"
accept="video/*" capture="camcorder"> <input type="file" accept="audio/*" capture="microphone"> IMAGE VIDEO AUDIO

CAMERA, PHOTOS AND VIDEOS <form action="/path/to/form/handler" method="post" enctype="multipart/form-data"> <input type="file"
name="image" accept="image/*" capture="camera"> <input type="submit" value="Upload"> </form>

CAMERA, PHOTOS AND VIDEOS <video id="video" width="500" height="500" autoplay />
<script> var constraints = { audio: true, video: { facingMode: 'user' } } navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) { video.srcObject = stream; }); document.body.appendChild(document.getElementById('video')); </script>

GEOLOCATION <script> navigator.geolocation.getCurrentPosition(function(position) { console.log(position); }); </script> { "coords": {
"accuracy": 23, "altitude": 321, "altitudeAccuracy": 196, "heading": 276.456345, "latitude": 37.766587, "longitude": -122.4169758, "speed": 11.76 }, "timestamp": 1505791649385 }

GEOLOCATION <script> navigator.geolocation.watchPosition(function(position) { addToMap(position); }); </script> Total Distance Total
Elevation Gain Highest Elevation Max Speed 1.4 km 256 m 357 m 67 kmph

GEOLOCATION <script> var id = navigator.geolocation.watchPosition(function(position) { document.write(position.coords.heading); }); navigator.geolocation.clearWatch(id)
</script> <script> var id = navigator.geolocation.watchPosition(success, error, { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }); </script> Stop Watching Get High Accuracy, Control Cache

DEVICE ORIENTATION <script> window.addEventListener('deviceorientation', function(orientation) { console.log(orientation.gamma); // gamma is
the left-to-right tilt in degrees, where right is positive console.log(orientation.beta); // beta is the front-to-back tilt in degrees, where front is positive console.log(orientation.alpha); // alpha is the compass direction the device is facing in degrees }); </script>

DEVICE ORIENTATION <script> window.addEventListener('deviceorientationabsolute', function(orientation) { console.log(orientation.alpha); // orientation is
guaranteed to be absolute relative to the earth }); </script> Chrome/Android Only <script> window.addEventListener('deviceorientation', function(orientation) { console.log(orientation.webkitCompassHeading); // orientation is guaranteed to be absolute relative to the earth }); </script> Safari/iOS Only

DEVICE MOTION <script> window.addEventListener('devicemotion', function(event) { var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y; var z = event.accelerationIncludingGravity.z; }); </script> Detect Shake

AUGMENTED REALITY IMAGE MARKER AR.JS APP Map Door

AUGMENTED REALITY <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script> <body style='margin : 0px;
overflow: hidden;'> <a-scene embedded artoolkit='sourceType: webcam;'> <a-box position='0 0 0.5' material='opacity: 0.5;'></a-box> <a-marker-camera preset='hiro'></a-marker-camera> </a-scene> </body> ar.js

AUGMENTED REALITY Android 5.0 or iOS 11 https://github.com/jeromeetienne/AR.js/

VIBRATION Android only <script> window.navigator.vibrate(200); // vibrate for 200ms window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]);
// Vibrate 'SOS' in Morse. </script>

OFFLINE SUPPORT: SERVICE WORKERS <script> navigator.serviceWorker.register('service-worker.js', {scope: ‘.'}) .then(function(registration) {
console.log('The service worker has been registered ', registration); }); </script> Register serviceWorker app.js

OFFLINE SUPPORT: SERVICE WORKERS <script> var REQUIRED_FILES = [ 'random-1.png',
'random-2.png', 'random-3.png', 'style.css', 'index.html', 'index.js', 'app.js' ]; self.addEventListener('install', function(event) { event.waitUntil( caches.open('dependencies-cache') .then(function(cache) { // Caches opened, adding all core components to cache return cache.addAll(REQUIRED_FILES); }) .then(function() { // All required resources have been cached. return self.skipWaiting(); }) ); }); Monitor cached status of resources service-worker.js

OFFLINE SUPPORT: SERVICE WORKERS self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response)
{ if (response) { // Returning from ServiceWorker cache return response; } // Returning from server return fetch(event.request); } ) ); }); self.addEventListener('activate', function(event) { // Claiming this ServiceWorker! event.waitUntil(self.clients.claim()); }); </script> Respond with cached resources service-worker.js

THE FUTURE WEB BLUETOOTH AMBIENT LIGHT SENSOR NFC AUGMENTED REALITY
SUPPORT PROXIMITY SENSOR

CAMERA, PHOTOS AND VIDEOS GEOLOCATION DEVICE ORIENTATION DEVICE MOTION OFFLINE
AUGMENTED REALITY

MORE RESOURCES ▸ Mozilla Developer Network https://developer.mozilla.org ▸ Can I
Use https://caniuse.com ▸ AR.js https://github.com/jeromeetienne/AR.js

MOBILE WEB APP TECHNOLOGY BRENDAN NEE @BRENDANNEE

Mobile Web App Technology Roundup

Mobile Web App Technology Roundup

Brendan Nee

More Decks by Brendan Nee

Other Decks in Technology

Featured

Transcript

MOBILE WEB APP TECHNOLOGY BRENDAN NEE

BRENDAN NEE @BRENDANNEE

DO YOU REALLY NEED A NATIVE APP?

MISCONCEPTIONS ABOUT WEB APPS ▸ Not as smooth ▸ No

VS

VS + +

WEB APPS VS NATIVE APPS ▸ Less work to build

CAMERA, PHOTOS AND VIDEOS GEOLOCATION DEVICE ORIENTATION DEVICE MOTION OFFLINE

CAMERA, PHOTOS AND VIDEOS <input type="file" accept="image/*" capture="camera"> <input type="file"

CAMERA, PHOTOS AND VIDEOS <form action="/path/to/form/handler" method="post" enctype="multipart/form-data"> <input type="file"

CAMERA, PHOTOS AND VIDEOS <video id="video" width="500" height="500" autoplay />

GEOLOCATION <script> navigator.geolocation.getCurrentPosition(function(position) { console.log(position); }); </script> { "coords": {

GEOLOCATION <script> navigator.geolocation.watchPosition(function(position) { addToMap(position); }); </script> Total Distance Total

GEOLOCATION <script> var id = navigator.geolocation.watchPosition(function(position) { document.write(position.coords.heading); }); navigator.geolocation.clearWatch(id)

DEVICE ORIENTATION <script> window.addEventListener('deviceorientation', function(orientation) { console.log(orientation.gamma); // gamma is

DEVICE ORIENTATION <script> window.addEventListener('deviceorientationabsolute', function(orientation) { console.log(orientation.alpha); // orientation is

DEVICE MOTION <script> window.addEventListener('devicemotion', function(event) { var x = event.accelerationIncludingGravity.x;

AUGMENTED REALITY IMAGE MARKER AR.JS APP Map Door

AUGMENTED REALITY <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script> <body style='margin : 0px;

AUGMENTED REALITY Android 5.0 or iOS 11 https://github.com/jeromeetienne/AR.js/

VIBRATION Android only <script> window.navigator.vibrate(200); // vibrate for 200ms window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]);

OFFLINE SUPPORT: SERVICE WORKERS <script> navigator.serviceWorker.register('service-worker.js', {scope: ‘.'}) .then(function(registration) {

OFFLINE SUPPORT: SERVICE WORKERS <script> var REQUIRED_FILES = [ 'random-1.png',

OFFLINE SUPPORT: SERVICE WORKERS self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response)

THE FUTURE WEB BLUETOOTH AMBIENT LIGHT SENSOR NFC AUGMENTED REALITY

CAMERA, PHOTOS AND VIDEOS GEOLOCATION DEVICE ORIENTATION DEVICE MOTION OFFLINE

MORE RESOURCES ▸ Mozilla Developer Network https://developer.mozilla.org ▸ Can I

MOBILE WEB APP TECHNOLOGY BRENDAN NEE @BRENDANNEE