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
- 1Check connectivity status: navigator.onLine in browser console
- 2Listen for changes: window.addEventListener('online', handler) and window.addEventListener('offline', handler)
- 3For reliable detection: periodically fetch a known resource (e.g., /api/ping) rather than trusting navigator.onLine
- 4Implement offline fallback: use a service worker to serve cached pages when fetch fails
- 5Queue actions while offline: store pending requests in IndexedDB and sync when back online
- 6Show user-friendly offline message instead of browser error pages
Tags
offlineonlineconnectivityservice-workernetwork-status
Related Items
More in General
printer-offlinePrinter Offline Error
Warningdriver-unavailablePrinter Driver Is Unavailable
Warningspooler-errorPrint Spooler Error
Warningpcl-xl-errorPCL XL Error — Subsystem Kernel
Warningprinter-duplex-printing-errorsPrinter Duplex (Double-Sided) Printing Errors — Jams, Alignment & Blank Pages
Warningprinter-usb-connection-errorsUSB Printer Errors — Not Detected, Driver Issues, and Connection Troubleshooting
WarningFrequently 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.