Web Share API使ってみる

SNSの共有ボタン用意するのめんどくさいよねぇ～～～
それWeb Share APIに任せよう。

Web Share API
Web Share APIはネイティブデバイスの共有機能をブラウザで使用できるAPIらしい。
android11のchromeだと、これを呼び出せるって言うわけですね。



ちなみに対応状況はまぁ…



windowsだとEdgeだけ使える感じ、macではsafari
スマホは結構行ける

使ってみる

navigator.share()で使います。戻り地はPromiseです。

navigator.share({
  title: 'サイトタイトル',
  text: '共有時のテキスト（twitterとかでurlの前に入る）',
  url: 'https://example.com'
})
.catch(e => console.error(e));

ちなみに、共有をやめたり、「QRコード」とかで共有するとrejectします。

終わり

共有ボタン色々つけるのはめんどくさいけど、これなら一つで済むから楽！！！
ただ、PCユーザ向けだと今ん所対応状況が今ひとつなんで採用しづらいっすね。
あくまでスマホ向けってことですわ。

ちなみに、このサイトもWeb Share APIつけたんでEdgeとかでためしてガッテン