Web Share APIでシェア体験を向上する

もっと使われてもいいAPIだと思うのですが、意外と知られていない気がするWeb Share APIについて書きます。

Web Share APIとは

Web Share APIは、ネイティブアプリと同じようにOSの機能を使ってシェアするためのAPIです。

実際にこのウェブサイトでも、記事のページで右上のシェアボタンにWeb Share APIを使っています。

シェアボタンを押すと、次のようにOSのシェアメニューが表示されます。

ユーザーは自分がインストールしているアプリをターゲットとしてシェアできるので、このAPIを使うことで利便性が高まるケースが少なくないと思います。

Web Share APIの使い方

Web Share APIはW3Cの仕様もごく短く、とてもシンプルなAPIです。

navigator.share()を使います。share()の引数にはシェアする対象のURL、タイトル、テキストを含むオブジェクトを指定します。この内どれか一つが含まれている必要があります。

navigator.share({
  url: 'https://yo7.dev/web-share',
  title: 'Web Share APIでシェア体験を向上する',
  text: 'もっと使われてもいいAPIだと思うのですが、意外と知られていない気がするWeb Share APIについて書きます。',
}).then(() => {
  console.log('succes')
}).catch(e => {
  console.error(e)
})

Web Share APIの制約としては、HTTPSのサイトでしか使えない・ユーザーアクション（クリックなど）への反応としてしか使えない、というものがあります。

ブラウザサポート

caniuseを見るとブラウザサポートは以下のような状況です。

モバイルの主要ブラウザであるiOSのSafari / AndroidのChromeと、macのSafariだけでサポートされています。 基本的にモバイルでネイティブアプリのようにシェアするためのAPIなので仕方ないですね。

デスクトップでは唯一、macのSafariだけでWeb Share APIが使えるようになっています。 実際に使ってみると、以下のようにmacOSのアプリの一部、ノートやメールでシェアできるメニューが表示されます。

フォールバック

Web Share APIのサポートは一部に限られており、ほとんどのデスクトップの環境など利用できないため、サポートされていない環境でのフォールバックを考える必要があります。

Web Share APIがサポートされていない場合はnavigator.shareがundefinedを返すので、これを使ってシェアしている場合とそうでない場合のロジックを分けることができます。

このブログの実装では以下のように、APIがサポートされていない場合はTwitterでシェアするためのリンクを表示するようにしてみました。

export const ShareLink = props => {
  if (navigator.share) {
    return <WebShareLink {...props} />
  }

  return <TwitterShareLink {...props} />
}

おわり

仕様が小さくてシンプルなAPIですが、かんたんに導入できて活用しやすいWeb Share APIについて書きました。 Web Share Target APIという、ネイティブシェアのターゲットとしてウェブサイト（PWA）を利用するためのAPIもあるので、使ってみて何か発見などがあればそれについても書いてみたいと思います。

参考

• Web Share API - W3C
• Navigator.share() - Web APIs | MDN
• Share like a native app with the Web Share API
• The Web Share API <- Alligator.io

Photo by Daria Nepriakhina on Unsplash