Web Share API

If you want to see the Web Share API in action, here's a CodePen link to try it out.

The Web Share API gives web apps the ability to share data like: links, text, and files, just like you would in a native app.

Some requirements

Before you can add this API on your own web project, there are two major things to note:

• Your website has to be served over HTTPS. The API also works when running your site on a localhost server, so you will still be able to test it locally.
• Can only be invoked in response to a user action, such as a button click event

Using the Web Share API

To start using the Web Share API, pass an object to the promise-based share() method on the navigator object. Each property on the object is optional. However, the object you pass must contain at least one of the following properties: title, text, url or files to work without throwing an error.

navigator
  .share({
    title,
    text,
    url
  })
  .then(() => {
    console.log("");
  })
  .catch(error => {
    console.log(error);
  });

Sharing a link with text

To share a link with text, we call the navigator.share() method and pass an object that contains at least one of the following fields:

• url: A string representing the link you want to share (here you can grab the page URL).
• title: A string representing the title of the data you want to share (here you can grab the page title).
• text: A string representing any text you want to include.

So if we wanted to share this natively:

• url: '<Github repo name>',
• title: "Web Share API",
• text: "Sent with the Web Share API"

The implementation would look like this:

navigator
  .share({
    title: "Web Share API",
    text: "Sent with the Web Share API",
    url: "<Github repo name>"
  })
  .then(() => {
    console.log("Shared successfully.");
  })
  .catch(error => {
    console.log("There was an error sharing:", error);
  });

Remember, the Web Share API isn't supported on all browsers so we're going to check to see if it's supported on the user's browser:

if (navigator.share) {
  navigator
    .share({
      title: "Web Share API",
      text: "Sent with the Web Share API",
      url: "<Github repo name>"
    })
    .then(() => {
      console.log("Shared successfully.");
    })
    .catch(error => {
      console.log("There was an error sharing:", error);
    });
} else {
  console.log("The Web Share API is not supported in your browser.");
}

And because the API can only be triggered by a click event, we're going to wrap all our code around a button trigger:

button.addEventListener("click", event => {
  if (navigator.share) {
    navigator
      .share({
        title: "Web Share API",
        text: "Sent with the Web Share API",
        url: "<Github repo name>"
      })
      .then(() => {
        console.log("Shared successfully.");
      })
      .catch(error => {
        console.log("There was an error sharing:", error);
      });
  } else {
    console.log("The Web Share API is not supported in your browser.");
  }
});

And voilà! Try out the demo of the Web Share API!

Browser Support

This Web Share API is currently only supported in Chrome for Android, and Safari for desktop and iOS. It's also an experimental API at the time of writing this, so expect some behavior to change in the future.

Resources

• MDN Web Docs - Navigator.share()
• Can I use - Web Share
• How to Use the Web Share API
• Share like a native app with the Web Share API