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
   

   View Slide

2. @zenorocha
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. canvas
    svg
    geolocation
    local
    storage
    web
    sockets
    audio
    video
    drag &
    drop
    web rtc
    

    View Slide

23. page
    visibility
    

    View Slide

24. Provê uma API que checa
    se a aba atual está visível
    ou não no navegador.
    page visibility
    

    View Slide

25. window.addEventListener('visibilitychange', () => {
    if (document.hidden) {
    console.log('Tab is hidden');
    }
    else {
    console.log('Tab is focused');
    }
    });
    page visibility
    

    View Slide

26. View Slide

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;
    }
    });
    

    View Slide

28. caniuse.com/#feat=pagevisibility
    BROWSER
    support
    

    View Slide

29. onde
    usar?
    

    View Slide

30. View Slide

31. View Slide

32. web
    share
    

    View Slide

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
    

    View Slide

34. shareButton.addEventListener(‘click', () => {
    navigator.share({
    title: ‘Some Example’,
    url: window.location.href
    })
    .then(console.log('Successful share’))
    .catch(console.log(error));
    });
    web share
    

    View Slide

35. onde
    usar?
    

    View Slide

36. View Slide

37. under developm
    ent
    BROWSER
    support
    

    View Slide

38. View Slide

39. state
    online
    

    View Slide

40. Expõe o estado atual de
    disponibilidade da rede.
    online state
    

    View Slide

41. console.log(navigator.onLine ? 'online' : 'offline')
    online state
    

    View Slide

42. window.addEventListener('offline', networkStatus);
    window.addEventListener('online', networkStatus);
    function networkStatus(e) {
    console.log(e.type);
    }
    online state
    

    View Slide

43. caniuse.com/#feat=online-status
    BROWSER
    support
    

    View Slide

44. View Slide

45. let type = navigator.connection.type;
    // ex: bluetooth, cellular, ethernet, wifi
    let max = navigator.connection.downlinkMax;
    // in megabits
    network info
    

    View Slide

46. onde
    usar?
    

    View Slide

47. View Slide

48. DEVICE
    orientation
    

    View Slide

49. Expõe as coordenadas de
    orientação física de um
    dispositivo.
    device orientation
    

    View Slide

50. device orientation
    window.addEventListener('deviceorientation', (e) => {
    console.log(‘Gamma:’, e.gamma);
    console.log(‘Beta:’, e.beta);
    console.log(‘Alpha:’, e.alpha);
    });
    

    View Slide

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)`;
    });
    

    View Slide

52. caniuse.com/#feat=deviceorientation
    BROWSER
    support
    

    View Slide

53. onde
    usar?
    

    View Slide

54. View Slide

55. VIBRATION
    

    View Slide

56. Provê acesso ao hardware
    de vibração de dispositivos
    móveis.
    vibration
    

    View Slide

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
    

    View Slide

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
    

    View Slide

59. caniuse.com/#feat=vibration
    BROWSER
    support
    

    View Slide

60. onde
    usar?
    

    View Slide

61. View Slide

62. View Slide

63. clipboard
    copy & paste
    

    View Slide

64. Possibilita interação com o
    clipboard do usuário
    através de operações de
    copiar, cortar e colar.
    clipboard
    

    View Slide

65. View Slide

66. // 1. User interaction is required
    let button = document.querySelector('button');
    button.addEventListener('click', () => {
    select();
    copy();
    });
    clipboard
    

    View Slide

67. // 2. Programmatically select an element
    function select() {
    let input = document.querySelector('input');
    input.focus();
    input.setSelectionRange(0, input.value.length);
    }
    clipboard
    

    View Slide

68. // 3. Copy selected element text
    function copy() {
    try {
    document.execCommand('copy');
    }
    catch (err) {
    console.error(err);
    }
    }
    clipboard
    

    View Slide

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
    

    View Slide

70. View Slide

71. View Slide

72. caniuse.com/#feat=clipboard
    BROWSER
    support
    

    View Slide

73. onde
    usar?
    

    View Slide

74. View Slide

75. View Slide

76. light
    ambient
    

    View Slide

77. Expõe dados do sensor
    que capta a intensidade
    de luz de um ambiente.
    ambient light
    

    View Slide

78. window.addEventListener('devicelight', (e) => {
    console.log(`${e.value} lux`);
    });
    ambient light
    

    View Slide

79. View Slide

80. View Slide

81. let sensor = new AmbientLightSensor();
    sensor.start();
    sensor.onchange = (e) => {
    console.log(e.reading.illuminance);
    };
    sensor.stop();
    ambient light sensor
    

    View Slide

82. BROWSER
    caniuse.com/#feat=ambient-light
    support
    

    View Slide

83. onde
    usar?
    

    View Slide

84. View Slide

85. View Slide

86. STATUS
    battery
    

    View Slide

87. Permite que uma página
    web acesse informações
    sobre a bateria de um
    dispositivo.
    battery status
    

    View Slide

88. navigator.getBattery().then((battery) => {
    console.log(`${battery.level * 100}%`);
    battery.addEventListener('levelchange', () => {
    console.log(`${this.level * 100}%`);
    });
    });
    battery status
    

    View Slide

89. caniuse.com/#feat=ba!ery-status
    BROWSER
    support
    

    View Slide

90. onde
    usar?
    

    View Slide

91. View Slide

92. View Slide

93. WEBVR
    

    View Slide

94. Uma API experimental que
    trás o mundo de Realidade
    Virtual para web usando
    Oculus Ri" ou Google
    Cardboard por exemplo.
    web VR
    

    View Slide

95. BROWSER
    support
    chromestatus.com/features#webvr
    

    View Slide

96. View Slide

97. shape
    detection
    

    View Slide

98. É capaz de detectar
    diferentes formas em
    imagens como rostos, códigos
    de barras e até mesmo texto
    em uma imagem.
    shape detection
    

    View Slide

99. let faceDetector = new FaceDetector();
    faceDetector.detect(image).then(faces => {
    console.log(‘Faces found:’, faces.length);
    }).catch((err) => {
    console.error(err);
    });
    shape detection
    

    View Slide

100. View Slide

101. BROWSER
     support
     under developm
     ent
     

     View Slide

102. onde
     usar?
     

     View Slide

103. View Slide

104. WEB
     assembly
     

     View Slide

105. WebAssembly, ou wasm, é
     um novo formato binário
     para desenvolvimento de
     aplicações de baixo nível.
     web assembly
     

     View Slide

106. under developm
     ent
     BROWSER
     support
     

     View Slide

107. View Slide

108. gamepad
     

     View Slide

109. Permite que páginas web
     se conectem com controles
     de video game via USB.
     gamepad
     

     View Slide

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
     

     View Slide

111. window.addEventListener('gamepadconnected', gameLoop);
     function gameLoop() {
     let gp = navigator.getGamepads()[0];
     if (gp.buttons[0].pressed) {
     console.log('X');
     }
     requestAnimationFrame(gameLoop);
     }
     game loop
     

     View Slide

112. caniuse.com/#feat=gamepad
     BROWSER
     support
     

     View Slide

113. View Slide

114. web
     components
     templates
     custom elements
     shadow dom
     html imports
     

     View Slide

115. progressive
     web apps
     service workers
     push notifications
     offline support
     app manifest
     background sync
     web usb bluetooth
     

     View Slide

116. View Slide

117. Where
     the magic
     happens
     Your
     comfort zone
     

     View Slide

118. obrigado
     @zenorocha
     muito
     

     View Slide