Using the Web Share API to trigger the OS share sheet

With the Web Share API, we are now able to share contents using the Operating System (OS) share sheet. This API allows us to share links, text, and even files to any other apps that is supported and installed on the device.

The following screenshots should look familiar for anyone while sharing contents on a smartphone today.

navigator.share()

The Navigator.share() API allows us to quickly implement using the respective OS share sheet in the screenshot above.

const data = {
  title: "Ru Chern",
  text: "Passionate Frontend Developer",
  url: "https://ruchern.dev",
};

navigator.share(data);

Just a few lines of code and we are now able to leverage the beauty of the share sheet to share contents to our favourite apps easily.

I believe this is a much better user experience for sharing rather having to use the primitive methods.

Of course, the API also allows us to share files. Do refer more to the MDN docs for the comprehensive details for using the navigator.share() API.

Caveat

This API only works for mobile browsers since it requires the OS functionality to work. As for sharing via desktop browsers, we will have to find other interesting ways as a workaround!