JS Navigator

The navigator object describes the browser and the device it is running on: which language the person uses, whether they are online, how many processor cores the device has. It is also the doorway to newer features like the clipboard and location. This lesson covers what it tells you, why you should be careful how you use it, and the right way to check what a browser can do.

// Facts About the Browser

console.log(typeof navigator.language, Array.isArray(navigator.languages));
console.log(navigator.languages[0] === navigator.language);
console.log(typeof navigator.onLine, typeof navigator.cookieEnabled);
console.log(navigator.hardwareConcurrency >= 1);
console.log(typeof navigator.maxTouchPoints);

Log navigator.language and navigator.languages to see yours. The first entry of languages is always the same as language.

// Language and Formatting

navigator.language is useful for showing numbers, dates, and money the way the person expects, with the toLocaleString you met in JS Data Types:

const price = 1234567.891;
console.log(price.toLocaleString(navigator.language));
// "1,234,567.891" for en-US, "1.234.567,891" for de-DE

// The User Agent String

navigator.userAgent is a long piece of text each browser sends to every website to say who it is. It looks like this (shortened):

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36

It is a historical mess. Almost every browser starts with Mozilla/5.0 and mentions several other browsers for compatibility, so the text often names a browser it is not. Do not write code like "if the string contains Chrome, do this". It breaks constantly and shuts out browsers you did not think of.

// Feature Detection

Many newer abilities live on navigator. Before using one, check that it exists. The in operator asks whether a property is there:

console.log("geolocation" in navigator);
console.log("teleport" in navigator);

if ("clipboard" in navigator) {
  console.log("can use the clipboard");
} else {
  console.log("no clipboard here");
}

Code that checks first keeps working on older browsers instead of crashing with TypeError: Cannot read properties of undefined.

// Online and Offline

navigator.onLine is false when the device knows it has no network. The window fires "online" and "offline" events when that changes, which lets a page show a banner:

<p id="status"></p>

<script>
  function update() {
    document.getElementById("status").textContent =
      navigator.onLine ? "You are online" : "You are offline";
  }
  window.addEventListener("online", update);
  window.addEventListener("offline", update);
  update();
</script>

// The Clipboard

navigator.clipboard.writeText(text) copies text to the clipboard. It returns a promise, it works only on secure (https) pages, and it must be triggered by a user action such as a click. It can also be refused, so handle failure:

<button id="copy">Copy a message</button>
<p id="note"></p>

<script>
  document.getElementById("copy").addEventListener("click", async function () {
    try {
      await navigator.clipboard.writeText("Hello from my page");
      document.getElementById("note").textContent = "Copied";
    } catch (error) {
      document.getElementById("note").textContent = "Could not copy: " + error.name;
    }
  });
</script>

// Other Doors on navigator

• navigator.geolocation: the device's position (JS Geolocation lesson)
• navigator.share(): open the phone's share sheet
• navigator.mediaDevices: camera and microphone access
• navigator.serviceWorker: background scripts that make a page work offline

// Quick Check

console.log("teleport" in navigator);

// Try It

▶ Open Playground

1. Click Open Playground and run it. Compare your answers with a classmate's
2. Add a line that logs how many languages navigator.languages holds
3. Write an if that says "Touch screen" when navigator.maxTouchPoints is above 0
4. Check whether "share" in navigator is true on your phone and on your computer