Useful HTML5 Web API uses, most change in the future, and have limited browser support, so be sure to look these up before implementing them. src: https://www.youtube.com/watch?v=NCGLPp778JY

ambientLight.js

// Listen for ambient lighting in room
window.addEventListener('devicelight', (e) => {
  console.log(`${e.value} lux`);
});

batteryStatus.js

// Check battery status of device through the browser
navigator.getBattery().then((battery) => {
  console.log(`${battery.level * 100}%`);
  
  battery.addEventListener('levelchange', () => {
    console.log(`${this.level * 100}%`);
  });
});

deviceOrientation.js

// Listen for device orientatin
window.addEventListener('deviceorientation', (e) => {
  console.log('Gamma: ', e.gamma);
  console.log('Beta: ', e.beta);
  console.log('Gamma: ', e.alpha);
});

onlineState.js

// Check if user is online of offline
console.log(navigator.onLine ? 'online' : 'offline');

tabVisibility.js

// Event listener switch for visible tab using Page Visibility
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;
  }
};