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...
- MDN
- OBS
- Suportado nos Mobiles
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));
});
- MDN
- MDN
- W3C
- Importante:
- MDN - Network Information API (Tipos de conexão, 2G, 3G, 4G, etc..)
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
function updateOnlineStatus(e) {
console.log(e.type);
}
Download speed
navigator.connection.downlink // 9.1 (Trabalho)
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
Evento que retorna o sensor de luz do device
- MDN
- W3C
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)
let batteryIsCharging = false;
navigator.getBattery().then(function(battery) {
batteryIsCharging = battery.charging;
battery.addEventListener('chargingchange', function() {
batteryIsCharging = battery.charging;
});
});
- Medium
- WICG (Mais completa)
- 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);
});
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);
});
- Templates
- HTML imports
- Custom elements
- Shadom DOM
- Push notifications
- App manifest
- Offline support
- Payment request
- Service workers
- Background sync