Technical writing

blogpost.md

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

Now, starting from Chrome 61 for Android, we have a new API available called Web Share. This API allows us to activate the native Android sharing bar via JavaScript, giving us more possibilities when sharing a URL or text.

Read the original Google Developers article here.

A bit of history...

The Web Share API was originally launched as an 'Origin Trial' in Chrome 55.

Origin trials are an approach to enable a secure environment for experiments with web platform features.

Before the API, there were several ways to invoke native sharing resources on the platform, but all of them had significant disadvantages:

• Web Intents (discontinued)
• Protocol handling via registerProtocolHandler (Not supported for mobile)
• Direct sharing to a known URL, such as Facebook or Twitter
• Android intents (Android only and required app opt-in)

Why is this beneficial for the web?

In 2016, Google experimented with the API and concluded that the new API was perfect for mobile devices because they could use just one button instead of a list of social media buttons, saving some pixels on the page (which are precious).

With the new API, they also noticed a 20% increase in people sharing the page compared to those 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 already?

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

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

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

if (navigator.share) {
  navigator.share({
    title: 'Rafael Fragoso',
    text: 'Check out Rafael Fragoso\'s awesome blog!',
    url: 'https://rafaelfragosom.github.io/',
  })
  .then(() => console.log('Successful sharing'))
  .catch((error) => console.log('Error sharing', error));
}

Very simple, right?

And if you're thinking of using a fallback plugin, you can use the library we developed here at Globo.com (share-bar):

var btn, sharebar;

function share(e) {
  navigator.share({
    title: 'Rafael Fragoso',
    text: 'Check out Rafael Fragoso\'s awesome blog!',
    url: 'https://rafaelfragosom.github.io/',
  })
  .then(() => console.log('Successful sharing'))
  .catch((error) => console.log('Error sharing', error));
}

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

Conclusion

The web is evolving more and more, and we are getting closer to a native and smoother experience. Isn't that exciting?

Now I want to hear from you! Are you already using the API? Would you like to use it? Do you have a successful use case? Or do you just want to share an opinion?

Leave a comment below, and let's have a chat!