Save 37% off PRO during our Black Friday Sale! »

Podcast over PWA

1ff811939fd0923df8321ec6d8bf9d4b?s=47 Jxck
February 01, 2020

Podcast over PWA

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

https://conf2020.pwanight.jp/

1ff811939fd0923df8321ec6d8bf9d4b?s=128

Jxck

February 01, 2020
Tweet

Transcript

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

  2. None
  3. WIP: Podcast を PWA できるか? 3

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

    実態は音声リンク付き RSS
  5. 音声再生と Range リクエスト 5

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

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

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

  9. なんだバグか、、ではない 9 そもそも Range はブラウザでどう扱うか ちゃんと決まってないところがある Service Worker での onfetch

    とかを 考える上では、仕様から考えないと -- https://jakearchibald.com/2018/i-discovered-a-browser-bug/
  10. 従来の Cache 戦略じゃ無理 • Range リクエストできない ◦ 全部取得できればキャッシュできるが ◦ 長いのは途中で切れる、でも途中からはとれない

    • Range リクエストできても ◦ 複数のレスポンスの結合も必要あ ◦ 歯抜けは?オフラインで止まる? • アプリみたいにダウンロードできれば。。 10
  11. background fetch • 裏でダウンロードする • ブラウザを閉じても継続 • 終わったら Cache に入れとける

    • Podcast っぽい!! 11
  12. 12 DEMO: https://youtu.be/S2JXt2oxvv4

  13. 13 話さなかったこと • Periodic-Background-Sync ◦ RSS を定期的に同期 • Content Index

    API ◦ キャッシュしたエピソードの表示 • MediaSession API ◦ ロック画面などで音声を操作 • etc, etc, etc 徐々に Podcast が実現できるように
  14. Jack