Posts Learn Components Snippets Categories Tags Tools About
/

How to Implement Web Share API

Learn How to Implement Web Share API the easy way to share your online content natively

Created on Jun 23, 2022

252 views

In this short snippet, you will learn how to implement Web Share API. This is a new browser API to allow the share dialog on mobile devices.
To get started let's prepare the data below. It can be from your online page/blog.
const data = {
	title: "Hello World",
	text: "Hello world is just an intro text",
	url: "https://postsrc.com"
}
Once you have it ready then you can check if the navigator is present and check whether the canShare method is present. Once you have done so you can share the data. Otherwise, the browser doesn't support this new Web Share API.
if (navigator.canShare && navigator.canShare(data)) {
	navigator.share(data);
}
This Web Share API is supported for the Chrome-based browser Version 61+, Firefox version 79+ and Safari 12.2+

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for How to Implement Web Share API

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that are right for your project.

View Components

Sponsors 👑

+ Add Yours
)