Tweet
Tweet

Slide 1

Slide 1 text

Podcast over PWA #pwanight 2020/02/01 Jxck

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

WIP: Podcast を PWA できるか？ 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Jack