The developers of the Chatogram web application encountered issues detecting offline mode on iPhones. While testing, they discovered that navigator.onLine remains true and no offline events are triggered when an iPhone is in airplane mode. Standard browser developer tools, such as the Offline mode in Chrome, failed to replicate this behavior, as they simulate a network error rather than a silent connection.
To address this, the team implemented a custom network probe using a version.json file with a 2-second timeout. This approach treats both network errors and silent connections as offline states. The probe uses an AbortController to ensure only one request is active at a time, preventing a backlog of requests that would otherwise flood the server once connectivity is restored.
The team also identified that service workers failed to install for new users due to missing files in the pre-cache list, which caused the cache.addAll method to fail. They implemented a build-time check to prevent such errors. Additionally, they added clients.claim() to ensure that the service worker takes control of the page immediately upon the first visit, even if the user is offline.
These findings led to four core rules for offline-capable web apps: navigator.onLine is unreliable on iOS, silent network connections must be treated as offline, every fetch request in offline-prone scenarios requires a timeout, and build processes should fail if pre-cache lists contain non-existent files.
