Voice Record Pro — The React app you build in the course ProfessionalReactApp.com.

Are you looking to get the skills to become a 6 figure Front-End Engineer, and master the insanely popular React.js ecosystem?

If so, then sign up for an exciting new training program at ProfessionalReactApp.com!

Avoid mistakes — like a ton of technical debt — and learn how to architect your app the right way by getting guidance from a pro. The fastest, easiest, most hassle-free way to learn is to have an expert guide you on your path to app mastery.

Introduction

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.

How To Use It

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.

The 3 Requirements

#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!

How To Develop Professional React Apps

Hey, I work as a Senior Front End Engineer in the industry, and I develop software applications for a lot of successful startups and well known companies using React.

UI Engineering skills are in demand, but you need to have the right skills. And you need the right foundation to set up your code for success.

That’s why I’m teaching developers how to develop professional React Apps in my exciting new training program at ProfessionalReactApp.com. It’s a step-by-step video course that shows you how to design and architect a professional React app for clients, your employer, or for yourself using an advanced foundational UI boilerplate that has everything you need.

With strong skills comes more choice and greater freedom.