What Web Can Do Today?

Can I rely on the Web Platform features to build my app?

An overview of the device integration HTML5 APIs

Online State

Browsers expose a network connection availability information to the Web application, so that the applications may react properly, i.e. stop all the operations utilising the network and switch to cached data when offline condition was detected.

API glimpse

navigator.onLine
Returns true when the browser detects network connection available, false otherwise.
window.addEventListener('online', listener)
An event fired when the browser detects network connection has become available.
window.addEventListener('offline', listener)
An event fired when the browser detects network connection has become unavailable.

Live Demo

Turn the network connection on/off to see the changes.

Initial connection state was unknown.

  • document.getElementById('status').innerHTML = navigator.onLine ? 'online' : 'offline';

var target = document.getElementById('target');

function handleStateChange() {
  var timeBadge = new Date().toTimeString().split(' ')[0];
  var newState = document.createElement('p');
  var state = navigator.onLine ? 'online' : 'offline';
  newState.innerHTML = '<span class="badge">' + timeBadge + '</span> Connection state changed to <b>' + state + '</b>.';
  target.appendChild(newState);
}

window.addEventListener('online', handleStateChange);
window.addEventListener('offline', handleStateChange);
  • <p>Turn the network connection on/off to see the changes.</p>

<p>Initial connection state was <b id="status">unknown</b>.</p>

<div id="target"></div>

Resources

Get in touch