HTML
JavaScript

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


概要

昨日 (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