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

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

Presented at JSExperience

E190023b66e2b8aa73a842b106920c93?s=128

Zeno Rocha

June 23, 2017
Tweet

Transcript

  1. não sabia que existiam web apis que você provavelmente

  2. @zenorocha

  3. None
  4. None
  5. None
  6. None
  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

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

  30. None
  31. None
  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?

  36. None
  37. under developm ent BROWSER support

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

  44. None
  45. let type = navigator.connection.type; // ex: bluetooth, cellular, ethernet, wifi

    let max = navigator.connection.downlinkMax; // in megabits network info
  46. onde usar?

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

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

  61. None
  62. None
  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
  65. None
  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
  70. None
  71. None
  72. caniuse.com/#feat=clipboard BROWSER support

  73. onde usar?

  74. None
  75. None
  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

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

  84. None
  85. None
  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?

  91. None
  92. None
  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

  96. None
  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
  100. None
  101. BROWSER support under developm ent

  102. onde usar?

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

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

  113. None
  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
  116. None
  117. Where the magic happens Your comfort zone

  118. obrigado @zenorocha muito