Web APIs you (probably) didn't know existed

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