Error Codes Wiki

Browser Offline Detection — Network Status API and Offline Error Handling

Informationalgeneral

Overview

Handle browser offline errors using the Network Information API, online/offline events, and implementing graceful offline experiences in web applications.

Key Details

  • navigator.onLine property indicates if the browser has a network connection (but not internet access)
  • Online/offline events fire on the window object when connectivity changes
  • Chrome shows 'ERR_INTERNET_DISCONNECTED' or the dinosaur game when offline
  • Service workers can intercept fetch requests and serve cached content while offline
  • navigator.onLine can be unreliable — it reports true on LAN connection even without internet access

Common Causes

  • Physical network disconnection (WiFi dropped, Ethernet unplugged)
  • DNS resolution failure making it appear as if the network is down
  • Captive portal (hotel/airport WiFi) requiring login before internet access
  • VPN disconnection leaving routing table in a broken state
  • Server-side outage misinterpreted as client offline status

Steps

  1. 1Check connectivity status: navigator.onLine in browser console
  2. 2Listen for changes: window.addEventListener('online', handler) and window.addEventListener('offline', handler)
  3. 3For reliable detection: periodically fetch a known resource (e.g., /api/ping) rather than trusting navigator.onLine
  4. 4Implement offline fallback: use a service worker to serve cached pages when fetch fails
  5. 5Queue actions while offline: store pending requests in IndexedDB and sync when back online
  6. 6Show user-friendly offline message instead of browser error pages

Tags

offlineonlineconnectivityservice-workernetwork-status

Related Items

More in General

Frequently Asked Questions

Not entirely. It reports true if any network interface is connected, even without internet. A LAN-only connection shows online. For reliable detection, combine with actual server reachability checks.