Platform-specific apps on phones and computers share one behavior: they always render something. Open the Google Assistant app, Slack, or Zoom without a network connection and the app still launches and stays in control. The content may be useless or the task impossible, but the user is never left staring at nothing. The Web traditionally behaves the opposite way — go offline and you get nothing, apart from Chrome's offline dino game.
Service workers and the Cache Storage API close that gap. With them you can serve a branded page explaining that the user is offline, or something more elaborate along the lines of the trivago offline maze game, which pairs a manual Reconnect button with an automatic reconnection attempt countdown.
The service worker
Registration happens from the main page, usually once the app has loaded.
The service worker file itself can look involved, but the logic is narrow: pre-cache a file called offline.html and serve it only for failing navigation requests, leaving every other case to the browser.
Designing offline.html
This is the file to brand and shape however you like. A minimal version can cover both reconnection paths: a manual reload triggered by a button press, and an automatic reload watching the online event plus regular server polling.
Demo and next steps
The demo shows the page in action, and the source code is available on GitHub.
Making the app installable is a separate step, requiring a web app manifest and optionally an install strategy.
If you would rather write less service worker code, Workbox, a set of JavaScript libraries for offline support, offers a recipe for an offline page only.
