The Web Share API Is Here :)

October 07, 2017 0 Comments

The Web Share API Is Here :)

 

 

Share your audio recordings on Voice Record Pro

One of the coolest APIs is available now as of Chrome 61! The Web Share API is a JavaScript API that let’s you implement native sharing capabilities from your Mobile Web App previously available on native platforms only.

The API is available on leading browsers like Chrome for Android. It will allow you to expand the functionality of your Mobile Web App and give your Android users the ability to share a link or anything else via SMS (and other native applications).

Previously, the only way users could quickly share links from a Mobile Web App was via basic copying and pasting. Google has a clever UX implementation that reduces the amount of taps necessary to copy a link. You may have seen it before.

Sharing modal pre Web Share API

With the new Web Share API, techniques like this are unnecessary on Chrome for Android. That’s because we’re getting better integration between the Web and mobile devices.

It’s very easy to start using the Web Share API. You just need to be aware of 3 main requirements before you enhance your Mobile Web App with this functionality.

#1 Your app must be served over HTTPS

I have a demo app that allows users to record something, then publish and share the recording with a simple Web link. It’s hosted via HTTPS which is requirement #1 for using the Web Share API.

Record & playback views in Voice Record Pro

#2 You can only call the Web Share API in response to a user action

The Web Share API only responds to user actions like a click or a tap. You can’t call the API for an action not explicitly initiated by a user, like when a page loads.

Tap or click to publish and share

#3 You must feature detect the navigator.share() function

Finally, to actually call the Web Share API you must feature detect the navigator.share() function. Remember, you always have to do feature detection when using new Web APIs. The Web is a constantly evolving platform, and you don’t want your app to break on platforms that don’t support an API.

Code:

if (navigator.share !== undefined) {
  navigator.share({
title: <title of your shared data>,
url : <link you want to share>
});
.then(() => ...))
.catch((error) => ...));

The code above will launch the Web Share API.

Web Share API in action

That’s it! Have fun!

Hey, I work as a Senior Front End Engineer in the industry, and many companies are moving their front-ends to Single Page Application architectures using React & Redux.

The pay is good, but you need to have strong skills.

That’s why I’m teaching developers how to write modern React Apps in my course “How To Write A Single Page Application”. It’s a step-by-step video course that shows you how to architect a professional React app for clients, your employer, or for yourself.

If you like building things for the Web platform (I sure do), then get these skills now. It will be worth the money and your investment of time.

With strong skills comes more choice and greater freedom.


Tag cloud