Mobile Web App Technology Roundup

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