Share Anything with native share options in Html & JavaScript

The Web Share API is a valuable feature that can enhance your website's functionality and user experience. It allows you to share text, URLs, or files with other apps or services using the native sharing mechanism of the device.

In simple language,

The Web Share API is a feature that enables web apps to share content with other apps on the device, using the native share options provided by the system. It has two methods, navigator.share() and navigator.canShare(), that allow web developers to check and invoke the sharing mechanism.

Well, It works only on mobile devices, and is limited to browsers, and requires user activation and secure context.

But what do we mean by native sharing well, I have attached an image below to tell you more about native share (Or read More about native here) .

Deep Dive into WebShare

The Web Share API allows web apps to share links, text, files, audio, and video with other apps on the device, using the native share options provided by the system.?This way, web apps can have the same sharing capabilities as platform-specific apps.

But good things always have limitations.

Limitations:

• It is supported only on specific browsers and devices, personally on my RND if you have an updated OS on your phone and Updated Browser the API will work like a charm. You should check the browser compatibility and use a fallback option if the API is unavailable.

• It is available only via HTTPS. It would help if you served your web pages over a secure protocol to use the API.
• :?This API is?not available?in?Web Workers
• It can be triggered only in response to a user action, such as a click. You cannot invoke it automatically or from a background script(but trigger the click instead).
• It can share only URLs, text, or files. You cannot share other data types, such as audio or video streams as of now (ref to https://developer.mozilla.org/en-US/docs/Web/API/Navigator/canShare).

Example To share Text:

// Define the data to share
const shareData = {
  title: "Rajneesh is tired",
  text: "But see he is trying",
  url: "https://www.dhirubhai.net/in/iamrajneesh/",
};

// Get the share button element
const shareBtn = document.getElementById("share-btn");

// Add a click event listener to the button
shareBtn.addEventListener("click", async () => {
  // Check if the Web Share API is supported
  if (navigator.share) {
    // Try to share the data
    try {
      await navigator.share(shareData);
      console.log("Data shared successfully");
    } catch (err) {
      // Handle any errors
      console.error("Error while sharing:", err);
    }
  } else {
    // Fallback to some other sharing method
    console.log("Web Share API not supported");
  }
});e        

a simple example of the above code

if (navigator.share) 
  navigator.share({
    title: "Rajneesh is tired",
    text: "But see he is trying",
    url: "https://www.dhirubhai.net/in/iamrajneesh/",
    })
      .then(() => console.log('Successful share'))
      .catch((error) => console.log('Error sharing', error));
  }{        

Example to Share Text with Files:

if (navigator.canShare && navigator.canShare({ files: filesArray })) 
  navigator.share({
    files: filesArray, //or using arrays refer to the end comment
    title: 'Jauns Photos',
    text: 'ek haadasa hee to hai aur vo ye hai aaj tak baat nahin kahee gaee baat nahin kahee gaee',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

//const input = document.getElementById("file-input");
//const file = input.files[0];        

Conclusion:

This is a very small and powerful feature and I was eager to share it with you all also it's too easy to use. and so i did not want to put too much effort because the self-details by W3c and Mozilla docs are really very awesome. So, if you have understood my article and want to take it to the next level, I will recommend visiting the following links. Or maybe, when you use WebShare API in the production future, make sure to check.

If you would like to manifest more in detail you visit the following links:

https://github.com/w3c/web-share