<pacem-online-status> tells your page whether the browser is connected, live: one online flag to bind wherever the network matters. It's the "You're offline" banner of every chat app, minus the script.

<pacem-online-status id="status"></pacem-online-status>

<pacem-button disabled="{{ !#status.online }}">send</pacem-button>

Usage

Bind it. online is true or false as soon as the element is up, then follows the browser's online/offline events. Disable what needs the network, show a banner, swap a label:

<pacem-panel hide="{{ #status.online }}">You're offline.</pacem-panel>

React to it. Every change is a propertychange, so a handler can run when the connection comes back (e.g. flush a queue):

<pacem-online-status on-propertychange="$this.online && #outbox.flush()"></pacem-online-status>

"Online" is the browser's opinion: it means a network is there, not that your server answers. A captive portal or a down API still reads as online, so keep handling errors on your <pacem-fetch>.

Pause the background work. Timers and fetchers have a disabled flag: bind it to !#status.online and polling stops while offline, then resumes by itself.

Examples

An outbox

Messages sent while offline wait in a queue, and go out as soon as the connection is back. Toggle offline in DevTools (Network ▸ Offline) to try it.

Polling that pauses offline

A timer refreshes the server's greeting every 3 seconds; offline, it's disabled, so no request goes out to fail.