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

Transcript

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

   View Slide

2. 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. canvas
    svg
    geolocation
    local
    storage
    web
    sockets
    audio
    video
    drag &
    drop
    web rtc
    

    View Slide

18. page
    visibility
    

    View Slide

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

    View Slide

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

    View Slide

21. View Slide

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

    View Slide

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

    View Slide

24. onde
    usar?
    

    View Slide

25. View Slide

26. View Slide

27. state
    online
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. View Slide

33. onde
    usar?
    

    View Slide

34. View Slide

35. VIBRATION
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

40. onde
    usar?
    

    View Slide

41. View Slide

42. View Slide

43. DEVICE
    orientation
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. View Slide

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

    View Slide

49. onde
    usar?
    

    View Slide

50. View Slide

51. clipboard
    copy & paste
    

    View Slide

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

    View Slide

53. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

58. View Slide

59. View Slide

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

    View Slide

61. onde
    usar?
    

    View Slide

62. View Slide

63. View Slide

64. light
    ambient
    

    View Slide

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

    View Slide

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

    View Slide

67. View Slide

68. View Slide

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

    View Slide

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

    View Slide

71. onde
    usar?
    

    View Slide

72. View Slide

73. View Slide

74. STATUS
    battery
    

    View Slide

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

    View Slide

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

    View Slide

77. caniuse.com/#feat=battery-status
    BROWSER
    support
    

    View Slide

78. onde
    usar?
    

    View Slide

79. View Slide

80. View Slide

81. web
    components
    templates
    custom elements
    shadow dom
    html imports
    

    View Slide

82. progressive
    web apps
    service workers
    push notifications
    offline support
    app manifest
    background sync
    

    View Slide

83. WEB
    assembly
    

    View Slide

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

    View Slide

85. under developm
    ent
    BROWSER
    support
    

    View Slide

86. View Slide

87. WEBVR
    

    View Slide

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

    View Slide

89. BROWSER
    support
    chromestatus.com/features#webvr
    

    View Slide

90. View Slide

91. gamepad
    

    View Slide

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

    View Slide

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
    

    View Slide

94. 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

95. View Slide

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

    View Slide

97. View Slide

98. View Slide

99. View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

104. obrigado
     @zenorocha
     muito
     

     View Slide