PWAで共有機能を実装する Yuhei FUJITA

自己紹介 名前：Yuhei FUJITA Twitter：@Yuhei_FUJITA 生息地：東京 趣味：フィルムカメラ・コーヒー屋巡り よく使う言語：TypeScript・Kotlin・Python よく使うフレームワーク：Vue.js・Django・Laravel お仕事：Android・Frontend・Backend

PWAでも共有機能を実装したい

共有といっても２つある 他のアプリに 共有する Web Share API 他のアプリから 共有される Web Share Target API

Web Share API

Webからコンテンツを共有するためのAPI ←これをWebアプリから開けるようになる ● ブラウザ自体の共有機能ではなく JavaScriptから共有メニューを開ける ● 任意のコンテンツ（テキスト）を共有できる ● PWAでなくても利用可能 ● 主なモバイルブラウザやMac Safariで利用可能

navigator.share()に渡すデータ ブラウザがnavigator.share()を サポートしているかチェック navigator.share()は Promiseを返すので awaitをつける navigator.share()を呼び出して共有 https://developer.mozilla.org/ja/docs/Web/API/Navigator/share

Web Share API Level 2ではメディアコンテンツ対応 共有したい画像などを File[]として渡す ※使えるのはAndroid Chromeなど 一部のブラウザのみ https://chromestatus.com/feature/4777349178458112

Web Share Target API

PWAを共有先に追加するAPI ←ここにインストールしたPWAが表示される ● manifest.jsonに定義することで有効になる ● GET/POSTで受け取れるものなら受け取れる ● Safariは残念ながら非対応（いつものこと） ● ネイティブアプリと違うのは複数設定はできない

渡される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/

No content

Advent Calendar 2021でも書いてます！ ←ココ https://qiita.com/advent-calendar/2021/pwa

参考文献 ● 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/