/* Codeboosh */

Native Sharing for the Web

The Web Share API allows websites to use native device sharing, which is pretty cool.

Example code

Here is an example of sharing a title, text and url. However, only one of these is required.

You can even share files:

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    title: 'Codeboosh files',
    text: 'Super files from Codeboosh',
    files: filesArray
  })
  .then(() => console.log('Success.'))
  .catch((error) => console.log('Error'));
} else {
  // handle not being able to share files
}

Screenshot

Here is what the sharing looks like when triggered on Android devices.

Browser support

Browser support for the Web Share API is pretty good for mobile browsers with the latest versions of Safari and Android Chrome supporting it. It works on desktop Safari, however for everything else you will have to provide a fallback.

Fallback example

For a fallback for browsers that don’t support his feature you could display a little tooltip/popup with sharing links as follows.

<div class="c-dialog">
  <a href="https://twitter.com/intent/tweet?text=https://codeboosh.com/ This is the coolest blog ever" target="_blank" rel="nofollow noreferrer">
    Share this article on Twitter
  </a>
  <a href="https://www.facebook.com/share.php?u=https://codeboosh.com/&amp;title=This is the coolest blog ever" target="_blank" rel="nofollow noreferrer">
    Share this article on Facebook
  </a>
</div>

👍 Thanks for reading. Have a great rest of your day.