HTML
JavaScript
Safari
TypeScript
WebShareAPI

iOS12.2でWebShareAPIがきてたので、検証してみた

先日普通にiPhoneでQiitaを見てたら...

2019_1.jpg

なんじゃこりゃ!

2019_2.png

まじか!

と言う感じでiOS12.2からWebShareAPIに対応したみたいです。(Qiitaの対応早すぎかよ...)

なので、Vue+TypeScript+bulma+parcelでサクッとデモページを作って検証してみました。


検証

iOS12.2ではtextとurlのみ反応し、titleは反応しないみたいです。

また、httpsじゃないとnavigator.shareがundefinedになるようです。

AndroidのChromeもWebShareAPIに対応済みですが未検証です。


使用想定

テキストとURLしか共有できないのでできることは限られますが、共有用のURLや複数のURLを共有したいときに使えると思います。

また、フレンドコードをボタンをタップしてすぐに共有なんて使い方もできると思います。


TypeScriptでの型定義

interface Navigator {

share?(option: { url: string } | { text: string } | { title: string }): Promise<void>
}

// コンパイルエラー
navigator.share({text: "fogefoge"})

if (navigator.share) {
navigator.share!({text: "fogefoge"})
}

未対応のブラウザも多いので、share?で定義してます。

strictモードで普通に使おうとするとコンパイルエラーになります。

また、paramはurl、title、textをいずれか1つ以上なので、union型で定義しました。


最後に

Androidは対応済みであること、iOSは最新OSのシェア率が高いのもあって、これからはよくあるSNS共有リンクに変わってWebコンテンツ上に共有ボタンが置かれるかもしれません。

まだまだ発展途上って感じですが、画像などを共有できるようになったら、TwitterAPIを介さずに画像ツイートなどができそうですね!


参考