最近iOSに対応したばかりのWeb Share APIですが、実装する際に嵌ったのでメモ。

デモ

こんな感じで、navigator.share を使って起動させます。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Web Share API</title>
  </head>
  <body>
    <button onclick="share()">シェアする</button>
    <script type="text/javascript">
      function share() {
        navigator.share({
         title: 'Example',
         text: 'テスト用です',
         url: 'https://example.com',
       });
      }
    </script>
  </body>
</html>

localhostで実行した場合

うまく動作します。

IP指定かつHTTPで動作させた場合

TypeError: navigator.share is not a function. エラーが出て、起動しません。

まとめ

Web Share APIをテストする際は、localhostでテストしましょう。
localhostでも動作しない仕様だったらテストが困難でしたが、動作して良かった……