JavaScript — Navigator

The navigator object

console.log(navigator);

A grab-bag of browser/device info and capability APIs.

Language

navigator.language;     // "en-US" — user's preferred language
navigator.languages;    // ["en-US", "hi", "es"]

Useful for localization decisions (server negotiation still matters for real i18n).

Online status

navigator.onLine;   // boolean

Plus events:

window.addEventListener("offline", () => console.log("Offline"));
window.addEventListener("online",  () => console.log("Back online"));

onLine is a rough signal — it can't confirm your API specifically is reachable.

User agent & platform — don't rely on them

navigator.userAgent;    // long identification string
navigator.platform;     // legacy, inconsistent

UA strings are historically falsified and increasingly frozen. Feature detection beats sniffing:

// BAD:  if (ua.includes("Chrome")) …
// GOOD: if ("clipboard" in navigator) …

Misc capabilities

navigator.cookieEnabled;          // boolean
navigator.hardwareConcurrency;    // logical CPU estimate (support varies)

Geolocation

if ("geolocation" in navigator) {
    navigator.geolocation.getCurrentPosition(
        position => {
            position.coords.latitude;
            position.coords.longitude;
            position.coords.accuracy;
        },
        error => console.error(error.code, error.message)
        // 1=permission denied · 2=unavailable · 3=timeout
    );
}

Continuous tracking:

const id = navigator.geolocation.watchPosition(p => update(p.coords));
navigator.geolocation.clearWatch(id);   // stop

Permission is always user-controlled.

Permissions API

Query state without prompting:

const status = await navigator.permissions.query({ name: "geolocation" });
status.state;   // "granted" | "denied" | "prompt"

Clipboard & Share

await navigator.clipboard.writeText("Copied!");

if (navigator.share) {                      // mobile-native share sheet
    await navigator.share({
        title: "My page",
        text: "Check this out",
        url: location.href,
    });
}

Both need secure contexts; clipboard read needs permission.

Mini Practice

1. Log language + languages; try switching browser language.
2. Offline banner via the offline/online events.
3. Request geolocation; handle all three error codes distinctly.
4. Query geolocation permission state before offering a "near me" button.
5. Copy-to-clipboard button with feature detection fallback message.
6. Share button that appears only when navigator.share exists.

Next: timing →