JS Experience 2017 - Web APIs que você provavelmente não sabia que existiam
0 gostou275 visualizações
O documento discute diversas APIs da web, como Page Visibility, Web Share e Device Orientation, detalhando seu uso e implementação. Também aborda suporte em navegadores, interações com sensores, e acessibilidade a recursos como o clipboard e a bateria. Finalmente, menciona APIs experimentais, como WebVR e WebAssembly, além de recursos para jogos com Gamepad.
![// 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](https://image.slidesharecdn.com/js-experience-170628162409/85/JS-Experience-2017-Web-APIs-que-voce-provavelmente-nao-sabia-que-existiam-57-320.jpg)
![// 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](https://image.slidesharecdn.com/js-experience-170628162409/85/JS-Experience-2017-Web-APIs-que-voce-provavelmente-nao-sabia-que-existiam-58-320.jpg)
![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](https://image.slidesharecdn.com/js-experience-170628162409/85/JS-Experience-2017-Web-APIs-que-voce-provavelmente-nao-sabia-que-existiam-110-320.jpg)
![window.addEventListener('gamepadconnected', gameLoop);
function gameLoop() {
let gp = navigator.getGamepads()[0];
if (gp.buttons[0].pressed) {
console.log('X');
}
requestAnimationFrame(gameLoop);
}
game loop](https://image.slidesharecdn.com/js-experience-170628162409/85/JS-Experience-2017-Web-APIs-que-voce-provavelmente-nao-sabia-que-existiam-111-320.jpg)
JS Experience 2017 - Web APIs que você provavelmente não sabia que existiam
- 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
- 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; } });
- 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?
- 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
- 45. let type = navigator.connection.type; // ex: bluetooth, cellular, ethernet, wifi let max = navigator.connection.downlinkMax; // in megabits network info
- 46. onde usar?
- 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)`; });
- 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
- 60. onde usar?
- 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
- 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
- 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
- 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
- 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
- 102. onde usar?
- 104. WEBassembly
- 105. WebAssembly, ou wasm, é um novo formato binário para desenvolvimento de aplicações de baixo nível. web assembly
- 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
- 115. progressive web apps service workers push notifications offline support app manifest background sync web usb bluetooth