Web Share API in Vue.js

Image by Hans on Pixabay

We all know the Buttons. Medium has them too. Above and below the story we are currently looking at, there are buttons to share the story with the social networks.

When browsing to the story on mobile, for example on Safari or Chrome for iOS, we get the default share button of the browser.

In Chrome its on the right of the address bar and in Safari on the bottom bar.

Native Share Option on Chrome for iOS

Native Share Option on Safari for iOS

Clicking these will allow us to choose the way of sharing. Mail. Twitter. Airdrop. WhatsApp. Whatever we have installed. If we were to pick by mail it will use the title of the page as the subject and add the link to the page in the body.

As a result we have two options. The buttons the site creator provides on the page and the buttons provided by the browser.

Using the Web Share API we have a way to invoke these native sharing capabilities of our host platform (e.g. Android and iOS) programmatically. By pressing a single button on the page.

Instead of having to implement multiple buttons for all the possibilities, maybe missing the one the user wants to use, we could provide one single button.

Single button to share

Additionally we are then able to decide which URL, text and title to use. The URL might be of special interest to us if we want to add a referrer parameter or modify the url in any way.

It’s not yet widely supported, see caniuse.com, but having Chrome and Safari mobile is better than nothing.

In Vue.js we can use a computed property to check whether the Web Share API is supported

computed: {
  webShareApiSupported() {
    return navigator.share
  }
}

On a side note. There is a navigator.canShare() . Improved readability, but, as of now, not supported on Safari for iOS.

We continue with a simple method to trigger the sharing. We can customise title textand url

shareViaWebShare() {
  navigator.share({
    title: 'Title to be shared',
    text: 'Text to be shared',
    url: 'URL to be shared'
  })
}

And adding it to our template

<div v-if="webShareApiSupported">
  <img
    src="@/assets/icon_share.svg"
    @click="shareViaWebShare"
  />
</div>

Clicking on the image, which is only visible in browsers with Web Share API support will open the native share dialog of our host platform.

Usually we will have an alternative, or fallback, if the Web Share API is not supported. In most cases it is the usual assortment of buttons with the social networks used by our target audience.

Fallback

Viewing the button on localhost

We will probably not see the button on the machine we have our IDE on. Our desktop browsers will not support the Web Share API. If we are using Vue CLI and are opening the Network address on our phone we will not see the button too, even though the browser supports the API.

The Web Share API is only supported on localhost or via secure context (https). By default Vue CLI serves via http and when we use our phone to access the development app it will use the Network address. Not localhost.

One way to solve the issue is adding the devServerproperty into our vue.config.js

module.exports = {
  devServer: {
    https: true
  }
}

When serving the app with the new settings, after accepting the not secure warning, after all it is our host, we will see the button.

Making sure the Vue app is later served on https our visitors will see the button too.

If they use one of the supported browsers.