GEOLOCATION
navigator.geolocation.watchPosition(function(position) {
addToMap(position);
});
Total Distance
Total Elevation Gain
Highest Elevation
Max Speed
1.4 km
256 m
357 m
67 kmph
Slide 14
Slide 14 text
GEOLOCATION
var id = navigator.geolocation.watchPosition(function(position) {
document.write(position.coords.heading);
});
navigator.geolocation.clearWatch(id)
var id = navigator.geolocation.watchPosition(success, error, {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
});
Stop Watching
Get High Accuracy, Control Cache
Slide 15
Slide 15 text
DEVICE ORIENTATION
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
});
Slide 16
Slide 16 text
DEVICE ORIENTATION
window.addEventListener('deviceorientationabsolute', function(orientation) {
console.log(orientation.alpha);
// orientation is guaranteed to be absolute relative to the earth
});
Chrome/Android Only
window.addEventListener('deviceorientation', function(orientation) {
console.log(orientation.webkitCompassHeading);
// orientation is guaranteed to be absolute relative to the earth
});
Safari/iOS Only
Slide 17
Slide 17 text
DEVICE MOTION
window.addEventListener('devicemotion', function(event) {
var x = event.accelerationIncludingGravity.x;
var y = event.accelerationIncludingGravity.y;
var z = event.accelerationIncludingGravity.z;
});
Detect Shake
Slide 18
Slide 18 text
AUGMENTED REALITY
IMAGE MARKER
AR.JS APP
Map Door
Slide 19
Slide 19 text
AUGMENTED REALITY
ar.js
Slide 20
Slide 20 text
AUGMENTED REALITY
Android 5.0 or iOS 11
https://github.com/jeromeetienne/AR.js/
Slide 21
Slide 21 text
VIBRATION
Android only
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.
Slide 22
Slide 22 text
OFFLINE SUPPORT: SERVICE WORKERS
navigator.serviceWorker.register('service-worker.js', {scope: ‘.'})
.then(function(registration) {
console.log('The service worker has been registered ', registration);
});
Register serviceWorker
app.js
Slide 23
Slide 23 text
OFFLINE SUPPORT: SERVICE WORKERS
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
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
THE FUTURE
WEB BLUETOOTH
AMBIENT LIGHT SENSOR
NFC
AUGMENTED REALITY SUPPORT
PROXIMITY SENSOR
MORE RESOURCES
▸ Mozilla Developer Network https://developer.mozilla.org
▸ Can I Use https://caniuse.com
▸ AR.js https://github.com/jeromeetienne/AR.js