Web Share API

Web Share API

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

This API not only improves web page performance, but also does not limit the number and type of shared objects. Social media apps, email, instant messaging, and apps installed on the local system that accept sharing will all appear in the system’s share popup, which is especially useful for mobile web pages. In addition, only one share button is required to use this interface, and there are as many share buttons as there are multiple share targets in traditional web page sharing.

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 have the HTTPS protocol enabled, but local Localhost development can use the HTTP protocol. In addition, this API cannot be called directly, but can only be used in response to user actions (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) {
  // support
} 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'm looking at Web Share API'
})

The configuration object has three properties, all optional, but at least one must be specified.

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

Generally speaking, url is the URL of the current web page, and title is the title of the current web page, which can be obtained in the following way.

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 sharing pop-up window will pop up immediately. After the user’s operation is completed, 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, the await command can also be used.

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 image, video, audio 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 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));
}

Reference link