language
Preferred browser language.
Platform under construction
Navigator
navigator exposes information about the browser, device capabilities and connection context.
console.log(navigator.language); console.log(navigator.onLine); console.log(navigator.userAgent);
Browser APIs & BOM
Use navigator for capability checks, not fragile browser guesses.
navigator contains browser and device information such as language, online status and supported APIs.
Some navigator values are privacy-sensitive, reduced or unreliable. Feature detection is usually better than user-agent detection.
When you use navigator data, treat it as a hint, not as a perfect identity for the user or device.
onLine
Browser online/offline hint.
userAgent
Legacy browser identification string.
capabilities
APIs such as clipboard, geolocation and serviceWorker are exposed through navigator.
Examples
Browser APIs should be used with capability checks, permissions and fallbacks.
Check for a capability directly
if ("clipboard" in navigator) {
enableCopyButton();
} else {
showManualCopyFallback();
}
Guessing behavior from userAgent
if (navigator.userAgent.includes("Chrome")) {
enableFeature();
}
Code patterns
Reusable examples for quick reference.
These examples focus on practical browser APIs: URL state, storage, cookies, clipboard, permissions, observers and offline-capable platform tools.
Read language
Useful for formatting defaults.
const locale = navigator.language;
Online hint
Check and listen for changes.
console.log(navigator.onLine);
window.addEventListener("online", updateStatus);
window.addEventListener("offline", updateStatus);
Feature detection
Check whether an API exists.
if ("clipboard" in navigator) {
console.log("Clipboard supported");
}
Avoid user-agent branching
Prefer feature detection.
if ("serviceWorker" in navigator) {
registerWorker();
}
Rules that matter
Treat the browser as a platform.
Browser APIs are powerful because they touch privacy, navigation, storage, permissions and performance. Use them deliberately.
Prefer feature detection
Ask whether the API exists.
Treat onLine as a hint
A network can be present while the server is unreachable.
Respect privacy
Do not collect navigator data without a reason.
Avoid user-agent logic
It is brittle and often misleading.
Use locale thoughtfully
Language affects formatting, not necessarily user identity.
Provide fallbacks
Capabilities vary between browsers and contexts.
Production thinking
A strong browser API layer makes features feel integrated with the platform instead of bolted onto the page.
Why does this matter?
navigator helps adapt to capabilities without hard-coding browser assumptions.
Accessibility
Capability checks should lead to usable fallbacks, not disabled experiences.
Production note
Production browser-feature code should detect APIs, handle absence and avoid unnecessary fingerprinting.
SEO note
Feature detection keeps client-side behavior reliable across crawlers and browsers.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Add another capability check.
- Listen for online and offline events.
- Explain why userAgent is not ideal.
Practice assignment
Do this before moving to the next topic.
- Read navigator.language.
- Check one capability.
- Design one fallback.
Try it yourself
Inspect navigator hints
Self-check
Before you continue, prove that you understand Navigator.
If you can explain support, permissions, fallback and cleanup, you are ready to use the API responsibly.
- Can you explain navigator?
- Can you explain feature detection?
- Can you explain navigator.onLine limits?
- Can you explain why userAgent checks are brittle?
- Can you explain privacy concerns?
Senior audit upgrade
Extra production context for Navigator.
Privacy and fallback checklist
- Ask for permission only when the user understands why.
- Handle denied, unsupported and unavailable states.
- Avoid storing sensitive data in browser storage by default.
- Do not make critical content depend on a permission prompt.