Web APIs you (probably) didn't know existed

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.

Transcript

1. web apis you didn’t know existed probably @zenorocha
17. canvas svg 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. WEB assembly
83. WebAssembly, or wasm, is a low-level programming language for the client-side. web assembly
84. under developm 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