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
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