Offline Detection

Detect online/offline status with the navigator.onLine property and online/offline events to show appropriate UI.

Example

$(window).on("online offline", function() {
  const online = navigator.onLine;
  if (online) {
    $("#offline-banner").hide();
    // Re-sync queued actions
    processOfflineQueue();
  } else {
    $("#offline-banner").show().text("You are offline. Changes will sync when reconnected.");
  }
});
// Check on load
if (!navigator.onLine) $("#offline-banner").show();
// Queue actions for later sync
const offlineQueue = [];
function queueAction(action) {
  if (navigator.onLine) action();
  else offlineQueue.push(action);
}

JAVASCRIPT

Full Editor

Pro Tip

navigator.onLine can be true even with a slow connection — verify with an actual HTTP request for critical checks.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned