Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Web App Technology Roundup

Brendan Nee
September 22, 2017

Mobile Web App Technology Roundup

Brendan Nee

September 22, 2017
Tweet

More Decks by Brendan Nee

Other Decks in Technology

Transcript

  1. MOBILE WEB APP TECHNOLOGY BRENDAN NEE

  2. BRENDAN NEE @BRENDANNEE

  3. DO YOU REALLY NEED A NATIVE APP?

  4. MISCONCEPTIONS ABOUT WEB APPS ▸ Not as smooth ▸ No

    full screen mode ▸ Won’t work offline ▸ No access to hardware
  5. VS

  6. VS + +

  7. WEB APPS VS NATIVE APPS ▸ Less work to build

    and update ▸ Always fresh ▸ Universal access ▸ Search Engine Friendly ▸ Linkability VS
  8. CAMERA, PHOTOS AND VIDEOS GEOLOCATION DEVICE ORIENTATION DEVICE MOTION OFFLINE

    AUGMENTED REALITY
  9. 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
  10. 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>
  11. 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>
  12. 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 }
  13. 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
  14. 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
  15. 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>
  16. 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
  17. 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
  18. AUGMENTED REALITY IMAGE MARKER AR.JS APP Map Door

  19. 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
  20. AUGMENTED REALITY Android 5.0 or iOS 11 https://github.com/jeromeetienne/AR.js/

  21. 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>
  22. 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
  23. 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
  24. 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
  25. THE FUTURE WEB BLUETOOTH AMBIENT LIGHT SENSOR NFC AUGMENTED REALITY

    SUPPORT PROXIMITY SENSOR
  26. CAMERA, PHOTOS AND VIDEOS GEOLOCATION DEVICE ORIENTATION DEVICE MOTION OFFLINE

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

    Use https://caniuse.com ▸ AR.js https://github.com/jeromeetienne/AR.js
  28. MOBILE WEB APP TECHNOLOGY BRENDAN NEE @BRENDANNEE