Is it possible to trigger share menu on smartphones (via HTML/JS)?

Question

Is there an existing possibility to trigger the share functionality in local browsers on smartphones via HTML or JavaScript?

Of course there are many services which

Answer 1

It is possible and I wrote a function to have pretty content to share and observe the asynchronous side effects:

const shareContact = async (title, content) => {
  const text = `${title}

${content}`;

  try {
    await navigator.share({
      text,
    });
  } catch (e) {
    console.log(e);
  }
};

Answer 2

I added this as all answers seems outdated by 2018-07-16.

It is possible, but only in a few browsers (MDN Reference), achieved througth the one method API in navigator:

navigator
    .share({
        title: document.title,
        text: 'Hello World',
        url: window.location.href
    })
    .then(() => console.log('Successful share!                                                                     

                                                        
            

Answer 3

It's now possible with the Web Share API!

However, it isn't widely supported as of yet. Currently, it's only available in Safari (mobile and desktop), and Chrome for Android. See Can I Use for details.

According to Introducing the Web Share API on Google Developers, there are several things to keep in mind:

• your page needs to be served over HTTPS
• you can only call navigator.share(…) in response to a user action, such as a click (i.e., you can't call it on page load)
• you should feature-detect it in case it's not available on your users' platform (e.g., via navigator.share !== undefined)

The Google Developers article also notes that URLs shared with the Share API need not be on your own domain—you can share any URL.

Putting that all together, you could use something like this which uses the Share API if it's available, and falls back to sending an email if it's not^*:

function createShareButton() {
  const btn = document.createElement("button");

  const title = document.title;
  const text = "Check this out!";
  const url = window.location.href;

  btn.innerText = "share" in navigator ? "Share" : "Share via e-mail";

  btn.onclick = () => {
    if (navigator.share !== undefined) {
      navigator
        .share({
          title,
          text,
          url
        })
        .then(() => console.log("Shared!"))
        .catch(err => console.error(err));
    } else {
      window.location = `mailto:?subject=${title}&body=${text}%0A${url}`;
    }
  };

  return btn;
}

document.title = "Demo";
document.body.appendChild(createShareButton());

_{*: Please do consider using a more appropriate fallback, (e.g., social sharing) depending on your use case.}

Answer 4

Answered Apr 10 2013

To my knowledge, there is no such implementation in current browsers on mobile OS's. Since the question interested me - a google search revealed there is work being done in this direction:

• https://dvcs.w3.org/hg/web-intents/raw-file/tip/spec/Overview.html
• http://webintents.org/

Sorry - I do not know a workaround.

Answer 5

You could use the WebView.addJavascriptInterface() method for android.

First you will need to write a class which fires the intent to open the share menu(take a look here) and then implement that class using the addJavascriptInterface() call. After that all you need to do is call the method from your Javascript.

Answer 6

It is possible with a big catch. Currently only available in Chrome for Android and on Safari (desktop and mobile). http://caniuse.com/#feat=web-share

if (navigator.share) {
  navigator.share({
    title: document.title,
    text: "Hello World",
    url: window.location.href
  }).then(() => console.log('Successful share'))
  .catch(error => console.log('Error sharing:', error));
}

https://developers.google.com/web/updates/2016/10/navigator-share