Web Share API を使ったページ共有を試してみた #JavaScript

はじめまして! 2019年10月フロントエンドエンジニアとして入社した上垣です。
入社してから今まで、 Toreta nowのブラウザ版開発に携わっています。

toC サービスを開発していく中でよくある要件として、SNSへのページ共有が挙げられると思います。ただ、実装したことがある方ならおわかりと思いますが、シェアさせたいサービスごとに script を埋め込むのは結構大変です。

代表的なサービスの共有方法

Twitter
- Twitter Publish
Facebook
- シェアボタン - ソーシャルプラグイン - ドキュメンテーション - Facebook for Developers
LINE
- LINE Social Plugins

Toreta now で共有機能の実装を検討していく中で、Web Share API の存在を知ったので、サービスに導入できるか検証してみました。

Web Share APIとは

Web Share API は、ユーザーが選択した任意の宛先にコンテンツを共有するためのAPIです。
W3Cで仕様が公開されており、現在のステータスは W3C Editors Draft(編集者草案) となっています。

仕様

Web Share API

GitHub

GitHub - w3c/web-share: Web API proposal for sharing data from a web page

対応ブラウザ

Web Share API はまだ編集者草案のステータスですが、2019年12月時点では、Safari, iOS Safari と Chrome for Android の最新版で実装されています。

Can I use... Support tables for HTML5, CSS3, etc

使用方法

window.navigator の share メソッドをシェアしたい内容を引数に渡して呼び出すことで、共有用ダイアログが表示されます。

JavaScript で実装してみたコードは下記のようになりました。

 async share() {
    if (!window.navigator.share) ｛
        alert("ご利用のブラウザでは共有できません。");
        return;
    }

    try {
      await window.navigator.share({
        title: 'Share API で共有！',
        text: 'ご覧の通り、お手軽にSNSにリンクを供することができます。',
        url: 'https://example.com/hogehoge',
      });
      alert('共有が完了しました。');
    } catch (e) {
      console.log(e.message);
    }
}