概要

ブラウザのシェアボタンでネイティブのシェア機能を呼び出す時に便利な「Web Share API」
を実装したのでその作業メモです。

• Navigator.share() - Web API | MDNを参考にしました。

注意点

• 全てのブラウザで対応していません。
  • モバイルの標準的なブラウザは全て対応
  • PCはSafariとEdgeのみ
• HTTPSを使っている場合のみ利用可能

実装内容

以下のような感じになりました。（NuxtJSを使っています。）

• ボタンをclickした時に navigator.share を呼び出しています。
• navigator.share が非対応の場合にはボタンを非表示にしています。
• server sideではnavigator objectが定義されていないので、client側のみで表示制御の評価を行います。

<template>
  <div>
    <button
      v-if="supportWebShareApi"
      type="button"
      @click="share"
    >
      共有
    </button>
  </div>
</template>

<script>
export default {
  computed: {
    supportWebShareApi() {
      if (process.client) {
        return !!navigator.share
      } else {
        return false
      }
    },
  },
  methods: {
    async share() {
      try {
        await navigator.share({
          title: 'Share title',
          text: 'Share content',
          url: 'https://your-domain.com/hoge/fuga',
        })
      } catch (err) {
        console.error(err)
      }
    },
  },
}
</script>

以上です。