Search code examples
safariweb-share

"Copy" option missing from Safari Desktop Web Share API?

I am trying to implement the Web Share API for some text I want to allow users to copy/share, and it's been successful except for an issue with Safari desktop. I check for navigator.share and if it exists, then only do I open the native share screen, and if it doesn't, I just copy the text straight to clipboard (like on desktop).

Safari desktop DOES support the Web Share API, however it doesn't seem to provide a way to just copy it? You can see in the screenshot it just gives some options for me. Am I missing something? Is there no way to have "Copy" as an option?

const copyURL = copyText => {
if (navigator.share) {
  navigator
    .share({ text: copyText })
    .then(() => {})
    .catch(console.error);
} else {
  navigator.permissions.query({ name: 'clipboard-write' }).then(result => {
    if (result.state === 'granted' || result.state === 'prompt') {
      navigator.clipboard.writeText(copyText).then(() => {
        setLinkCopied(true);
      });
    }
  });
}

};

enter image description here

Solution

  • There is indeed no "Copy" feature in desktop Safari's share sheet. The good news is that Safari supports the Async Clipboard API, so you can easily use it as an alternative, as shown in the example below:

    async function copyPageUrl() {
  try {
    await navigator.clipboard.writeText(location.href);
    console.log('Page URL copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}