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

Presented at JSExperience

Transcript

1. não sabia que existiam web apis que você provavelmente
2. @zenorocha
7. 2008
8. 2008
9. 2009
10. 2009
11. 2010
12. 2010
13. 2011
14. 2011
15. 2012
16. 2012
17. 2013
18. 2013
19. 2014
20. 2014
22. canvas svg geolocation local storage web sockets audio video drag & drop web rtc
23. page visibility
24. Provê uma API que checa se a aba atual está visível ou não no navegador. page visibility
25. window.addEventListener('visibilitychange', () => { if (document.hidden) { console.log('Tab is hidden'); } else { console.log('Tab is focused'); } }); page visibility
27. 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; } });
28. caniuse.com/#feat=pagevisibility BROWSER support
29. onde usar?
32. web share
33. Permite que um site compartilhe algo para um determinado destino. Pode ser um serviço de sistema, um aplicativo nativo ou outro site. web share
34. shareButton.addEventListener(‘click', () => { navigator.share({ title: ‘Some Example’, url: window.location.href }) .then(console.log('Successful share’)) .catch(console.log(error)); }); web share
35. onde usar?
37. under developm ent BROWSER support
39. state online
40. Expõe o estado atual de disponibilidade da rede. online state
41. console.log(navigator.onLine ? 'online' : 'offline') online state
42. window.addEventListener('offline', networkStatus); window.addEventListener('online', networkStatus); function networkStatus(e) { console.log(e.type); } online state
43. caniuse.com/#feat=online-status BROWSER support
45. let type = navigator.connection.type; // ex: bluetooth, cellular, ethernet, wifi let max = navigator.connection.downlinkMax; // in megabits network info
46. onde usar?
48. DEVICE orientation
49. Expõe as coordenadas de orientação física de um dispositivo. device orientation
50. device orientation window.addEventListener('deviceorientation', (e) => { console.log(‘Gamma:’, e.gamma); console.log(‘Beta:’, e.beta); console.log(‘Alpha:’, e.alpha); });
51. 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)`; });
52. caniuse.com/#feat=deviceorientation BROWSER support
53. onde usar?
55. VIBRATION
56. Provê acesso ao hardware de vibração de dispositivos móveis. vibration
57. // 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
58. // 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 h!ps://goo.gl/bX4ZQv
59. caniuse.com/#feat=vibration BROWSER support
60. onde usar?
63. clipboard copy & paste
64. Possibilita interação com o clipboard do usuário através de operações de copiar, cortar e colar. clipboard
66. // 1. User interaction is required let button = document.querySelector('button'); button.addEventListener('click', () => { select(); copy(); }); clipboard
67. // 2. Programmatically select an element function select() { let input = document.querySelector('input'); input.focus(); input.setSelectionRange(0, input.value.length); } clipboard
68. // 3. Copy selected element text function copy() { try { document.execCommand('copy'); } catch (err) { console.error(err); } } clipboard
69. 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
72. caniuse.com/#feat=clipboard BROWSER support
73. onde usar?
76. light ambient
77. Expõe dados do sensor que capta a intensidade de luz de um ambiente. ambient light
78. window.addEventListener('devicelight', (e) => { console.log(`${e.value} lux`); }); ambient light
81. let sensor = new AmbientLightSensor(); sensor.start(); sensor.onchange = (e) => { console.log(e.reading.illuminance); }; sensor.stop(); ambient light sensor
82. BROWSER caniuse.com/#feat=ambient-light support
83. onde usar?
86. STATUS battery
87. Permite que uma página web acesse informações sobre a bateria de um dispositivo. battery status
88. navigator.getBattery().then((battery) => { console.log(`${battery.level * 100}%`); battery.addEventListener('levelchange', () => { console.log(`${this.level * 100}%`); }); }); battery status
89. caniuse.com/#feat=ba!ery-status BROWSER support
90. onde usar?
93. WEBVR
94. Uma API experimental que trás o mundo de Realidade Virtual para web usando Oculus Ri" ou Google Cardboard por exemplo. web VR
95. BROWSER support chromestatus.com/features#webvr
97. shape detection
98. É capaz de detectar diferentes formas em imagens como rostos, códigos de barras e até mesmo texto em uma imagem. shape detection
99. let faceDetector = new FaceDetector(); faceDetector.detect(image).then(faces => { console.log(‘Faces found:’, faces.length); }).catch((err) => { console.error(err); }); shape detection
101. BROWSER support under developm ent
102. onde usar?
104. WEB assembly
105. WebAssembly, ou wasm, é um novo formato binário para desenvolvimento de aplicações de baixo nível. web assembly
106. under developm ent BROWSER support
108. gamepad
109. Permite que páginas web se conectem com controles de video game via USB. gamepad
110. 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
111. window.addEventListener('gamepadconnected', gameLoop); function gameLoop() { let gp = navigator.getGamepads()[0]; if (gp.buttons[0].pressed) { console.log('X'); } requestAnimationFrame(gameLoop); } game loop
112. caniuse.com/#feat=gamepad BROWSER support
114. web components templates custom elements shadow dom html imports
115. progressive web apps service workers push notifications offline support app manifest background sync web usb bluetooth
117. Where the magic happens Your comfort zone
118. obrigado @zenorocha muito