Web APIs que você provavelmente não sabia que existiam - Zeno Rocha - https://youtu.be/851mizGnr_Y

Web-API-Não-Sabia-Zeno Rocha.md

Evento Visibility Change

• MDN
  • https://developer.mozilla.org/en-US/docs/Web/Events/visibilitychange

Exemplos:

Com document:

document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
});

Com window:

window.addEventListener("visibilitychange", function() {
  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;
  }
});

Casos de uso: Exemplos do Zeno no vídeo: https://youtu.be/851mizGnr_Y?t=456 (OBS: Tempo certo)

• Pausar/Retomar carrousel
• Pausar/Retomar vídeos
• etc...

Web Share

• MDN
  • https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
• OBS
  • Suportado nos Mobiles

Exemplos:

shareButton.addEventListener('click', () => {
   navigator.share({
     title: document.title,
     text: 'Hello World',
     url: window.location.href,
   })
   	.then(() => console.log('Successful share'))
   	.catch(error => console.log(error));
});

Print

Online State

• MDN
  • https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events#Example
• MDN
  • https://developer.mozilla.org/pt-BR/docs/WebAPI/Network_Information
• W3C
  • https://www.w3.org/TR/netinfo-api/
• Importante:
  • MDN - Network Information API (Tipos de conexão, 2G, 3G, 4G, etc..)
    • https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API

window.addEventListener('online',  updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);

function updateOnlineStatus(e) {
	console.log(e.type);
}

Download speed

navigator.connection.downlink // 9.1 (Trabalho)

Device Orientation

• MDN
  • https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

window.addEventListener('deviceorientation', e => {
	let tiltLR = e.gamma;
	let tiltFB = e.beta;
	console.log('Gamma:', e.gamma);
	console.log('Beta:', e.beta);
	console.log('Alpha:', e.alpha);
	
	// Exemplo do Zeno
	// Tempo do vídeo: https://youtu.be/851mizGnr_Y?t=883
	logo.style.transform = `rotate(${tiltLR}deg) rotate3d(1, 0, 0, ${tiltFB * -1}deg) `;
});

Caso de uso:

• Imagem 3D do Facebook

Ambient Light

Evento que retorna o sensor de luz do device

• MDN
  • https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent
• W3C
  • https://www.w3.org/TR/generic-sensor/

window.addEventListener('devicelight', function(event) {
  console.log(`${event.value} lux`);
});

Caso de uso:

• No vídeo
• https://youtu.be/851mizGnr_Y?t=1436 (OBS: Tempo certo)

Battery Status

OBS: API Obsoleto

• MDN
  • https://developer.mozilla.org/pt-BR/docs/Web/API/Navigator/getBattery

let batteryIsCharging = false;

navigator.getBattery().then(function(battery) {
  batteryIsCharging = battery.charging;

  battery.addEventListener('chargingchange', function() {
    batteryIsCharging = battery.charging;
  });
});

WEB VR

Realidade Virtual

• MDN
  • https://developer.mozilla.org/pt-BR/docs/Web/API/WebVR_API

Shape detection

Detecta rostos

• Medium
  • https://medium.com/@caio_gondim/javascript-native-face-detection-309a28248c52
• WICG (Mais completa)
  • https://wicg.github.io/shape-detection-api/
• OBS:
  • É necessário ativar a flag do browser

const faceDetector = new FaceDetector();

faceDetector.detect(image).then(faces => {
	console.log('Face found:', faces.length);
}).catch(err => {
	console.error(err);
});

Web Assembly

• MDN
  • https://developer.mozilla.org/pt-BR/docs/WebAssembly

Gamepad

Controlar a página web usando controle

• MDN
  • https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API

Retirado do vídeo:

window.addEventListener('gamepadconnected', () => {
	const gp = navigator.getGamepads()[0];

	console.log('ID:', gp.id);
	console.log('Axes:', gp.axes.length);
	console.log('Buttons:', gp.buttons.length);
});

window.addEventListener('gamepadconnected', () => {
	const gp = navigator.getGamepads()[0];

	if (gp.buttons[0].pressed) {
		console.log('X');
	}
	
	requestAnimationFrame(gameloop);
});

Retirado do MDN:

window.addEventListener("gamepadconnected", function(e) {
  console.log("Gamepad connected at index %d: %s. %d buttons, %d axes.",
    e.gamepad.index, e.gamepad.id,
    e.gamepad.buttons.length, e.gamepad.axes.length);
});

Web Components

• Templates
• HTML imports
• Custom elements
• Shadom DOM

Progressive Web Apps

• Push notifications
• App manifest
• Offline support
• Payment request
• Service workers
• Background sync

fim