PWA基礎_3

- キャッシュ戦略
- ストレージ選択
についてまとめてあります。

Transcript

1. PWAೖ໳ߨ࠲
   Part3
   ʔ PWAͷجૅᶅ ʔ
   

   View Slide

2. ໨࣍
   ▹  PWAʹ͓͚ΔΩϟογϡͷλΠϛ
   ϯά
   ▹  Ωϟογϡઓུ
   ▹  ετϨʔδͷબ୒
   2
   

   View Slide

3. PWAʹ͓͚ΔΩϟογϡͷλΠϛϯά
   

   View Slide

4. Ωϟογϡͷ࢖༻λΠϛϯάʢ1ʣ
   4
   タイミング 動作・用途・キャッシュ対象
   Install時 •  依存関係として静的アセット
   •  非依存関係として、すぐに必要ないサイズ
   が大きいリソース
   Activate時 •  不要なキャッシュの削除
   •  IndexedDBのスキーマ移行
   •  古いSWがActive時にやり残した処理
   ユーザ操作時 •  「あとで読む」や「オフライン用に保存」ボタ
   ンクリック時のリソース取得
   ネットワークの応答時 •  受信トレイや記事コンテンツなど、頻繁に更
   新されるリソース
   •  キャッシュ内にリクエストに一致するものが
   あればキャッシュを使用
   

   View Slide

5. Ωϟογϡͷ࢖༻λΠϛϯάʢ2ʣ
   5
   タイミング 動作・用途・キャッシュ対象
   プッシュメッセージ時 •  通知に関するコンテンツ（チャットメッセージ、
   ニュース速報、メール）
   •  即座に同期する必要があるコンテンツ
   （ToDoリストのアップデートなど）
   バックグラウンド同
   期時
   •  ソーシャルメディアのタイムラインなど、急を
   要さないアップデート
   

   View Slide

6. Ωϟογϡઓུ
   

   View Slide

7. Ωϟογϡઓུ
   7
   戦略 説明
   キャッシュのみ •  静的アセット（install時キャッシュしたもの）
   ネットワークのみ •  GET以外のリクエストなど、オフラインに相当しな
   いもの
   キャッシュファースト
   （オフラインファースト）
   •  キャッシュになければネットワークから取得
   キャッシュとネットワーク
   の競争
   •  キャッシュ、ネットワークの双方を利用し、速い方を
   採用
   •  ディスクアクセスが低速な端末でのパフォーマンス
   追求
   ネットワークファースト •  頻繁に更新されるリソース
   •  ネットワーク低速時に待ちが発生
   先にキャッシュ、次にネッ
   トワーク
   •  頻繁に更新されるリソース
   •  とりあえずキャッシュから取得し、ネットワークから
   取得した時点で更新
   •  閲覧中のコンテンツが更新されるとユーザの混乱
   を招く
   

   View Slide

8. ετϨʔδͷબ୒
   

   View Slide

9. ετϨʔδͷબ୒
   9
   タイプ 使用するもの
   ローカル
   key-valueストア
   •  Cache
   ローカル
   構造化ストレージ
   •  IndexedDB
   グローバル
   バイトストリーム
   •  Cloud Storage
   ଟ͘ͷϒϥ΢βͰαϙʔτ͞Ε͍ͯΔ͜ͱɺඇಉظI/OͰ͋Δ͜
   ͱ͕બఆͷج४ͱͳΔ
   

   View Slide

10. END
    

    View Slide