How to add Android Share dialog to website using Web Share API

In Chrome 61 for Android, google has launched the navigator.share() method, which allows websites to invoke the native sharing capabilities of the Android / host platform. This method, part of the simple Web Share API allows you to easily trigger the native Android share dialog, passing either a URL or text to share. This is an important API as it gives your end-users user control of how and where the data is shared.

For adding this, there are minimum 3 requirements which needs to be matched,

  • you must be served over HTTPS
  • you can only invoke the API in response to a user action, such as a click (e.g., you can’t call navigator.share as part of the page load)
  • you can also share any URL, not just URLs under your website’s current scope: and you may also share text without a URL
  • you should feature-detect it in case it’s not available on your users’ platform (e.g., via navigator.share !== undefined)

For this, we need to add following java script to your website, ( as a separate file and then import or paste it before closing of body tag.

async function AndroidNativeShareDialog(){
        if(typeof navigator.share==='undefined' || !navigator.share){
                alert('Android Native Share not supported, use browser share');
        } else {
                const canonicalElement = document.querySelector('link[rel=canonical]');
                if (canonicalElement !== null) {
                        URL = canonicalElement.href;    
                } else {
                        URL = window.location.href;

                Title = document.querySelector('meta[property="og:title"]').content;
                Description = document.querySelector('meta[property="og:description"]').content;
                        await navigator.share(
                                {title:Title, text:Description, url:URL});
                } catch (error) {
                        console.log('Error sharing: ' + error);

Now, this javascript function needs to be called from click of some button or text or image, whatever you may need as per your design, we will show how to call it from a label text.

<a class="label label-danger" href="#" onclick="AndroidNativeShareDialog()" class="fa fa-share-alt" style="margin-right:5px;"><span class="fa fa-share-alt"></span> Share</a>

Refer post for “Click to Chat : How to open WhatsApp chat from website button”

You can see the share dialog functional at webpage “Temperature, humidity, moisture sensors”

Related :   Adding a new board or platform to android source & build

One its functional, the share dialog will look like as below,

Reference –

Android Android Commands Android Java Applications Application Libraries Application Stack / User Interface Bash / Shell Scripts Commands and Packages Compilation Content Management System - CMS Core Kernel C Programs Development & Build Development Environment Setup Errors & Failures Flutter git Go Language Programs Hardware Platforms HTML JAVA Programs Kernel & Device Drivers Linux, OS Concepts and Networking Linux Device Drivers Linux Host, Ubuntu, SysAdmin Linux Kernel Linux Networking Middleware Libraries, HAL Monetization / Google AdSense Multimedia - Audio, Video, Images NDK / Middleware / HAL OS Concepts PHP Programming Languages RaspberryPi Scripting and Automation Search Engine Optimisation ( SEO ) Social Media Socurce Code Management ( SCM ) System Administration, Security Testing and Debugging Uncategorized User Interface Web design and development Wordpress Yocto / Bitbake / Openembedded

Leave a Reply / Ask Question