web apis you (probably) didn't know existed
TRANSCRIPT
web apis you didn’t know
existed
probably
@zenorocha
2008
2008
2009
2009
2010
2010
2011
2011
2012
2012
2013
2013
2014
2014
canvassvg
geolocation
local storage
web sockets
audio
videodrag & drop
web rtc
pagevisibility
Provides an API to ask whether the current page is visible or not.
page visibility
window.addEventListener('visibilitychange', () => { if (document.hidden) { console.log('Tab is hidden'); } else { console.log('Tab is focused'); }});
page visibility
window.addEventListener('visibilitychange', () => { switch(document.visibilityState) { case 'prerender': console.log('Tab is pre-rendering'); break; case 'hidden': console.log('Tab is hidden'); break; case 'visible': console.log('Tab is focused'); break; }});
caniuse.com/#feat=pagevisibility
BROWSERsupport
whereto use it?
stateonline
Exposes a network connection availability information to the web.
online state
console.log(navigator.onLine ? 'online' : 'offline')
online state
window.addEventListener('offline', networkStatus);window.addEventListener('online', networkStatus);
function networkStatus(e) {console.log(e.type);
}
online state
caniuse.com/#feat=online-status
BROWSERsupport
whereto use it?
VIBRATION
Provides access to a form of tactile feedback.
vibration
// Vibrate for 1 secondnavigator.vibrate(1000);
// Vibrate with a patternnavigator.vibrate([400, 300, 300, 200, 500]);
// Turn off vibrationnavigator.vibrate(0);
VIBRATION
vibrate wait vibrate wait vibrate
// Super Marionavigator.vibrate([125,75,125,275,200,275,125,75,125,275,200,600,200,600]);
// Star Warsnavigator.vibrate([500,110,500,110,450,110,200,110,170,40,450,110,200,110,170,40,500]);
// Go Go Power Rangersnavigator.vibrate([150,150,150,150,75,75,150,150,150,150,450]);
VIBRATION
https://goo.gl/bX4ZQv
caniuse.com/#feat=vibration
BROWSERsupport
whereto use it?
DEVICEorientation
Provides access to device's physical orientation.
device orientation
device orientationwindow.addEventListener('deviceorientation', (e) => { console.log(‘Gamma:’, e.gamma); console.log(‘Beta:’, e.beta); console.log(‘Alpha:’, e.alpha);});
device orientationlet logo = document.querySelector(‘img');
window.addEventListener('deviceorientation', (e) => { let tiltLR = e.gamma; let tiltFB = e.beta;
logo.style.transform = `rotate(${tiltLR}deg) rotate3d(1,0,0, ${tiltFB * -1}deg)`;});
caniuse.com/#feat=deviceorientation
BROWSERsupport
whereto use it?
clipboardcopy & paste
Standard APIs for interacting with the clipboard (copy/cut/paste).
clipboard
// 1. User interaction is required
let button = document.querySelector('button');
button.addEventListener('click', () => { select(); copy();});
clipboard
// 2. Programmatically select an element
function select() { let input = document.querySelector('input');
input.focus(); input.setSelectionRange(0, input.value.length);}
clipboard
// 3. Copy selected element text
function copy() { try { document.execCommand('copy'); } catch (err) { console.error(err); }}
clipboard
document.addEventListener('copy', (e) => { console.log(e.target.value);});
document.addEventListener('cut', (e) => { console.log(e.target.value);});
document.addEventListener('paste', (e) => { console.log(e.clipboardData.getData('text/plain'));});
clipboard
caniuse.com/#feat=clipboard
BROWSERsupport
whereto use it?
lightambient
Exposes sensor data that captures the light intensity.
ambient light
window.addEventListener('devicelight', (e) => { console.log(`${e.value} lux`);});
ambient light
let sensor = new AmbientLightSensor();
sensor.start();
sensor.onchange = (e) => { console.log(e.reading.illuminance);};
sensor.stop();
ambient light sensor
BROWSER
caniuse.com/#feat=ambient-light
support
whereto use it?
STATUSbattery
Allows a web page to access battery information from desktop and mobile devices.
battery status
navigator.getBattery().then((battery) => { console.log(`${battery.level * 100}%`);
battery.addEventListener('levelchange', () => { console.log(`${this.level * 100}%`); });});
battery status
caniuse.com/#feat=battery-status
BROWSERsupport
whereto use it?
web components
templates
custom elements
shadow domhtml imports
progressive web apps
service workers
push notificationsoffline support
app manifest
background sync
WEBassembly
WebAssembly, or wasm, is a low-level programming language for the client-side.
web assembly
under development
BROWSERsupport
WEBVR
Experimental API that provides access to Virtual Reality devices, such as the Oculus Rift or Google Cardboard.
web VR
BROWSERsupportchromestatus.com/features#webvr
gamepad
Gives access to a game controller via USB.
gamepad
window.addEventListener('gamepadconnected', () => { let gp = navigator.getGamepads()[0];
console.log(‘ID:’, gp.id); console.log(‘Axes:’, gp.axes.length); console.log(‘Buttons:’, gp.buttons.length);});
gamepad
window.addEventListener('gamepadconnected', gameLoop);
function gameLoop() { let gp = navigator.getGamepads()[0];
if (gp.buttons[0].pressed) { console.log('X'); }
requestAnimationFrame(gameLoop);}
game loop
caniuse.com/#feat=gamepad
BROWSERsupport
thank you
@zenorochaso much