Social share buttons used to mean loading five third-party scripts, each with its own cookie jar. The Web Share API does the whole job with one call to the operating system's own sheet, and the privacy posture improves with it.

const btn = document.querySelector("#share");
btn.addEventListener("click", async () => {
  const payload = {
    title: document.title,
    text: "Worth a read:",
    url: location.href,
  };
  if (navigator.share) {
    try { await navigator.share(payload); } catch { /* dismissed */ }
  } else {
    await navigator.clipboard.writeText(location.href);
    announce("Link copied"); // your own toast or status region
  }
});

The constraints, stated plainly

  • Secure context only: it exists on https, which every site that matters already is.
  • User gesture required: the call must be inside a real user action, exactly like the button provides.
  • The data you pass is what the target app receives, title, text, url; files are also supported where the platform allows.
  • Dismissal is an AbortError, and it is fine; treat it as silence rather than failure.

The fallback that respects everyone

  1. Feature-check with navigator.share in code, not by user-agent string; browsers change weekly.
  2. Clipboard write as the universal fallback: the URL lands in the reader's clipboard with done-not-surprised behavior from your toast.
  3. Keep at most one visual state change: a copied link and a toast, and no more script bytes than the snippet above.
  4. Announce to assistive tech with your toast or status landmark; a silent copy job is a screen reader support request.

One small button, the OS does the rest, and five scripts are deleted instead of shipped. gacor arithmetic.