Video: https://www.youtube.com/watch?v=NCGLPp778JY You’ve probably heard about the amazing things that HTML5 can do. Maybe you already saved some data using Local Storage, fetched user coordinates using Geolocation, or even drew graphs and other objects using Canvas. But did you know there are many more new JavaScript APIs in the Web Platform? In this talk, we’ll see how to leverage the power of those APIs in order to create better experiences for your users.

1. web apis
you
didn’t know
existed
probably
@zenorocha

2. 2008

3. 2008

4. 2009

5. 2009

6. 2010

7. 2010

8. 2011

9. 2011

10. 2012

11. 2012

12. 2013

13. 2013

14. 2014

15. 2014

17. canvassvg
geolocation
local
storage
web
sockets
audio
video
drag &
drop
web rtc

18. page
visibility

19. Provides an API to ask
whether the current page
is visible or not.
page visibility

20. window.addEventListener('visibilitychange', () => {
if (document.hidden) {
console.log('Tab is hidden');
}
else {
console.log('Tab is focused');
}
});
page visibility

22. 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;
}
});

23. caniuse.com/#feat=pagevisibility
BROWSER
support

24. where
to use it?

26. state
online

27. Exposes a network
connection availability
information to the web.
online state

28. console.log(navigator.onLine ? 'online' : 'offline')
online state

29. window.addEventListener('offline', networkStatus);
window.addEventListener('online', networkStatus);
function networkStatus(e) {
console.log(e.type);
}
online state

30. caniuse.com/#feat=online-status
BROWSER
support

32. where
to use it?

34. VIBRATION

35. Provides access to a
form of tactile feedback.
vibration

36. // Vibrate for 1 second
navigator.vibrate(1000);
// Vibrate with a pattern
navigator.vibrate([400, 300, 300, 200, 500]);
// Turn off vibration
navigator.vibrate(0);
VIBRATION
vibrate wait vibrate wait vibrate

37. // Super Mario
navigator.vibrate([125,75,125,275,200,275,125,75,125,27
5,200,600,200,600]);
// Star Wars
navigator.vibrate([500,110,500,110,450,110,200,110,170,
40,450,110,200,110,170,40,500]);
// Go Go Power Rangers
navigator.vibrate([150,150,150,150,75,75,150,150,150,15
0,450]);
VIBRATION
https://goo.gl/bX4ZQv

38. caniuse.com/#feat=vibration
BROWSER
support

39. where
to use it?

42. DEVICE
orientation

43. Provides access to device's
physical orientation.
device orientation

44. device orientation
window.addEventListener('deviceorientation', (e) => {
console.log(‘Gamma:’, e.gamma);
console.log(‘Beta:’, e.beta);
console.log(‘Alpha:’, e.alpha);
});

45. device orientation
let 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)`;
});

47. caniuse.com/#feat=deviceorientation
BROWSER
support

48. where
to use it?

50. clipboard
copy&paste

51. Standard APIs for
interacting with the
clipboard (copy/cut/paste).
clipboard

53. // 1. User interaction is required
let button = document.querySelector('button');
button.addEventListener('click', () => {
select();
copy();
});
clipboard

54. // 2. Programmatically select an element
function select() {
let input = document.querySelector('input');
input.focus();
input.setSelectionRange(0, input.value.length);
}
clipboard

55. // 3. Copy selected element text
function copy() {
try {
document.execCommand('copy');
}
catch (err) {
console.error(err);
}
}
clipboard

56. 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

59. caniuse.com/#feat=clipboard
BROWSER
support

60. where
to use it?

63. light
ambient

64. Exposes sensor data that
captures the light intensity.
ambient light

65. window.addEventListener('devicelight', (e) => {
console.log(`${e.value} lux`);
});
ambient light

68. let sensor = new AmbientLightSensor();
sensor.start();
sensor.onchange = (e) => {
console.log(e.reading.illuminance);
};
sensor.stop();
ambient light sensor

69. BROWSER
caniuse.com/#feat=ambient-light
support

70. where
to use it?

73. STATUS
battery

74. Allows a web page to access
battery information from
desktop and mobile devices.
battery status

75. navigator.getBattery().then((battery) => {
console.log(`${battery.level * 100}%`);
battery.addEventListener('levelchange', () => {
console.log(`${this.level * 100}%`);
});
});
battery status

76. caniuse.com/#feat=battery-status
BROWSER
support

77. where
to use it?

80. web
components
templates
custom elements
shadow dom
html imports

81. progressive
web apps
service workers
push notifications
offline support
app manifest
background sync

82. WEBassembly

83. WebAssembly, or wasm,
is a low-level programming
language for the client-side.
web assembly

84. underdevelopm
ent
BROWSER
support

86. WEBVR

87. Experimental API that
provides access to Virtual
Reality devices, such as the
Oculus Rift or Google
Cardboard.
web VR

88. BROWSER
support
chromestatus.com/features#webvr

90. gamepad

91. Gives access to a game
controller via USB.
gamepad

92. 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

93. window.addEventListener('gamepadconnected', gameLoop);
function gameLoop() {
let gp = navigator.getGamepads()[0];
if (gp.buttons[0].pressed) {
console.log('X');
}
requestAnimationFrame(gameLoop);
}
game loop

95. caniuse.com/#feat=gamepad
BROWSER
support

98. thank you
@zenorocha
so much