PWAで共有機能を実装する / pwa-web-share-api

Transcript

1. PWAで共有機能を実装する Yuhei FUJITA
2. 自己紹介 名前：Yuhei FUJITA Twitter：@Yuhei_FUJITA 生息地：東京 趣味：フィルムカメラ・コーヒー屋巡り よく使う言語：TypeScript・Kotlin・Python よく使うフレームワーク：Vue.js・Django・Laravel お仕事：Android・Frontend・Backend
3. PWAでも共有機能を実装したい
4. 共有といっても２つある 他のアプリに 共有する Web Share API 他のアプリから 共有される Web Share Target API
5. Web Share API
6. Webからコンテンツを共有するためのAPI ←これをWebアプリから開けるようになる • ブラウザ自体の共有機能ではなく JavaScriptから共有メニューを開ける • 任意のコンテンツ（テキスト）を共有できる • PWAでなくても利用可能 • 主なモバイルブラウザやMac Safariで利用可能
7. navigator.share()に渡すデータ ブラウザがnavigator.share()を サポートしているかチェック navigator.share()は Promise<void>を返すので awaitをつける navigator.share()を呼び出して共有 https://developer.mozilla.org/ja/docs/Web/API/Navigator/share
8. Web Share API Level 2ではメディアコンテンツ対応 共有したい画像などを File[]として渡す ※使えるのはAndroid Chromeなど 一部のブラウザのみ https://chromestatus.com/feature/4777349178458112
9. Web Share Target API
10. PWAを共有先に追加するAPI ←ここにインストールしたPWAが表示される • manifest.jsonに定義することで有効になる • GET/POSTで受け取れるものなら受け取れる • Safariは残念ながら非対応（いつものこと） • ネイティブアプリと違うのは複数設定はできない
11. 渡されるPath HTTP Method (GET or POST) 渡される情報の定義 GETの場合はqueryとして渡される Web Share Target APIの設定 manifest.jsonに設定内容を定義 例：GET /foo?title=aaa&text=bbb&url=ccc https://web.dev/web-share-target/
13. Advent Calendar 2021でも書いてます！ ←ココ https://qiita.com/advent-calendar/2021/pwa
14. 参考文献 • Navigator.share() - Web API | MDN ◦ https://developer.mozilla.org/ja/docs/Web/API/Navigator/share • Web Share API Level 2 - Chrome Platform Status ◦ https://chromestatus.com/feature/4777349178458112 • Receiving shared data with the Web Share Target API ◦ https://web.dev/web-share-target/