More than 5 years have passed since last update.

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

Last updated at 2018-09-28Posted at 2018-09-27

概要

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

これで Web Share API は Android の Chrome と Safari 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 では下記のように表示されます。

Android の Chrome の場合

Android の Chrome では下記のように表示されます。
ネイティブのシェアメニューが表示されます。

参考

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up