JavaScript Navigator canShare() Method

What You’ll Learn

navigator.canShare() is part of the Web Share API. Learn how to validate share data before calling navigator.share(), feature-detect support, test title / text / url / files, and use five examples with try-it labs.

Introduction

Mobile and desktop browsers can open a native share sheet so users send a link, text, or files to another app. That UI comes from navigator.share().

Before you open that sheet — especially for files — ask: Would this share succeed? navigator.canShare(data) answers with a simple true or false, without showing any UI.

Understanding the canShare() Method

Think of canShare() as a dry run for share(). It checks whether the data is valid and shareable on this browser / OS.

• Returns true — an equivalent share(data) call should succeed (data-wise).
• Returns false — data omitted / unknown only, bad URL, unsupported files, hostile share, or missing permission.
• Unknown properties — ignored by the user agent; only known keys count.
• At least one known property — required, or the method returns false.
• Secure context — HTTPS / localhost.
• Permission policy — gated by web-share; may return false if not granted.

📝 Syntax

General form of the method:

navigator.canShare()
navigator.canShare(data)

Parameters

• data (optional) — object with any of: url, text, title, files.

Return value

• true if the data can be shared with navigator.share(); otherwise false.

Common patterns

// MDN: validate share data before sharing
const shareData = {
  title: "MDN",
  text: "Learn web development on MDN!",
  url: "https://developer.mozilla.org"
};

if (!navigator.canShare) {
  console.log("navigator.canShare() not supported.");
} else if (navigator.canShare(shareData)) {
  console.log("We can use navigator.share() to send the data.");
} else {
  console.log("Specified data cannot be shared.");
}

// Feature-test a single property (MDN)
const testShare = { someNewProperty: "Data to share" };
if (navigator.canShare && navigator.canShare(testShare)) {
  // Property is valid on this platform
} else {
  // Handle unsupported property
}

Examples Gallery

Examples follow MDN navigator.canShare() patterns. Prefer Try It Yourself — support varies by browser and OS, and desktop Firefox may need a preference flag.

const lines = [
  "canShare: " + (typeof navigator.canShare === "function" ? "available" : "missing"),
  "share: " + (typeof navigator.share === "function" ? "available" : "missing"),
  "isSecureContext: " + window.isSecureContext
];
console.log(lines.join("\n"));

canShare: missing
share: missing
isSecureContext: true
(or "available" on supporting browsers)

const shareData = {
  title: "MDN",
  text: "Learn web development on MDN!",
  url: "https://developer.mozilla.org"
};

if (!navigator.canShare) {
  console.log("navigator.canShare() not supported.");
} else if (navigator.canShare(shareData)) {
  console.log(
    "navigator.canShare() supported. We can use navigator.share() to send the data."
  );
} else {
  console.log("Specified data cannot be shared.");
}

navigator.canShare() not supported.
(or the success / cannot-be-shared messages when supported)

function describeKey(label, data) {
  if (!navigator.canShare) return label + ": canShare missing";
  return label + ": " + (navigator.canShare(data) ? "shareable" : "not shareable");
}

console.log([
  describeKey("url", { url: "https://developer.mozilla.org" }),
  describeKey("text", { text: "Hello from CodeToFun" }),
  describeKey("unknown", { someNewProperty: "Data to share" })
].join("\n"));

url: canShare missing
text: canShare missing
unknown: canShare missing
(or shareable / not shareable per key when supported)

async function checkFileShareSupport() {
  if (!navigator.canShare) {
    return "Your browser doesn't support the Web Share API.";
  }
  // Tiny in-memory file for the capability check
  const files = [
    new File(["hello"], "hello.txt", { type: "text/plain" })
  ];
  if (navigator.canShare({ files })) {
    return "This system can share these files.";
  }
  return "Your system doesn't support sharing these files.";
}

checkFileShareSupport().then(console.log);

Your browser doesn't support the Web Share API.
(or can / can't share files messages)

const shareData = {
  title: "CodeToFun",
  text: "Learn JavaScript with clear tutorials",
  url: "https://www.codetofun.com"
};

function canOfferShare(data) {
  return typeof navigator.canShare === "function" && navigator.canShare(data);
}

const enabled = canOfferShare(shareData);
console.log("Share button enabled: " + enabled);

// On click (user gesture), in a real page:
// if (enabled) await navigator.share(shareData);

Share button enabled: false
(or true when canShare accepts the payload)

🚀 Common Use Cases

• Share article links — validate title / text / URL before opening the sheet.
• Share generated files — check { files } before offering download-or-share.
• Progressive Share buttons — show Share only when canShare returns true.
• Platform capability probes — test one property at a time for feature support.
• Safer UX — avoid calling share() with data that will fail validation.

📝 Notes

• Limited availability (not Baseline) — feature-detect always.
• Not Deprecated, Experimental, or Non-standard — no status banner required (MDN/BCD).
• Secure context required (HTTPS / localhost).
• Returns a boolean; pair with navigator.share() for the actual share UI.
• Related: clearAppBadge(), clipboard, userActivation, Window.

💡 Best Practices