Web Share API

The Web Share API allows the invocation of native sharing capabilities from the web. It brings the Progressive Web App experience even closer to the native experience.

Using the API

The API consists of a single method, navigator.share.

if (navigator.share) {
  navigator.share({
    title: 'Web Share API',
    text: 'Check out this blog post on the Web Share API!',
    url: document.querySelector('link[rel=canonical]').href
  })
  .then(() => {
    // do something on success
  })
  .catch(err => {
    // do something on error
  });
}
  

Important points:

• The page must be served over HTTPS.
• navigator.share can only be invoked in response to a user action.
• At least one of the properties title, text or url must be provided.

Demo

If the Web Share API is supported on your device, the following button will invoke the JavaScript from the previous section when clicked.

Benefits of the API

• Having a single share button to share to all platforms results in a much cleaner user interface than having several individual share buttons.
• Using the Web Share API removes the need to have third party scripts for share buttons.

Support

At the time of writing only Chrome 61 for Android supports the API but hopefully it will be more widely implemented soon!