Sharing is caring
Greg, The JavaScript Whisperer

Greg, The JavaScript Whisperer @jswhisperer

About: Specialist in performance oriented javascript architecture for web, mobile, client and server side. Passionate about realtime web.

Location:
London, UK
Joined:
May 13, 2017

Sharing is caring

Publish Date: Aug 10 '20
6 2

UPDATE

webshare is now supported on desktop browsers!

Wouldn't it be grand to click a button and have your mobile's native share dialog come up?
This used to take funky third party js widgets, or registering for all the various site api's individual; I remember it could take a week to get it right with SEO back in the golden days.

Well friends fear no more check out the webshare api

Now hypothetically say you have a fullscreened progressive web app, looks slick don't it? The problem though is the missing url bar.

Example:

Image Alt

Here's your solution in the form of a method. One caveat is this must be called on a user action like click.

share() {
      if (navigator.share) {
        navigator
          .share({
            title: 'title',
            text: 'description',
            url: `url`
          })
          .catch(err => {
            console.log(`Couldn't share because of`, err.message);
          });
      } else {
        console.log("web share not supported");
      }
    }
Enter fullscreen mode Exit fullscreen mode
<a class="show-mobile" href="#" @click.prevent="share">🔗 share</a>
Enter fullscreen mode Exit fullscreen mode

Oh one more thing, this is only supported on mobile devices. I find this solution better than the user agent sniffing dark arts.

.show-mobile {
    display: none;
}
@media (pointer: coarse) {
  .show-mobile {
    display: inline-block;
  }
}
Enter fullscreen mode Exit fullscreen mode

Why not fire up your cellular device and give it a try with this article, how meta would that be?

Comments 2 total

  • Robin Plötzwich
    Robin PlötzwichAug 10, 2020

    What would be the alternative implementation?
    Say I press share on a device that doesn't support the webshare api?

    Anyways, thanks for article, I think this will be helpful in the future.

Add comment