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