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

Transcript

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

2. 2008

3. 2008

4. 2009

5. 2009

6. 2010

7. 2010

8. 2011

9. 2011

10. 2012

11. 2012

12. 2013

13. 2013

14. 2014

15. 2014

16. None

17. canvas svg geolocation local storage web sockets audio video drag

    & drop web rtc

18. page visibility

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

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

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

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

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. caniuse.com/#feat=pagevisibility BROWSER support

24. onde usar?

25. None
26. None

27. state online

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

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

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

    state

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

32. None

33. onde usar?

34. None

35. VIBRATION

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

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. // 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. caniuse.com/#feat=vibration BROWSER support

40. onde usar?

41. None
42. None

43. DEVICE orientation

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

    orientation

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

    console.log(‘Alpha:’, e.alpha); });

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

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

49. onde usar?

50. None

51. clipboard copy & paste

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

    de copiar, cortar e colar. clipboard
53. None

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

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

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

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

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

    { document.execCommand('copy'); } catch (err) { console.error(err); } } clipboard

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

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

61. onde usar?

62. None
63. None

64. light ambient

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

    de um ambiente. ambient light

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

67. None
68. None

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

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

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

71. onde usar?

72. None
73. None

74. STATUS battery

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

    de um dispositivo. battery status

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

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

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

78. onde usar?

79. None
80. None

81. web components templates custom elements shadow dom html imports

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

    manifest background sync

83. WEB assembly

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

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

85. under developm ent BROWSER support

86. None

87. WEBVR

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. BROWSER support chromestatus.com/features#webvr

90. None

91. gamepad

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

    game via USB. gamepad

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. window.addEventListener('gamepadconnected', gameLoop); function gameLoop() { let gp = navigator.getGamepads()[0]; if

    (gp.buttons[0].pressed) { console.log('X'); } requestAnimationFrame(gameLoop); } game loop
95. None

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

97. None
98. None

99. 2011

100. 2012

101. 2013

102. 2014

103. None

104. obrigado @zenorocha muito