Skip to main content

JavaScript Storage & BOM

JavaScript navigator Object

Written by Published

navigator describes the browser and device running the page.

It is mostly used to check what the browser can do, not what it is.

Checking for a feature directly is more reliable than checking the browser's name.

Example

Example

javascript

console.log(typeof navigator.onLine);
console.log(typeof navigator.language);

The output is boolean then string.

Useful Properties

onLine - whether the browser believes it has a connection.

language - the browser's preferred language.

clipboard and geolocation - access to device features.

Syntax

Syntax

javascript

navigator.onLine;
navigator.language;

Most navigator features need permission from the visitor.

Checking the Connection

Useful for showing an offline message.

Example

Example

javascript

console.log(typeof navigator.onLine);

window.addEventListener("online", function () {
  console.log("back online");
});
window.addEventListener("offline", function () {
  console.log("lost the connection");
});

The events fire when the connection genuinely changes.

Reading the Language

This is how a site can offer content in the visitor's language.

Example

Example

javascript

console.log(navigator.language);
console.log(Array.isArray(navigator.languages));

languages lists every preference in order.

Feature Detection, Not Browser Detection

Check for the feature itself rather than reading the browser name.

Browser names change and can be spoofed; feature checks cannot.

Example

Example

javascript

function supportsClipboard() {
  return typeof navigator.clipboard !== "undefined";
}

console.log(supportsClipboard());

This works correctly regardless of which browser it is.

Copying to the Clipboard

navigator.clipboard.writeText returns a promise.

Example

Example

javascript

console.log(typeof navigator.clipboard.writeText);

Calling it usually needs the action to come from a genuine user click.

Avoid userAgent Sniffing

Parsing the user agent string to detect the browser is fragile and discouraged.

Feature checks age far better as browsers change.

Example

Example

javascript

console.log(typeof navigator.userAgent);

It still exists, mostly for logging, not for making decisions.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript navigator Object</title>
</head>
<body>

  <h1>The navigator Object</h1>

  <p id="out"></p>

  <script>
    const out = document.getElementById("out");

    out.innerHTML =
      "Online: " + navigator.onLine +
      "<br>Language: " + navigator.language +
      "<br>Clipboard supported: " + (typeof navigator.clipboard !== "undefined");

    window.addEventListener("offline", function () {
      out.textContent = "You are offline";
    });
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try feature checking:

Check typeof navigator.geolocation as well.

Important Points

  • navigator.onLine reports the connection state.
  • navigator.language gives the preferred language.
  • Prefer checking for a feature over checking the browser name.
  • navigator.clipboard gives clipboard access, with permission.
  • userAgent sniffing is fragile and best avoided.

Conclusion

navigator describes the environment the page is running in.

The properties are mostly there to help the page adapt sensibly.

Feature detection is the reliable way to use any of it.