Service Worker Static Routing API

TSG で 2024-08-24 の LT 大会で話したときのスライドです

Transcript

1. Service Worker Static Routing API TSG #sig-lt 2024 夏 azaika
2. Service Worker Static Routing API
3. Service Worker (SW) • Web ページのリクエスト (fetch) にフックできる JavaScript • ロードの⾼速化に使える • E.g.) 条件を満たすリクエストはローカルのキャッシュから返す 2 HTML GET /image/cat.png GET /index.html
4. Service Worker (SW) • Web ページのリクエスト (fetch) にフックできる JavaScript • ロードの⾼速化に使える • E.g.) 条件を満たすリクエストはローカルのキャッシュから返す 3 HTML SW ブラウザ
5. Service Worker (SW) • Web ページのリクエスト (fetch) にフックできる JavaScript • ロードの⾼速化に使える • E.g.) 条件を満たすリクエストはローカルのキャッシュから返す 4 HTML GET /image/cat.png GET /index.html SW ディスクキャッシュ ロードが⾼速化！ ブラウザ
6. Service Worker Static Routing API
7. SW はオーバースペック？ • SW は主に条件付きキャッシュに使われる • SW は起動に時間がかかる • 起動に専⽤の JS サンドボックスを⽴ち上げる必要がある → ロードを 1ms でも⾼速化したい際のボトルネックに 6 顧客が本当に求めていたもの • ⾼速なロード • 条件付きディスクキャッシュ • 条件を満たなさなければ fetch 顧客にそれほどいらなかったもの • リクエストを柔軟に処理する JS • (オフラインでのカスタム動作)
8. SW Static Routing API • 新API: Static Routing API • SW の代わりに起動する条件付きディスクキャッシュ • ✅ SW より⾼速に動作 • JS を起動しない 7 HTML GET /image/cat.png GET /index.html SW (他にも機能はあるけど割愛)
9. SW Static Routing API • 新API: Static Routing API • SW の代わりに起動する条件付きディスクキャッシュ • ✅ SW より⾼速に動作 • JS を起動しない • SW のコードにこう書けば OK • PNG と JPG はキャッシュから • それ以外は network から 8
10. ついでに • Chrome における⼀部の実装は azaika が担当 • ついでに規格策定も⼀部担当 • 以下の部分にバグがあったら azaika のせいかも！？ • Conditional Syntax (複数条件の or, not などによる連結) • DevTools サポート • バグを⾒つけたら crbug.com で tnak@chromium.org にメンションを！ 9