Web APIs

index.js

// PAGE VISIBILITY
window.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('TAB is hidden');
  } else {
    console.log('TAB is visible');
  }
});

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 visible');
      break;
  }
});

// ONLINE STATE
navigator.onLine;

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

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

// VIBRATION
navigator.vibrate(1000); // on
navigator.vibrate(0); // off
navigator.vibrate([400, 300, 300, 200, 500]); // pattern vibrate, wait, vibrate, wait, vibrate

// DEVICE ORIENTATION
window.addEventListener('deviceorientation', (e) => {
  console.log(e.gamma, e.beta, e.alpha);
});

// CLIPBOARD
/// 1. User interaction
let button = document.querySelector('button');

button.addEventListener('click', () => {
  select();
  copy();
});

// 2. Select an element
function select() {
  let input = document.querySelector('input');
  
  input.focus();
  input.setSelectionRange(0, input.value.length);
}

// 3. Copy
function copy() {
  try {
    document.execCommand('copy');
  } catch(err) {
    console.error(err);
  }
}

// AMBIENT LIGHT
window.addEventListener('devicelight', (e) => {
  console.log(`${e.value} lux`);
});

// BATTERY STATUS
navigator.getBattery().then(battery => {
  console.log(`${battery.level * 100}%`);
  
  battery.addEventListener('levelchange', () => {
    console.log(`${this.level * 100}%`);
  });
});

// Web VR
// Web Assembly

// GAMEPAD
window.addEventListener('gamepadconnected', () => {
  let gp = navigator.getGamepads()[0];
  
  console.log(gp.id, gp.axes.length, gp.buttons.length);
});

window.addEventListener('gamepadconnected', gameLoop);

function gameLoop() {
  let gp = navigator.getGamepads()[0];
  
  if (gp.buttons[0].pressed) {
    console.log('X');
  }
  
  requestAnimationFrame(gameLoop);
}