オンライン状態によって、#status のテキストを変更する

body ononline="update(true)" onoffline="update(false)" onload="update(navigator.onLine)"
      

function update(online) {
  document.querySelector('#status').textContent =
  online ? 'Online' : 'Offline';
}
      

ネットワーク接続情報を #network に表示する

const connectionInfo = navigator.connection;
if (connectionInfo !== undefined) {
  const init = function() {
    document.getElementById('network').innerHTML =
    'Network Type ' + connectionInfo.effectiveType + ' ' + connectionInfo.type + ' | '
    + 'Downlink ' + connectionInfo.downlink + ' Mb/s | '
    + 'RTT '+ connectionInfo.rtt + ' ms'
  }
  init()

  if ('onchange' in connectionInfo) {
    connectionInfo.addEventListener('change', init)
  } else if ('ontypechange' in connectionInfo) {
    connectionInfo.addEventListener('typechange', init)
  }
}
      

端末のおよそのメモリ量／論理プロセッサーのコア数を #navigator に表示する

const memory = navigator.deviceMemory;
const hardware = navigator.hardwareConcurrency;
document.querySelector('#navigator').innerHTML = `This Device has at least ${memory} GiB of RAM | ${hardware} CPU available.`;