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 Slide

  2. BRENDAN NEE
    @BRENDANNEE

    View Slide

  3. DO YOU REALLY
    NEED A NATIVE APP?

    View Slide

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

    View Slide

  5. VS

    View Slide

  6. VS + +

    View Slide

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

    View Slide

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

    View Slide

  9. CAMERA, PHOTOS AND VIDEOS



    IMAGE VIDEO AUDIO

    View Slide

  10. CAMERA, PHOTOS AND VIDEOS




    View Slide

  11. 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 Slide

  12. 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 Slide

  13. 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 Slide

  14. 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 Slide

  15. 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 Slide

  16. 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 Slide

  17. 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 Slide

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

    View Slide

  19. AUGMENTED REALITY








    ar.js

    View Slide

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

    View Slide

  21. 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 Slide

  22. 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 Slide

  23. 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 Slide

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

    Respond with cached resources
    service-worker.js

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. MOBILE WEB APP TECHNOLOGY
    BRENDAN NEE
    @BRENDANNEE

    View Slide