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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. Web Share API
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Web Share Target API
   

   View Slide

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

    View Slide

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/
    

    View Slide

12. View Slide

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

    View Slide

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/
    

    View Slide