JS:WEB-API — Web Share API to share like a native app- Part 1

Hey, guys am back with another blog on Web Share API.

Sharing is one of the super important features on the web and it became easier to implement in your websites, blogs, etc., with the web API.

Web Share API

The Web Share API makes it possible for web apps to share links, text, and files to other apps installed on the device in the same way as a native app.

Check whether the share is API is supported in the browser using the below snippet.

navigator.share()

url — A string representing the URL to be shared usually the document URL.

title — A string representing the title to be shared.

text — A string representing the description to be shared.

navigator.share() accepts the JSON object as input param. The input object must contain anyone of the following properties title, text, url, files.

Requirements:

However, Web Share API allows us to use the native share feature there are some rules we need to follow.

1. The site should be served over https.
2. API can be invoked only on the user action and it can’t be invoked on the onload method.

Live Demo

Open the below URL in the mobile browser and click on share to see it in action.

https://web-share-api-full-demo.netlify.app

Support

Chromium Androids and Safari.

In part 2 we will see how to share files. Stay Tuned!!!

This article is made with ❤️ Please do follow our publication to know more about Javascript.

Awesome Javascript