Podcast over PWA

Lightning Talk at PWA Night Conference 2020/02/01
Talk about background-fetch and more

https://conf2020.pwanight.jp/

Transcript

1. Podcast over PWA
   #pwanight 2020/02/01 Jxck
   

   View Slide

2. View Slide

3. WIP: Podcast を PWA できるか？
   3
   

   View Slide

4. Podcast とは
   4
   RSS を購読する
   RSS を更新
   リンクされた
   音声ファイルを取得
   音声ファイルを配布
   実態は音声リンク付き RSS
   

   View Slide

5. 音声再生と Range リクエスト
   5
   

   View Slide

6. Service Worker と Range
   ヘッダがある
   レスポンスになってる
   6
   

   View Slide

7. 7
   タグからのリクエスト
   途中からリクエスト
   途中からレスポンス
   

   View Slide

8. 8
   Service Worker を通すと
   が消されてる
   全部リクエスト
   全部レスポンス
   

   View Slide

9. なんだバグか、、ではない
   9
   そもそも Range はブラウザでどう扱うか
   ちゃんと決まってないところがある
   Service Worker での onfetch とかを
   考える上では、仕様から考えないと
   -- https://jakearchibald.com/2018/i-discovered-a-browser-bug/
   

   View Slide

10. 従来の Cache 戦略じゃ無理
    ● Range リクエストできない
    ○ 全部取得できればキャッシュできるが
    ○ 長いのは途中で切れる、でも途中からはとれない
    ● Range リクエストできても
    ○ 複数のレスポンスの結合も必要あ
    ○ 歯抜けは？オフラインで止まる？
    ● アプリみたいにダウンロードできれば。。
    10
    

    View Slide

11. background fetch
    ● 裏でダウンロードする
    ● ブラウザを閉じても継続
    ● 終わったら Cache に入れとける
    ● Podcast っぽい!!
    11
    

    View Slide

12. 12
    DEMO: https://youtu.be/S2JXt2oxvv4
    

    View Slide

13. 13
    話さなかったこと
    ● Periodic-Background-Sync
    ○ RSS を定期的に同期
    ● Content Index API
    ○ キャッシュしたエピソードの表示
    ● MediaSession API
    ○ ロック画面などで音声を操作
    ● etc, etc, etc
    徐々に Podcast が実現できるように
    

    View Slide

14. Jack
    

    View Slide