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

E190023b66e2b8aa73a842b106920c93?s=47 Zeno Rocha
August 06, 2016

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

E190023b66e2b8aa73a842b106920c93?s=128

Zeno Rocha

August 06, 2016
Tweet

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

  16. None
  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
  21. None
  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?

  25. None
  26. None
  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

  32. None
  33. onde usar?

  34. None
  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?

  41. None
  42. None
  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)`; });
  47. None
  48. caniuse.com/#feat=deviceorientation BROWSER support

  49. onde usar?

  50. None
  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
  53. None
  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
  58. None
  59. None
  60. caniuse.com/#feat=clipboard BROWSER support

  61. onde usar?

  62. None
  63. None
  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

  67. None
  68. None
  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?

  72. None
  73. None
  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?

  79. None
  80. None
  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

  86. None
  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

  90. None
  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
  95. None
  96. caniuse.com/#feat=gamepad BROWSER support

  97. None
  98. None
  99. 2011

  100. 2012

  101. 2013

  102. 2014

  103. None
  104. obrigado @zenorocha muito