There's a bunch of Web APIs that are pretty usable today:
- Detect page visibility:
window.addEventListener('visibilitychange', () => {
console.log(document.visibilityState); // prerender | hidden | visible
});
console.log(document.visibilityState); // prerender | hidden | visible
});
- Detect online state:
window.addEventListener('offline', () => {});
window.addEventListener('online', () => {});
console.log(navigator.onLine); // bool
window.addEventListener('online', () => {});
console.log(navigator.onLine); // bool
- Vibration:
navigator.vibrate(50); // ms
navigator.vibrate([50, 20, 50]); // pattern (vibrate, wait, ...)
navigator.vibrate(0); // stop vibrating
navigator.vibrate([50, 20, 50]); // pattern (vibrate, wait, ...)
navigator.vibrate(0); // stop vibrating
- Detect orientation:
window.addEventListener('deviceorientation', e => {
console.log(e.gamma);
console.log(e.beta);
console.log(e.alpha);
});
console.log(e.gamma);
console.log(e.beta);
console.log(e.alpha);
});
...and more! clipboard, ambient light detection, battery status, etc.