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

Transcript

1. 1.

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

2. 2.

   @zenorocha

3. 3.

   None
4. 4.

   None
5. 5.

   None
6. 6.

   None
7. 7.

   2008

8. 8.

   2008

9. 9.

   2009

10. 10.

    2009

11. 11.

    2010

12. 12.

    2010

13. 13.

    2011

14. 14.

    2011

15. 15.

    2012

16. 16.

    2012

17. 17.

    2013

18. 18.

    2013

19. 19.

    2014

20. 20.

    2014

21. 21.

    None
22. 22.

    canvas svg geolocation local storage web sockets audio video drag

    & drop web rtc
23. 23.

    page visibility

24. 24.

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

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

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

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

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

    caniuse.com/#feat=pagevisibility BROWSER support

29. 29.

    onde usar?

30. 30.

    None
31. 31.

    None
32. 32.

    web share

33. 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. 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. 35.

    onde usar?

36. 36.

    None
37. 37.

    under developm ent BROWSER support

38. 38.

    None
39. 39.

    state online

40. 40.

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

41. 41.

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

42. 42.

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

    state
43. 43.

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

44. 44.

    None
45. 45.

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

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

    onde usar?

47. 47.

    None
48. 48.

    DEVICE orientation

49. 49.

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

    orientation
50. 50.

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

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

    caniuse.com/#feat=deviceorientation BROWSER support

53. 53.

    onde usar?

54. 54.

    None
55. 55.

    VIBRATION

56. 56.

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

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

    caniuse.com/#feat=vibration BROWSER support

60. 60.

    onde usar?

61. 61.

    None
62. 62.

    None
63. 63.

    clipboard copy & paste

64. 64.

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

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

    None
66. 66.

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

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

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

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

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

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

    None
71. 71.

    None
72. 72.

    caniuse.com/#feat=clipboard BROWSER support

73. 73.

    onde usar?

74. 74.

    None
75. 75.

    None
76. 76.

    light ambient

77. 77.

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

    de um ambiente. ambient light
78. 78.

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

79. 79.

    None
80. 80.

    None
81. 81.

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

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

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

83. 83.

    onde usar?

84. 84.

    None
85. 85.

    None
86. 86.

    STATUS battery

87. 87.

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

    de um dispositivo. battery status
88. 88.

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

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

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

90. 90.

    onde usar?

91. 91.

    None
92. 92.

    None
93. 93.

    WEBVR

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

    BROWSER support chromestatus.com/features#webvr

96. 96.

    None
97. 97.

    shape detection

98. 98.

    É capaz de detectar diferentes formas em imagens como rostos,

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

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

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

     None
101. 101.

     BROWSER support under developm ent

102. 102.

     onde usar?

103. 103.

     None
104. 104.

     WEB assembly

105. 105.

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

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

     under developm ent BROWSER support

107. 107.

     None
108. 108.

     gamepad

109. 109.

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

     game via USB. gamepad
110. 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. 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. 112.

     caniuse.com/#feat=gamepad BROWSER support

113. 113.

     None
114. 114.

     web components templates custom elements shadow dom html imports

115. 115.

     progressive web apps service workers push notifications offline support app

     manifest background sync web usb bluetooth
116. 116.

     None
117. 117.

     Where the magic happens Your comfort zone

118. 118.

     obrigado @zenorocha muito