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

Mobile Web App Technology Roundup

C698e3c3733ee56c41eb985eeaed91e8?s=47 Brendan Nee
September 22, 2017
Technology
0
13

Mobile Web App Technology Roundup

C698e3c3733ee56c41eb985eeaed91e8?s=128

Brendan Nee

September 22, 2017
Tweet

More Decks by Brendan Nee

See All by Brendan Nee
C698e3c3733ee56c41eb985eeaed91e8?s=48 brendannee
0
9
C698e3c3733ee56c41eb985eeaed91e8?s=48 brendannee
0
16
C698e3c3733ee56c41eb985eeaed91e8?s=48 brendannee
0
12
C698e3c3733ee56c41eb985eeaed91e8?s=48 brendannee
0
13
C698e3c3733ee56c41eb985eeaed91e8?s=48 brendannee
0
8
C698e3c3733ee56c41eb985eeaed91e8?s=48 brendannee
0
13
C698e3c3733ee56c41eb985eeaed91e8?s=48 brendannee
0
11
C698e3c3733ee56c41eb985eeaed91e8?s=48 brendannee
0
10

Other Decks in Technology

See All in Technology
4924e08c88a442edbffd87b91cb45131?s=48 zaki_lknr
0
320
4b45a7e80d4ae7da08069abcb499d696?s=48 kenz_
1
190
C4c161ae9eeeed8f161197410f7a228a?s=48 sizuhiko
0
280
4e7f712e4bba241f579d3dc0eaf130d4?s=48 mito201
2
110
20dd6ed6aa3cf68c2eabe56360512808?s=48 halsk
1
7.2k
Dce5df1d6cddfca0b3823ebaee7b6864?s=48 harunakanishi
0
210
A6005d14224831116d088d2240df1990?s=48 yoshitake_1201
0
130
A84b3c763c9c543069b7c02551e2720e?s=48 yuyamada
6
1.4k
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
PRO
1
390
10c17b2a6e7687c9b039c5c8f9958495?s=48 missasan
2
700
8bc2f1f5bfb8ed1f79492bfa7da6ddb1?s=48 hichikawa1126
0
160
4e7f712e4bba241f579d3dc0eaf130d4?s=48 mito201
0
350

Featured

See All Featured
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
194
8.8k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
72
3.8k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
33
2.3k
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
10
700
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
24k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
260
20k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
333
16k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
300
40k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
11k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
3.7k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
107
6.4k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
28
2.5k

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