先日普通にiPhoneでQiitaを見てたら...
なんじゃこりゃ！
まじか！
と言う感じでiOS12.2からWebShareAPIに対応したみたいです。(Qiitaの対応早すぎかよ...)
なので、Vue+TypeScript+bulma+parcelでサクッとデモページを作って検証してみました。
検証
- GitHub: https://github.com/katsuyaU/sample-web-share-api
- デモページ: https://katsuyau.github.io/sample-web-share-api/
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を介さずに画像ツイートなどができそうですね！