Introduction
net-watch tells your app whether the user can really reach the internet, and how good the connection is.
net-watch is a small TypeScript library that answers two questions in the browser:
- Is the user really online? Not "is a network interface up", but "can this page reach a server".
- How good is the connection? Latency, a quality band from
excellenttopoor, download speed, and what the browser knows about the link.
It gives you one immutable state object, a way to subscribe to it, and an optional offline banner. The core has no dependencies. React, Vue and Angular get a tiny adapter each.
import { createNetworkWatcher } from '@net-watch/core'
const watcher = createNetworkWatcher({ pingUrl: '/api/ping' })
watcher.subscribe((state) => {
console.log(state.online, state.quality, state.rtt) // true 'good' 150
})Where to go next
Quick start
Install the package and get a working offline banner in a few minutes.
Why net-watch
What navigator.onLine gets wrong, and what existing libraries leave out.
How it works
The signals, the probe and the state machine behind the single state object.
Use it with AI
Ready-made prompts, llms.txt, and Markdown for every page.
Packages
| Package | Use it for |
|---|---|
@net-watch/core | The watcher, plus @net-watch/core/fetch (watchFetch) and @net-watch/core/banner (createBanner). No dependencies. |
@net-watch/react | useNetworkStatus() for React 18 and later. |
@net-watch/vue | useNetworkStatus() for Vue 3.3 and later. |
@net-watch/angular | injectNetworkStatus() for Angular 17 and later. |
All four packages share one version number. They run in Chrome and Edge 90, Firefox 90 and Safari 15 or newer; see browser support.