Web Share API

Overview

If you want to share web content with other applications, you usually have to implement the sharing interface yourself, and give the connection method of the target application one by one. This is very troublesome and has a certain impact on web page performance. The Web Share API was proposed to solve this problem. Allowing web pages to call the sharing interface of the operating system is essentially a way for Web App to exchange information with native applications.

This API can not only improve web page performance, but also does not limit the number and types of shared goals. Social media applications, emails, instant messages, and applications installed on the local system that accept sharing will all appear in the system’s sharing pop-up window, which is especially useful for mobile web pages. In addition, only one share button is needed to use this interface, while traditional webpage sharing has multiple sharing goals, there are as many sharing buttons as there are.

Currently, the Safari browser on the desktop, the Android Chrome browser on the mobile phone and the iOS Safari browser support this API.

This API requires that the website must enable the HTTPS protocol, but the local Localhost development can use the HTTP protocol. In addition, this API cannot be called directly, and can only be used to respond to user operations (such as the click event).

Interface details

This interface is deployed in navigator.share, you can use the following code to check whether the machine supports this interface.

if (navigator.share) {
  // stand by
} else {
  // not support
}

navigator.share is a function method that accepts a configuration object as a parameter.

navigator.share({
  title: "WebShare API Demo",
  url: "https://codepen.io/ayoisaiah/pen/YbNazJ",
  text: 'I am watching "Web Share API"',
});

The configuration object has three attributes, all of which are optional, but at least one must be specified.

-title: The title of the shared document. -url: URL to share. -text: The content to be shared.

Generally speaking, url is the URL of the current webpage, and title is the title of the current webpage, which can be obtained by the following writing method.

const title = document.title;
const url = document.querySelector("link[rel=canonical]")
  ? document.querySelector("link[rel=canonical]").href
  : document.location.href;

The return value of navigator.share is a Promise object. After this method is called, the system's sharing pop-up window will pop up immediately. After the user finishes the operation, the Promise object will change to the resolved state.

navigator
  .share({
    title: "WebShare API Demo",
    url: "https://codepen.io/ayoisaiah/pen/YbNazJ",
  })
  .then(() => {
    console.log("Thanks for sharing!");
  })
  .catch((error) => {
    console.error("Sharing error", error);
  });

Since the return value is a Promise object, you can also use the await command.

shareButton.addEventListener("click", async () => {
  try {
    await navigator.share({ title: "Example Page", url: "" });
    console.log("Data was shared successfully");
  } catch (err) {
    console.error("Share failed:", err.message);
  }
});

Share files

This API can also share files. First use the navigator.canShare() method to determine whether the target file can be shared. Because not all files are allowed to be shared, currently images, videos, audios and text files can be shared2.

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  // ...
}

In the above code, the parameter object of the navigator.canShare() method is the parameter object of the navigator.share() method. The key here is the files property, whose value is a FileList instance object.

The navigator.canShare() method returns a boolean value. If it is true, the file can be shared using the navigator.share() method.

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator
    .share({
      files: filesArray,
      title: "Vacation Pictures",
      text: "Photos from September 27 to October 14.",
    })
    .then(() => console.log("Share was successful."))
    .catch((error) => console.log("Sharing failed", error));
}