Upgrade to Pro — share decks privately, control downloads, hide ads and more …

PWA基礎_3

gyarasu
November 13, 2018

 PWA基礎_3

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

gyarasu

November 13, 2018
Tweet

More Decks by gyarasu

Other Decks in Technology

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