Web Share API: How to Share Contents Natively with JavaScript

Sharing contents online is as old as the internet and websites, and has been in use since then.
Social sharing has been a great way to promote your blog posts and let your readers discover you.
The evolution of social media websites has broadened the need to share content online, which has welcomed many social sharing services that allow internet readers to quickly share useful content with others. Basically, by listing social media accounts that a user can select and then redirects the user to the link provided for sharing by the social platform.
One clear fact here is that web sharing should not be limited to sharing only links to only websites. And this brings in another thought of making it possible for readers to share content beyond links and also to platform-specific applications. Here's why we have the JavaScript Web Share API.
The Web Share API
"This specification defines an API for sharing text, links and other content to an arbitrary destination of the user's choice."
W3C - Web Share API
The Web Share API allows sharing links, images, videos, and other contents to the corresponding platform-specific native apps on the device's operating system. On smartphones, this works much like the native sharing modal from apps.
It provides the navigator.share()
API for this action. The share()
method takes an object has an argument, which specifies the data to be shared and returns a promise that resolves or rejects if the share is successful or not.
Syntax
let promiseShare = navigator.share(shareData); // Returns a promise
The available properties are:
url
- A string representing a URL to be shared.text
- A string representing the content body to be shared.title
- A string representing the title of the content to be shared.files
- A "FrozenArray" representing the array of files to be shared.
Sharing Links and Texts
To share links and texts, the navigator.share()
API, provide the object argument with a url
or link
property or both. You can either share a text without a URL or vice versa, and can also share both. It's important to note that the method requires at least one property from the lists, if not, a TypeError
will be thrown. See example below
navigator.share({
url: 'https://lyty.dev',
text: 'Read online tutorials and articles from lyty.dev',
title: 'Lyty.dev online tutorials'}).then(() => alert('Shared!')).catch((err) => `Oops! Some error: ${err} occurred, cannot share content.`);
The Web Share API is new, so in order to be sure if your readers' browser supports it, and to avoid the TypeError: navigator.share is not a function
error, you can do a check:
if(navigator.share) {
navigator.share({
url: 'https://lyty.dev',
text: 'Read online tutorials and articles from lyty.dev',
title: 'Lyty.dev online tutorials'})
.then(() => alert('Worked!'))
.catch((err) => `Oops! Some error: ${err} occurred, does not work.`);
}
Here is a live example of how the link sharing works from your OS, click the share button to test:
Sharing Files with the Web Share API
The share()
method accepts a FrozenArray
value for the files
property to share files on the user's operating system. It is strongly advised that we check if the browser supports file sharing before implementing it, this can be done with the navigator.canShare()
API this way:
if(navigator.share && navigator.canShare({files: arrayOfFiles})) {
navigator.share({
files: arrayOfFiles,
text: 'Some fantastic picture!',
title: 'Share a fantastic picture'})
.then(() => alert('Picture sharing worked!'))
.catch((err) => `Oops! Some error: ${err} occurred, picture sharing does not work.`);
}
See live demo:
Here is a video demo in Chrome on Android.
Web Share API Limitations
Even though the Web Share API is powerful, it has some limitations to implementing it, here and a few things to consider when implementing it.
- It can only be used via an HTTPS website.
- It must be invoked from a user action such as click and not automatic.
- Different browsers have specific file extensions that are supported, see the permitted file extensions in Chromium browsers.
Browser Support
According to CanIUse, the Web Share API was first supported in Samsung Internet 8.2 released December 20, 2018. Since then, there have been staggering supports across modern browsers such as Chrome, Edge, and Firefox. See the support chart from CanIUse below.

Web Share API Demos
GoogleChrome Github repo has provided quite a number of interesting examples of how to use the Web Share API, visit the repo to learn more.
Leave a comment
Comments (2)
Wow, this is amazing! I will be adding this to my websites soon, thanks!
Nice article, it worth reading.