Web Share API
Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.
TheWeb Share API provides a mechanism for sharing text, links, files, and other content to an arbitraryshare target selected by the user.
Note:This API isnot available inWeb Workers (not exposed viaWorkerNavigator).
Note:This API should not be confused with theWeb Share Target API, which allows a website to specify itself as a share target.
Concepts and usage
TheWeb Share API allows a site to share text, links, files, and other content to user-selected share targets, utilizing the sharing mechanisms of the underlying operating system.These share targets typically include the system clipboard, email, contacts or messaging applications, and Bluetooth or Wi-Fi channels.
The API has just two methods.Thenavigator.canShare() method may be used to first validate whether some data is "shareable", prior to passing it tonavigator.share() for sending.
Thenavigator.share() method invokes the native sharing mechanism of the underlying operating system and passes the specified data.It requirestransient activation, and hence must be triggered off a UI event like a button click.Further, the method must specify valid data that is supported for sharing by the native implementation.
The Web Share API is gated by theweb-share Permissions Policy.If the policy is supported but has not been granted, both methods will indicate that the data is not shareable.
Interfaces
Extensions to other interfaces
navigator.canShare()Returns a boolean indicating whether the specified data is shareable.
navigator.share()Returns a
Promisethat resolves if the passed data was successfully sent to a share target.This method must be called on a button click or other user activation (requirestransient activation).
Example
The code below shows how you can share a link usingnavigator.share(), triggered off a button click.
const shareData = { title: "MDN", text: "Learn web development on MDN!", url: "https://developer.mozilla.org",};const btn = document.querySelector("button");const resultPara = document.querySelector(".result");// Share must be triggered by "user activation"btn.addEventListener("click", async () => { try { await navigator.share(shareData); resultPara.textContent = "MDN shared successfully"; } catch (err) { resultPara.textContent = `Error: ${err}`; }});The above example is taken from ourWeb share test (see the source code). You can also see this as a live example innavigator.share().
Specifications
| Specification |
|---|
| Web Share API |