Web Share API: Trigger Native Sharing in JS

The Web Share API allows web applications to access the operating system’s native sharing capabilities directly through JavaScript. Instead of relying on individual, hardcoded social media buttons or custom share widgets, developers can invoke the device’s built-in share sheet. This provides users with a consistent interface to share text, links, and files to any installed application—such as messaging apps, email clients, or social networks—that registers as a share target.

Prerequisites and Requirements

To ensure security and prevent abuse, the Web Share API enforces two strict requirements:

  1. Secure Context (HTTPS): The API is only accessible in secure contexts served over HTTPS (or localhost for development).
  2. User Activation: The sharing action cannot be triggered programmatically on page load. It must be initiated by an explicit user interaction, such as a click or pointerdown event.

Checking for Browser Support

Before invoking the API, web applications should verify whether the browser supports navigator.share. If unsupported, you should provide a fallback mechanism, such as copying the link to the clipboard or displaying traditional share buttons.

if (navigator.share) {
  // Web Share API is supported
} else {
  // Fallback behavior
}

The navigator.share() Method

The core of the API is the asynchronous method navigator.share(data). It accepts an object containing up to four optional properties:

When called, navigator.share() returns a Promise. The Promise resolves when the user successfully selects a target application and shares the data, and rejects if the user dismisses the dialog or if an error occurs.

Implementation Example

The following implementation demonstrates how to bind native sharing to a button click:

const shareButton = document.getElementById('shareButton');

const shareData = {
  title: 'Understanding Web APIs',
  text: 'Learn how to trigger native share dialogs on the web.',
  url: window.location.href,
};

shareButton.addEventListener('click', async () => {
  if (navigator.share) {
    try {
      await navigator.share(shareData);
      console.log('Content shared successfully');
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('Sharing failed:', error);
      }
    }
  } else {
    navigator.clipboard.writeText(shareData.url);
    alert('Link copied to clipboard!');
  }
});

Note: Handling AbortError ensures that the application does not log an error when a user simply closes or cancels the share sheet.

Sharing Files with navigator.canShare()

To share files such as images or documents, the navigator.canShare() method is used to validate whether the specific payload—especially the file types—is supported by the operating system before attempting to trigger the share dialog.

const filesArray = [imageFile];

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  await navigator.share({
    files: filesArray,
    title: 'Shared Image',
    text: 'Check out this photo',
  });
}

Summary of Benefits

By offloading the sharing process to the operating system, the Web Share API: