Zeno Rocha, Principal Developer Advocate da Liferay fala sobre Web APIs que você provavelmente não sabia que existiam no JS Experience'17 Saiba mais em https://eventos.imasters.com.br/jsexperience

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

2. @zenorocha

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

22. canvassvg
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

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?

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?

37. underdevelopm
ent
BROWSER
support

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

45. let type = navigator.connection.type;
// ex: bluetooth, cellular, ethernet, wifi
let max = navigator.connection.downlinkMax;
// in megabits
network info

46. onde
usar?

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?

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?

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

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

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

73. onde
usar?

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

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?

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?

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

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

101. BROWSER
support
underdevelopm
ent

102. onde
usar?

104. WEBassembly

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

106. underdevelopm
ent
BROWSER
support

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

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

117. Where
the magic
happens
Your
comfort zone

118. obrigado
@zenorocha
muito