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

Transcript

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

2. @zenorocha

3. None
4. None
5. None
6. None

7. 2008

8. 2008

9. 2009

10. 2009

11. 2010

12. 2010

13. 2011

14. 2011

15. 2012

16. 2012

17. 2013

18. 2013

19. 2014

20. 2014

21. None

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

    & drop web rtc

23. page visibility

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

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

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

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

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

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

29. onde usar?

30. None
31. None

32. web share

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

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

    }) .then(console.log('Successful share’)) .catch(console.log(error)); }); web share

35. onde usar?

36. None

37. under developm ent BROWSER support

38. None

39. state online

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

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

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

    state

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

44. None

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

    let max = navigator.connection.downlinkMax; // in megabits network info

46. onde usar?

47. None

48. DEVICE orientation

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

    orientation

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

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

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

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

53. onde usar?

54. None

55. VIBRATION

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

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

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

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

60. onde usar?

61. None
62. None

63. clipboard copy & paste

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

    de copiar, cortar e colar. clipboard
65. None

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

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

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

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

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

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

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

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

73. onde usar?

74. None
75. None

76. light ambient

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

    de um ambiente. ambient light

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

79. None
80. None

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

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

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

83. onde usar?

84. None
85. None

86. STATUS battery

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

    de um dispositivo. battery status

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

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

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

90. onde usar?

91. None
92. None

93. WEBVR

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

    para web usando Oculus Ri" ou Google Cardboard por exemplo. web VR

95. BROWSER support chromestatus.com/features#webvr

96. None

97. shape detection

98. É capaz de detectar diferentes formas em imagens como rostos,

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

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

    faces.length); }).catch((err) => { console.error(err); }); shape detection
100. None

101. BROWSER support under developm ent

102. onde usar?

103. None

104. WEB assembly

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

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

106. under developm ent BROWSER support

107. None

108. gamepad

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

     game via USB. gamepad

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

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

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

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

113. None

114. web components templates custom elements shadow dom html imports

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

     manifest background sync web usb bluetooth
116. None

117. Where the magic happens Your comfort zone

118. obrigado @zenorocha muito