With the offline APIs in HTML5, there's no excuse not to provide a flawless offline experience for users. One thing that can help this story is the navigator.onLine
property; a feature that recently landed in Chrome dev channel. This property returns true
or false
depending on whether or not the app has network connectivity:
if (navigator.onLine) {
console.log('ONLINE!');
} else {
console.log('Connection flaky');
}
A web app can also listen for online
and offline
events to determine when the connection is available again or when an app goes offline:
window.addEventListener('online', function(e) {
// Re-sync data with server.
}, false);
window.addEventListener('offline', function(e) {
// Queue up events for server.
}, false);
I've posted a working demo at http://html5-demos.appspot.com/static/navigator.onLine.html and more information on offline events can be found in the MDN.