Native sharing mechanism for web ๐Ÿคณ๐Ÿผ

Native sharing mechanism for web ๐Ÿคณ๐Ÿผ

ยท

1 min read

Table of contents

No heading

No headings in the article.

Do you know you can build the same share functionality as android and ios?

Have you ever wanted to share a webpage with someone on social media or via email, but found it too tedious to copy and paste the URL? Well, good news! With the native sharing mechanism for the web, you can easily share web content with just a few clicks.

There is a very nice API Navigator.share() which we can use for sharing resources on the web, and trust me it will work the same as ios and android.

Please note share targets depend on what kind of device you are using (use your mobile phone)

Sharing Is Caring GIF

Here is the code for that

if(navigator.share){
async () => {
  try {
    await navigator.share(shareData); //the data you want share
    resultPara.textContent = 'Shared successfully';
   } catch (err) {
    resultPara.textContent = `Error: ${err}`;
   }
  }
}

if you want the complete code check out the code pen link.

I hope you learn something new today. :)

For more information please check out MDN DOCS


Thanks a lot for reading till the end ๐Ÿ™ You can contact me in case if you need any assistance:

Email: atul19251@gmail.com

Web: https://iamatul.netlify.app/

GitHub: https://github.com/iamrajput

LinkedIn:https://www.linkedin.com/in/atul-kumar-singh-673357102/

ย