Advance JavaScript (DOM, BOM, Web API) / Browser Object Model (BOM)

Navigator

📌 What is navigator?

The navigator object provides information about the browser, device, and user environment.

👉 It is part of the BOM and accessed via window.navigator.

window.navigator === navigator // true

🧩 Common navigator Properties

1️⃣ navigator.userAgent

console.log(navigator.userAgent);

Explanation:

Returns a string containing browser, OS, and device details.

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 Chrome/142.0.0.0 Safari/537.36

2️⃣ navigator.platform

console.log(navigator.platform);

Explanation:

Returns the operating system platform.

MacIntel

3️⃣ navigator.language

console.log(navigator.language);

Explanation:

Returns the browser’s default language.

en-US

4️⃣ navigator.languages

console.log(navigator.languages);

Explanation:

Returns an array of preferred languages.

["en-US", "en"]

5️⃣ navigator.onLine

console.log(navigator.onLine);

Explanation:

Checks whether the browser is online or offline.

true

🌐 Browser Capabilities

6️⃣ Cookies Enabled

console.log(navigator.cookieEnabled);

Explanation:

Checks if cookies are allowed.

true

7️⃣ Java Enabled (Legacy)

console.log(navigator.javaEnabled());

Explanation:

Checks if Java is enabled (mostly obsolete now).

false

📍 Location & Device APIs

8️⃣ Geolocation

navigator.geolocation.getCurrentPosition(
  position => {
    console.log(position.coords.latitude, position.coords.longitude);
  },
  error => {
    console.log("Permission denied");
  }
);

Explanation:

  • Gets user’s location

  • Requires user permission

  • Works only on HTTPS

22.5726 88.3639

9️⃣ Clipboard Access

navigator.clipboard.readText().then(text => {
  console.log(text);
});

Explanation:

Reads text from clipboard (permission required).

Copied text

🧠 Feature Detection

if ("geolocation" in navigator) {
  console.log("Geolocation supported");
}

Explanation:

Checks if a feature is supported before using it.

Geolocation supported

🆚 navigator Use Cases

Use Case

Example

Detect language

Localization

Online status

Offline apps

Device info

Adaptive UI

Permissions

Location, clipboard

⭐ Important Notes

  • Info can be inaccurate or spoofed

  • Do feature detection, not browser detection

  • Many APIs need user permission

✅ Summary

  • navigator gives browser & device info

  • Used for feature detection and environment checks

  • Part of BOM, under window