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. 3.
  2. 4.
  3. 5.
  4. 6.
  5. 7.
  6. 8.
  7. 9.
  8. 10.
  9. 11.
  10. 12.
  11. 13.
  12. 14.
  13. 15.
  14. 16.
  15. 17.
  16. 18.
  17. 19.
  18. 20.
  19. 21.
  20. 24.

    Provê uma API que checa se a aba atual está

    visível ou não no navegador. page visibility
  21. 26.
  22. 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; } });
  23. 30.
  24. 31.
  25. 32.
  26. 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
  27. 34.

    shareButton.addEventListener(‘click', () => { navigator.share({ title: ‘Some Example’, url: window.location.href

    }) .then(console.log('Successful share’)) .catch(console.log(error)); }); web share
  28. 36.
  29. 38.
  30. 44.
  31. 45.

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

    let max = navigator.connection.downlinkMax; // in megabits network info
  32. 47.
  33. 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)`; });
  34. 54.
  35. 55.
  36. 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
  37. 61.
  38. 62.
  39. 65.
  40. 66.

    // 1. User interaction is required let button = document.querySelector('button');

    button.addEventListener('click', () => { select(); copy(); }); clipboard
  41. 67.

    // 2. Programmatically select an element function select() { let

    input = document.querySelector('input'); input.focus(); input.setSelectionRange(0, input.value.length); } clipboard
  42. 68.

    // 3. Copy selected element text function copy() { try

    { document.execCommand('copy'); } catch (err) { console.error(err); } } clipboard
  43. 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
  44. 70.
  45. 71.
  46. 74.
  47. 75.
  48. 77.
  49. 79.
  50. 80.
  51. 81.

    let sensor = new AmbientLightSensor(); sensor.start(); sensor.onchange = (e) =>

    { console.log(e.reading.illuminance); }; sensor.stop(); ambient light sensor
  52. 84.
  53. 85.
  54. 91.
  55. 92.
  56. 93.
  57. 94.

    Uma API experimental que trás o mundo de Realidade Virtual

    para web usando Oculus Ri" ou Google Cardboard por exemplo. web VR
  58. 96.
  59. 98.

    É capaz de detectar diferentes formas em imagens como rostos,

    códigos de barras e até mesmo texto em uma imagem. shape detection
  60. 99.

    let faceDetector = new FaceDetector(); faceDetector.detect(image).then(faces => { console.log(‘Faces found:’,

    faces.length); }).catch((err) => { console.error(err); }); shape detection
  61. 100.
  62. 102.
  63. 103.
  64. 105.

    WebAssembly, ou wasm, é um novo formato binário para desenvolvimento

    de aplicações de baixo nível. web assembly
  65. 107.
  66. 108.
  67. 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
  68. 111.

    window.addEventListener('gamepadconnected', gameLoop); function gameLoop() { let gp = navigator.getGamepads()[0]; if

    (gp.buttons[0].pressed) { console.log('X'); } requestAnimationFrame(gameLoop); } game loop
  69. 113.
  70. 115.
  71. 116.