Help us understand the problem. What is going on with this article?

Web Share API が Safari で使えるようになったので早速使ってみる

More than 1 year has passed since last update.

概要

昨日 (2018/9/26) リリースされた Safari Technology Preview Release 66Web Share API に対応したということで、早速試してみました。

これで Web Share APIAndroid の ChromeSafari Technology Preview Release 66 で使用できるようになりました。

下記に本稿のソースコードとデモページを用意しました。
im36-123/webShareApi | GitHub
デモページ

実装したコード

<button> をクリックすると navigator.share() メソッドを実行します。

<!DOCTYPE html>
<html lang='ja'>
<head>
    <title>Web Share API</title>
</head>
<body>
    <button>Share</button>
    <script>
        const button = document.querySelector('button')
        button.addEventListener('click', (e) => {
            navigator.share({
                url: '',
                title: document.title,
                text: 'Web Share API を使ってみる'
            })
        })
    </script>
</body>
</html>

実行結果

Safari の場合

Safari では下記のように表示されます。
Sep-27-2018 23-27-43.gif

Android の Chrome の場合

Android の Chrome では下記のように表示されます。
ネイティブのシェアメニューが表示されます。
9月-28-2018 16-11-02.gif

参考

Release Notes - Safari Technology Preview - Safari - Apple Developer
Introducing the Web Share API  |  Web  |  Google Developers

im36-123
地方で働いていたフロントエンドエンジニア
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away