Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The navigator.share()
method of the Web Share API invokes
the native sharing mechanism of the device.
Syntax
const sharePromise = navigator.share(data);
Parameters
data
- An object containing data to share. At least one of the following fields must be specified. Available options are:
Return value
A Promise
that will be fulfilled once a user has completed a share
action (usually the user has chosen an application to share to). It will reject
immediately if the data parameter is not correctly specified, and will also
reject if the user cancels sharing.
Examples
In our Web share test (see the source code) there is a button which, when clicked, invokes the Web Share API to share MDN's URL. The JavaScript looks like this:
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');
// Must be triggered some kind of "user activation"
btn.addEventListener('click', async () => {
try {
await navigator.share(shareData)
resultPara.textContent = 'MDN shared successfully'
} catch(err) {
resultPara.textContent = 'Error: ' + err
}
});
Sharing Files
To share files, first test for and call navigator.canShare()
. Then include
an array of files in the call to navigator.share():
Notice: That the sample handles feature detection by testing for
navigator.canShare()
rather than for navigator.share()
. The
data object passed to canShare()
only supports the files
property. Image, video, audio, and text files can be shared.
if (navigator.canShare && navigator.canShare({ files: filesArray })) {
navigator.share({
files: filesArray,
title: 'Pictures',
text: 'Our Pictures.',
})
.then(() => console.log('Share was successful.'))
.catch((error) => console.log('Sharing failed', error));
} else {
console.log(`Your system doesn't support sharing files.`);
}
Specifications
Specification | Status | Comment |
---|---|---|
Web Share API The definition of 'share()' in that specification. |
Draft |
Browser compatibility
BCD tables only load in the browser