JavaScript Navigator presentation Property

What You’ll Learn

navigator.presentation returns a Presentation object — the entry point for presenting web content on another screen. Learn feature detection, MDN’s receiver vs idle check, defaultRequest, secure contexts, five examples, and try-it labs.

Introduction

The Presentation API lets a page act as a controller (start or reconnect a presentation) or as a receiver (the page shown on the other display). navigator.presentation is how you reach that API from JavaScript.

MDN notes that today the property is especially useful for feature checking, and on a receiving user agent for accessing PresentationReceiver via navigator.presentation.receiver.

Understanding the presentation Property

Reading navigator.presentation does not start casting by itself. It returns a Presentation object with role-specific fields:

• receiver — PresentationReceiver in a receiving context; otherwise typically falsy.
• defaultRequest — optional PresentationRequest for browser-chrome-initiated presentation in a controlling context.
• Read-only entry point — you do not assign to navigator.presentation.
• Secure context — HTTPS / localhost where supported.
• Experimental — not Baseline; support is limited.

📝 Syntax

General form of the property:

navigator.presentation

Value

• A reference to a Presentation object.

Common patterns

// MDN-style feature check + receiver hint:
if ("presentation" in navigator) {
  const status = navigator.presentation.receiver
    ? "Receiving presentation"
    : "(idle)";
  console.log(status);
} else {
  console.error("Presentation API is not available in this browser.");
}

// Controlling pages may later set:
// navigator.presentation.defaultRequest = new PresentationRequest(urls);

Examples Gallery

Examples follow MDN navigator.presentation patterns. Prefer Try It Yourself. Many browsers still omit the API.

const supported = "presentation" in navigator;
console.log(supported ? "presentation available" : "presentation missing");

presentation missing
(or "available" in a supporting browser / context)

if ("presentation" in navigator) {
  const status = navigator.presentation.receiver
    ? "Receiving presentation"
    : "(idle)";
  console.log(status);
} else {
  console.error("Presentation API is not available in this browser.");
}

Presentation API is not available in this browser.
(or "(idle)" / "Receiving presentation")

const lines = [];
lines.push("isSecureContext: " + window.isSecureContext);
lines.push(
  "presentation: " +
    ("presentation" in navigator ? "present" : "absent")
);
console.log(lines.join("\n"));

isSecureContext: true
presentation: absent
(exact lines depend on browser / page URL)

function describePresentation() {
  if (!("presentation" in navigator) || !navigator.presentation) {
    return "Presentation API missing";
  }
  const p = navigator.presentation;
  return [
    "receiver: " + (p.receiver ? "yes" : "no"),
    "defaultRequest: " + (p.defaultRequest ? "set" : "null/unset")
  ].join("\n");
}

console.log(describePresentation());

Presentation API missing
(or receiver: no / defaultRequest: null/unset on an idle controller)

function presentationStatus() {
  if (!("presentation" in navigator)) {
    return { ok: false, reason: "api-missing" };
  }
  const receiving = !!navigator.presentation.receiver;
  return {
    ok: true,
    secure: window.isSecureContext,
    receiving,
    label: receiving ? "Receiving presentation" : "(idle)"
  };
}

console.log(JSON.stringify(presentationStatus(), null, 2));

{
  "ok": false,
  "reason": "api-missing"
}
(or an idle/receiving object when supported)

🚀 Common Use Cases

• Feature detection — show Cast / Present only when the API exists.
• Receiver pages — detect receiver and wire presentation messaging.
• Controller defaults — set defaultRequest for browser chrome casting menus.
• Diagnostics — include presentation availability in support debug panels.
• Not universal casting — keep non-API fallbacks for unsupported browsers.

📝 Notes

• Experimental Presentation API — not Baseline / limited availability (MDN).
• Secure context required where the property is exposed.
• Read-only entry point returning a Presentation object.
• Most useful first for feature detection and receiver access.
• Related: preferences, product, Window, JavaScript hub.

💡 Best Practices