Web Share API

Replace all individual share buttons with one native button that opens the user's device share sheet. One API call, every platform.

Usage

const btn = document.querySelector('.share-btn');

btn.addEventListener('click', async () => {
  if (!navigator.share) return;

  try {
    await navigator.share({
      title: document.title,
      text: 'Check this out',
      url: location.href,
    });
  } catch (error) {
    // AbortError is normal when the user cancels the share sheet.
  }
});

Feature detection starts with navigator.share, then falls back to clipboard copy or manual share links on unsupported browsers. For file sharing, check navigator.canShare({ files }) before calling share(). Source: MDN Navigator.share() and Navigator.canShare(), reviewed 2026-06-30

Runtime Constraints

The Web Share API is not a universal desktop-web primitive. It requires:

• a secure context (https: or localhost)
• a user gesture / transient activation, such as a button click
• the web-share Permissions Policy to allow the call
• share data the browser/OS considers valid

navigator.share() can throw when the user cancels, when data is invalid, when permission is blocked, or when the platform cannot share the requested data. Treat cancellation as a normal outcome, not an error toast. Source: MDN Navigator.share(), 2026-06-30

Why It Matters

Eliminates the need for individual Facebook/Twitter/LinkedIn/WhatsApp share buttons and their associated SDKs. Users see their own apps and contacts. Product effect: less JavaScript, fewer third-party widgets, a more native mobile feel, and no stale grid of services the user may not use. Source: Marko Denic article, 2026-05-16

Use it for product pages, articles, notes, image/file exports, and mobile-first web apps. Avoid it when analytics requires per-network attribution, when a browser target lacks support, or when the shared payload contains private data that needs an explicit confirmation step.

Concept Position

---

Timeline

• 2026-07-01 | Concepts category refresh added this page to the Agent harness and runtime primitives family, linked it to Concept System Map, and kept it standalone because it owns this reusable mental model: Replace all individual share buttons with one native button that opens the user's device share sheet. One API call, every platform. Source: User request, 2026-07-01
• 2026-05-19 | Page created from JavaScript tip. Source: User, 2026-05-19
• 2026-06-30 | Deep-reviewed Marko Denic's 2026-05-16 X tip, code screenshot, article link, and MDN docs; replaced the stale support note with secure-context, transient-activation, permissions-policy, cancellation, and canShare() constraints. Source: X/@denicmarko, 2026-05-16