Battery & Network Monitor: Live Charge, RTT, and Connection Quality
Read battery level, charging time, effective connection type, downlink speed, and RTT in the browser with the Battery Status and Network Information APIs.
Table of Contents
When a page feels slow, the cause is often the device, not the code. A laptop on 8% battery, a phone on a 2G-class link, or a user with Data Saver enabled will all behave differently from a plugged-in desktop on fiber. The Battery & Network Status Monitor reads those conditions in real time using navigator.getBattery() and navigator.connection, so you can see what the browser already knows about charge and connectivity.
Nothing is uploaded. The dashboard stays in your tab, updates on Battery Status and Network Information events, and shows a clear unsupported message when an API is missing. That makes it useful for QA, field debugging, and teaching how Navigator APIs work.
This guide covers what each metric means, how the UI maps to the APIs, and when you should trust the numbers versus treating them as hints.
Why Use Battery & Network Status Monitor?
- See charge and charging at a glance. Level is shown as a percent with a color bar. Charging versus discharging is a badge, so you do not have to guess from the OS tray.
- Estimate time to full or empty. When the Battery API reports finite chargingTime or dischargingTime, the tool formats hours and minutes. Infinity becomes “Unknown,” which is honest about what the OS actually exposes.
- Read connection class, not just online/offline. Effective type (4g, 3g, 2g) plus a Fast / Good / Slow badge is closer to how Chromium classifies the link than a simple wifi icon.
- Quantify downlink and RTT. Downlink is shown in Mbps and round-trip time in milliseconds—the same fields Adaptive Loading recipes use to pick image quality or postpone analytics.
- Respect Data Saver. saveData is surfaced as yes/no so you can confirm whether the user (or the browser) asked for a lighter experience.
- Stay private. Values never leave the device. There is no account, no telemetry, and no server round trip to populate the cards.
Key Features
| Feature | What you get |
|---|---|
| Battery card | Level, charging badge, time to full, time to empty |
| Network card | Online status, connection type, effective type, quality, downlink, RTT, Data Saver |
| System summary | Four tiles repeating battery %, effective type, downlink, and RTT |
| Live updates | Listeners for levelchange, chargingchange, change, online, and offline |
| Support fallback | Copy when Battery or Network Information APIs are unavailable |
- Color-coded battery bar. Above 75% green, then yellow, orange, and red under 25%, matching the large battery icon.
- Quality mapping. Effective type 4g is labeled Fast, 3g Good, 2g Slow. Other values fall back to Unknown.
- Client-side only. The page is a static tool; measurements come from the browser, not a speed-test server.
How to Use
- Open the Battery & Network Status Monitor on the device you care about (laptop, phone, or tablet). Desktop Chrome and Edge typically expose both APIs; Safari often lacks Battery Status and may omit Network Information.
- Wait a second for the Battery and Network cards to leave the loading state. If you see the not-supported message, switch browsers or treat that half of the dashboard as unavailable.
- Check battery level and charging. Plug or unplug power and watch the badge and time estimates update without a reload.
- Check network. Toggle airplane mode or switch Wi-Fi / cellular if you can, then confirm online/offline, effective type, downlink, and RTT.
- Use the system status row as a snapshot: battery percent, effective type, downlink Mbps, and RTT in one glance for screenshots or bug reports.
Understanding Battery Status and Network Information
The Battery Status API exposes a BatteryManager. level is a fraction from 0 to 1; the tool multiplies by 100 and rounds. charging is a boolean. chargingTime and dischargingTime are seconds, or Infinity when the OS will not estimate. Event names (levelchange, chargingchange, chargingtimechange, dischargingtimechange) are why the UI can update while the tab stays open.
The Network Information API hangs off navigator.connection (sometimes mozConnection / webkitConnection in older engines; this tool uses the standard connection path). Important fields:
- type: coarse transport (wifi, cellular, ethernet, or unknown). Useful for logging, not a guarantee of speed.
- effectiveType: a quantized class (slow-2g, 2g, 3g, 4g) derived from observed RTT and downlink. Chromium uses this for Adaptive Loading. It is not a lab measurement of your ISP.
- downlink: estimated megabits per second. Treat it as an order-of-magnitude hint. It will not match a dedicated speed test.
- rtt: estimated round-trip time in milliseconds on the HTTP connection the browser uses for the estimate.
- saveData: true when the user enabled Data Saver or an equivalent preference.
navigator.onLine is separate: it tells you whether the browser thinks it has a network path, not whether your API is reachable. The tool listens to online / offline window events so the badge can flip if you cut the connection.
Browser support is uneven on purpose. Firefox dropped Battery Status for fingerprinting reasons. Safari support for Network Information is limited. The dashboard’s unsupported copy is a feature: it documents the environment instead of inventing zeros.
Privacy note: these APIs can contribute to fingerprinting. This page only displays values locally. Do not log them to a backend without a clear product need and consent story.
Practical Use Cases
Adaptive UI during QA
Before you ship a “lite mode,” sit on a throttled phone and open the monitor. If effective type is 3g and saveData is true, you should see your product degrade the same way. If the monitor says 4g while your UI still loads huge videos, the problem is your heuristics, not the network.
Field bug reports
Ask a reporter to screenshot the four system tiles. Battery at 6% plus RTT of several hundred milliseconds explains jank that you cannot reproduce on a docking station. Pair with User Agent Parser when the ticket also needs browser and OS strings.
Hardware and camera sessions
Live video and USB accessories drain charge and hate high RTT. Use this dashboard beside Camera Tester or USB Device Info Viewer when a capture session fails: confirm you are not on a dying battery and a congested cellular hop at the same time.
Teaching Navigator APIs
Workshops often jump straight to fetch. Showing Battery and Network cards first makes Adaptive Loading concrete: students can unplug, toggle Data Saver, and watch downlink and RTT move. The Infinity → Unknown path is a good lesson in not treating every number as a promise.
Best Practices
- Treat downlink and RTT as hints. Design fallbacks with effectiveType and saveData, then measure real page metrics. Do not gate checkout on a single downlink reading.
- Handle missing APIs. Feature-detect getBattery and connection. The tool already does this; copy that pattern in production instead of assuming Chrome-on-Android everywhere.
- Do not fingerprint casually. If you send battery or network fields to analytics, aggregate and document it. Prefer coarse buckets over raw percents and milliseconds.
- Re-check after power and radio changes. Estimates lag. After plugging in or switching networks, wait for the next event before you trust time-to-empty.
- Use a Chromium browser for the full dashboard. Expect Battery Status to be absent in Firefox and incomplete Network Information in Safari.
- Screenshot the system row for tickets. Four numbers beat a paragraph of “my wifi was weird.”
Need a live readout of charge and connection class without installing a system utility? Open the Battery & Network Status Monitor, leave the tab visible while you plug in or change networks, and capture the tiles for your next bug report.
Related Tools You Might Like:
- Camera Tester — preview webcam streams and device labels in the browser
- USB Device Info Viewer — inspect WebUSB vendor and product details
- User Agent Parser — decode browser, engine, and OS from the UA string
Stay charged and know your RTT.