Browser Offline Detection — Network Status API and Offline Error Handling

Handle browser offline errors using the Network Information API, online/offline events, and implementing graceful offline experiences in web applications. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.

Here are the key things to understand: 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. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.

The most common reasons this occurs include: 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. Identifying the root cause is the first step toward finding the right solution.

To resolve this, follow these recommended steps: Check connectivity status: navigator.onLine in browser console. Listen for changes: window.addEventListener('online', handler) and window.addEventListener('offline', handler). For reliable detection: periodically fetch a known resource (e.g., /api/ping) rather than trusting navigator.onLine. Implement offline fallback: use a service worker to serve cached pages when fetch fails. Queue actions while offline: store pending requests in IndexedDB and sync when back online. Show user-friendly offline message instead of browser error pages. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.

This article is part of our Browser Errors collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.