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

    View full-size slide

  2. BRENDAN NEE
    @BRENDANNEE

    View full-size slide

  3. DO YOU REALLY
    NEED A NATIVE APP?

    View full-size slide

  4. MISCONCEPTIONS ABOUT WEB APPS
    ▸ Not as smooth
    ▸ No full screen mode
    ▸ Won’t work offline
    ▸ No access to hardware

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. CAMERA, PHOTOS AND VIDEOS



    IMAGE VIDEO AUDIO

    View full-size slide

  8. CAMERA, PHOTOS AND VIDEOS




    View full-size slide

  9. CAMERA, PHOTOS AND VIDEOS

    <br/>var constraints = {<br/>audio: true,<br/>video: {<br/>facingMode: 'user'<br/>}<br/>}<br/>navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {<br/>video.srcObject = stream;<br/>});<br/>document.body.appendChild(document.getElementById('video'));<br/>

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. AUGMENTED REALITY
    IMAGE MARKER
    AR.JS APP
    Map Door

    View full-size slide

  17. AUGMENTED REALITY








    ar.js

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. 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());
    });

    Respond with cached resources
    service-worker.js

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. MOBILE WEB APP TECHNOLOGY
    BRENDAN NEE
    @BRENDANNEE

    View full-size slide