I was reading some articles on the web and ran into something very interesting, and I thought I should share it with you.

Now from Chrome 61 for Android, we have a new API called Web Share available. This API enables us to enable Android's native sharing bar via JavaScript, giving us greater possibilities when sharing a URL or text.

Read the original Google Developers article here.

A little of history…

The Web Share API was originally released as an Origin Trial on Chrome 55.

Origin trials are an approach to enabling a secure experiment environment for web platform features.

Prior to the API, there were several ways to invoke native sharing features on the platform, but they all have significant disadvantages:

Web Intents (deprecated)
Protocol handling via registerProtocolHandler (No mobile support)
Direct sharing to a known URL such as Facebook or Twitter
Android intents (Android only and required app opt-in)

Why is this beneficial to the web?

In 2016 Google experimented with the API and came to the conclusion that the new API was perfect for mobile devices, as they could only use 1 button instead of a list of social buttons, saving a few pixels on the page (which are precious).

With the new API they also noticed a 20% increase in people sharing the page compared to people using traditional methods.

In my opinion, this also brings the Web closer to a native experience, using less code and delivering a better user experience.

Can we use it yet?

Yes! we can already use it, just follow some API usage rules:

  • The API accepts an object, where you need to pass at least the text or url property.
  • You must be using HTTPS
  • You can only invoke the API through a user action, such as a click event (but you cannot call on the onload event)
  • You can share any URL, not just the scope URLs of your site.
  • You can also share text only, the URL is not required.
  • You need to feature detection to see if it is available on your platform (eg navigator.share! == undefined)

Here is an example of how you could use it on your page:

if (navigator.share) {
  navigator.share({
    title: 'Rafael Fragoso',
    text: 'Look at Rafael Fragoso\'s blog!',
    url: 'https://rafaelfragoso.com/',
  })
  .then(() => console.log ('Sharing Successful'))
  .catch((error) => console.log ('Error sharing', error))
}

Very simple, right?

And if you are thinking of using some fallback plugin, you can use the lib that I helped support at globo.com:

let btn, sharebar

function share(e) {
  navigator.share({
    title: 'Rafael Fragoso',
    text: 'Look at Rafael Fragoso\'s blog!',
    url: 'https://rafaelfragoso.com/',
  })
  .then(() => console.log('Sharing Successful'))
  .catch((error) => console.log('Error sharing', error))
}

if (navigator.share) {
  btn = document.querySelector('.your-share-button')
  btn.addEventListener('click', share)
} else {
  sharebar = new ShareBar()
}

Wrapping up

The Web is evolving more and more, and we will be closer and closer to a more fluid, native experience. Isn't that exciting?

Now I want to know about you! Are you already using the API? Would you like to use? Got any successful use-cases? Or just want to leave an opinion?

Leave a comment below and let's chat!