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

Transcript

1. 1.

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

2. 2.

   2008

3. 3.

   2008

4. 4.

   2009

5. 5.

   2009

6. 6.

   2010

7. 7.

   2010

8. 8.

   2011

9. 9.

   2011

10. 10.

    2012

11. 11.

    2012

12. 12.

    2013

13. 13.

    2013

14. 14.

    2014

15. 15.

    2014

16. 16.

    None
17. 17.

    canvas svg geolocation local storage web sockets audio video drag

    & drop web rtc
18. 18.

    page visibility

19. 19.

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

    visível ou não no navegador. page visibility
20. 20.

    window.addEventListener('visibilitychange', () => { if (document.hidden) { console.log('Tab is hidden');

    } else { console.log('Tab is focused'); } }); page visibility
21. 21.

    None
22. 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. 23.

    caniuse.com/#feat=pagevisibility BROWSER support

24. 24.

    onde usar?

25. 25.

    None
26. 26.

    None
27. 27.

    state online

28. 28.

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

29. 29.

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

30. 30.

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

    state
31. 31.

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

32. 32.

    None
33. 33.

    onde usar?

34. 34.

    None
35. 35.

    VIBRATION

36. 36.

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

37. 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. 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. 39.

    caniuse.com/#feat=vibration BROWSER support

40. 40.

    onde usar?

41. 41.

    None
42. 42.

    None
43. 43.

    DEVICE orientation

44. 44.

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

    orientation
45. 45.

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

    console.log(‘Alpha:’, e.alpha); });
46. 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. 47.

    None
48. 48.

    caniuse.com/#feat=deviceorientation BROWSER support

49. 49.

    onde usar?

50. 50.

    None
51. 51.

    clipboard copy & paste

52. 52.

    Possibilita interação com o clipboard do usuário através de operações

    de copiar, cortar e colar. clipboard
53. 53.

    None
54. 54.

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

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

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

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

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

    { document.execCommand('copy'); } catch (err) { console.error(err); } } clipboard
57. 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. 58.

    None
59. 59.

    None
60. 60.

    caniuse.com/#feat=clipboard BROWSER support

61. 61.

    onde usar?

62. 62.

    None
63. 63.

    None
64. 64.

    light ambient

65. 65.

    Expõe dados do sensor que capta a intensidade de luz

    de um ambiente. ambient light
66. 66.

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

67. 67.

    None
68. 68.

    None
69. 69.

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

    { console.log(e.reading.illuminance); }; sensor.stop(); ambient light sensor
70. 70.

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

71. 71.

    onde usar?

72. 72.

    None
73. 73.

    None
74. 74.

    STATUS battery

75. 75.

    Permite que uma página web acesse informações sobre a bateria

    de um dispositivo. battery status
76. 76.

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

    console.log(`${this.level * 100}%`); }); }); battery status
77. 77.

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

78. 78.

    onde usar?

79. 79.

    None
80. 80.

    None
81. 81.

    web components templates custom elements shadow dom html imports

82. 82.

    progressive web apps service workers push notifications offline support app

    manifest background sync
83. 83.

    WEB assembly

84. 84.

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

    de aplicações de baixo nível. web assembly
85. 85.

    under developm ent BROWSER support

86. 86.

    None
87. 87.

    WEBVR

88. 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. 89.

    BROWSER support chromestatus.com/features#webvr

90. 90.

    None
91. 91.

    gamepad

92. 92.

    Permite que páginas web se conectem com controles de video

    game via USB. gamepad
93. 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. 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. 95.

    None
96. 96.

    caniuse.com/#feat=gamepad BROWSER support

97. 97.

    None
98. 98.

    None
99. 99.

    2011

100. 100.

     2012

101. 101.

     2013

102. 102.

     2014

103. 103.

     None
104. 104.

     obrigado @zenorocha muito