Web APIs que você (provavelmente) não sabia que existiam

Transcript

1. não sabia que existiam web apis que você provavelmente @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. canvas svg geolocation local storage web sockets audio video drag & drop web rtc
18. page visibility
19. Provê uma API que checa se a aba atual está visível ou não no navegador. 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. onde usar?
27. state online
28. Expõe o estado atual de disponibilidade da rede. online state
29. console.log(navigator.onLine ? 'online' : 'offline') online state
30. window.addEventListener('offline', networkStatus); window.addEventListener('online', networkStatus); function networkStatus(e) { console.log(e.type); } online state
31. caniuse.com/#feat=online-status BROWSER support
33. onde usar?
35. VIBRATION
36. Provê acesso ao hardware de vibração de dispositivos móveis. vibration
37. // 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
38. // 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
39. caniuse.com/#feat=vibration BROWSER support
40. onde usar?
43. DEVICE orientation
44. Expõe as coordenadas de orientação física de um dispositivo. device orientation
45. device orientation window.addEventListener('deviceorientation', (e) => { console.log(‘Gamma:’, e.gamma); console.log(‘Beta:’, e.beta); console.log(‘Alpha:’, e.alpha); });
46. 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)`; });
48. caniuse.com/#feat=deviceorientation BROWSER support
49. onde usar?
51. clipboard copy & paste
52. Possibilita interação com o clipboard do usuário através de operações de copiar, cortar e colar. clipboard
54. // 1. User interaction is required let button = document.querySelector('button'); button.addEventListener('click', () => { select(); copy(); }); clipboard
55. // 2. Programmatically select an element function select() { let input = document.querySelector('input'); input.focus(); input.setSelectionRange(0, input.value.length); } clipboard
56. // 3. Copy selected element text function copy() { try { document.execCommand('copy'); } catch (err) { console.error(err); } } clipboard
57. 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
60. caniuse.com/#feat=clipboard BROWSER support
61. onde usar?
64. light ambient
65. Expõe dados do sensor que capta a intensidade de luz de um ambiente. ambient light
66. window.addEventListener('devicelight', (e) => { console.log(`${e.value} lux`); }); ambient light
69. let sensor = new AmbientLightSensor(); sensor.start(); sensor.onchange = (e) => { console.log(e.reading.illuminance); }; sensor.stop(); ambient light sensor
70. BROWSER caniuse.com/#feat=ambient-light support
71. onde usar?
74. STATUS battery
75. Permite que uma página web acesse informações sobre a bateria de um dispositivo. battery status
76. navigator.getBattery().then((battery) => { console.log(`${battery.level * 100}%`); battery.addEventListener('levelchange', () => { console.log(`${this.level * 100}%`); }); }); battery status
77. caniuse.com/#feat=battery-status BROWSER support
78. onde usar?
81. web components templates custom elements shadow dom html imports
82. progressive web apps service workers push notifications offline support app manifest background sync
83. WEB assembly
84. WebAssembly, ou wasm, é um novo formato binário para desenvolvimento de aplicações de baixo nível. web assembly
85. under developm ent BROWSER support
87. WEBVR
88. Uma API experimental que trás o mundo de Realidade Virtual para web usando Oculus Rift ou Google Cardboard por exemplo. web VR
89. BROWSER support chromestatus.com/features#webvr
91. gamepad
92. Permite que páginas web se conectem com controles de video game via USB. gamepad
93. 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
94. window.addEventListener('gamepadconnected', gameLoop); function gameLoop() { let gp = navigator.getGamepads()[0]; if (gp.buttons[0].pressed) { console.log('X'); } requestAnimationFrame(gameLoop); } game loop
96. caniuse.com/#feat=gamepad BROWSER support
99. 2011
100. 2012
101. 2013
102. 2014
104. obrigado @zenorocha muito