JavaScript Navigator serial Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word SERIAL

Definition

navigator.serial is a read-only property that returns a Serial object — the entry point to the Web Serial API for finding and connecting to serial ports from a web page (MDN). The same Serial instance is always returned.

Read the notes below before you rely on this property. Prefer feature detection when support is limited.

Syntax

Use navigator.serial. Start with this line.

JavaScript
navigator.serial
CallWhat it does
navigator.serialPrimary signature.

Built into the browser. Read navigator.serial on Navigator — no import required.

Library declarations
JavaScript
navigator.serial

Parameters

ParameterDescription
HTTPSRequired. Secure-context requirement

Return Value

Return ValueDescription
*The current value of navigator.serial.

JavaScript Examples

Example 1 — Feature-Detect Support

Check whether Web Serial is available before calling methods.

JavaScript
if ("serial" in navigator && navigator.serial) {
  console.log("Web Serial available");
} else {
  console.log("Web Serial missing");
}

console.log("secure context: " + window.isSecureContext);
Try It Yourself

How It Works

  1. Use in. Checks whether serial exists on navigator.
  2. Truthiness. Ensure the returned object is present.
  3. Secure context. Log HTTPS / localhost status for debugging.
  4. Missing path. Show a fallback UI (native tool, file upload, etc.).

Example 2 — List Granted Ports (getPorts)

MDN pattern: initialize the known-port list on load.

JavaScript
async function listGrantedPorts() {
  if (!navigator.serial) {
    console.log("Web Serial missing");
    return;
  }
  const ports = await navigator.serial.getPorts();
  console.log("granted ports: " + ports.length);
}

listGrantedPorts();
Try It Yourself

How It Works

  1. Guard. Exit if the API is missing.
  2. Await getPorts(). Resolves to an array of SerialPorts.
  3. Empty array. Normal when the site has never been granted a port.
  4. Reuse. After a successful requestPort, later loads can reconnect here.

Example 3 — Request a Port (User Gesture)

Open the browser picker from a button click; catch cancel.

JavaScript
async function connectPort() {
  if (!navigator.serial) {
    console.log("Web Serial missing");
    return;
  }
  try {
    const port = await navigator.serial.requestPort();
    console.log("port selected");
    return port;
  } catch (err) {
    console.log("no port selected");
  }
}

// Call connectPort() from a button click handler.
Try It Yourself

How It Works

  1. User gesture. MDN: requestPort() needs transient activation (a click).
  2. Picker. The browser shows available serial devices.
  3. Success. Promise resolves with a SerialPort.
  4. Cancel. Promise rejects — catch it and keep the UI calm.
Compatibility

Browser Support

navigator.serial has limited availability and is not Baseline. It requires a secure context. Feature-detect and provide a non-serial fallback for unsupported browsers.

✓ Limited availability · Secure context

Navigator.serial

Entry point to the Web Serial API. Best supported in Chromium-based browsers. Use getPorts() for known devices and requestPort() from a user gesture.

Limited Not Baseline
Google Chrome Supported · Desktop (secure context)
Supported
Microsoft Edge Supported · Chromium (secure context)
Supported
Opera Chromium-based / supported where available
Supported
Mozilla Firefox Not available
No support
Apple Safari Not available
No support
Internet Explorer Not available
No support
serial Limited

Bottom line: Detect navigator.serial, require HTTPS, call requestPort from a click, and never assume every browser can talk to serial hardware.

Frequently Asked Questions

It is a read-only Navigator property that returns a Serial object — the entry point for the Web Serial API so your page can find and connect to serial ports (including USB devices that present as a serial port).
MDN does not mark it Deprecated or Experimental. It has Limited availability (not Baseline) and requires a secure context. Always feature-detect and check browser support.
Yes. It is available only in secure contexts (HTTPS or localhost) in supporting browsers.
navigator.serial.requestPort(options) opens the browser’s port picker so the user can grant access to a selected serial device. Call it from a user gesture such as a button click. It resolves to a SerialPort.
navigator.serial.getPorts() returns ports the site already has access to. Use it on page load to reconnect without showing a new picker.
Unsupported browser, insecure context, or a Permissions Policy that blocks the serial feature — the property may not be available when blocked.

Next: serviceWorker

Continue with the next Navigator property in the JavaScript guide.

serviceWorker tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

JavaScript Navigator scheduling Property JavaScript Navigator serviceWorker Property