An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
How to share anything from your website by Web Share API
In this article we are going to look at Web Share API. With the Web Share API, web apps are able to use the same system-provided share capabilities as platform-specific apps. The Web Share API makes it possible for web apps to share links, text, and files to other apps installed on the device in the same way as platform-specific apps.
Web share has the following capabilities and limitations:
- It can only be used on a site that is accessed via HTTPS.
- It must be invoked in response to a user action such as a click.
- It can share, URLs, text, or files.
Sharing links and text
To share links and text, use the share()
method, which is a promise-based method with a required properties object. To keep the browser from throwing a TypeError
, the object must contain at least one of the following properties: title
, text
, url
or files
// check for support of web share APIif (navigator.share) { navigator .share({ title: "This is header/title", text: "This is the description", url: "https://put-here-url.com", }) .then(() => console.log("Successful share")) .catch((error) => console.log("Error sharing", error));} else { console.error("Browser doesn't support Web Share API");}
You can use this in your function or anywhere you want. But before you do that you should remember one thing that it does not support by old version browsers.
So you need to make sure that you handle that case. For example the above code will console the error
if it doesn't support the Web Share API but it's my preference that you should only show the share button if browser supports it, otherwise hide the button.
Here is the example code what i was saying
const btn = document.getElementById("btn");// function for web share apifunction webShareAPI(header, description, link) { navigator .share({ title: header, text: description, url: link, }) .then(() => console.log("Successful share")) .catch((error) => console.log("Error sharing", error));}if (navigator.share) { // Show button if it supports webShareAPI btn.style.display = "block"; btn.addEventListener("click", () => webShareAPI("header", "description", "www.url.com") );} else { // Hide button if it supports webShareAPI btn.style.display = "none"; console.error("Your Browser doesn't support Web Share API");}
Conclusion
Now you can use this API for your personal projects or wherever you want. you can do much more than that you can take the custom input or maybe you want to share you blog then you can use this. If you learned something new then , and consider to follow.
You can now extend your support by buying me a Coffee.
Also Read
Original Link: https://dev.to/j471n/how-to-share-anything-from-your-website-by-web-share-api-1h5g
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To