Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cache 自由自在

864 views

Published on

2018年5月31日 日本Androidの会 Web Working Group「 PWA に備える3ヶ月」vol.3
PWA 実装の勘所であるキャッシュの制御についての講演資料です。
キャッシュコントロール、フレームワークやライブラリの利用によってより効率的、効果的なキャッシュの運用を実装しましょう。

Published in: Technology
  • Login to see the comments

Cache 自由自在

  1. 1. Cache 自由自在 2018/05/31 JAG-WWG 3 Month Road to PWA
  2. 2. 自己紹介 進藤 龍之介 エンジニア/日本Androidの会 Web Working Group PWA 集中勉強会主催 www.crowdfarm.jp 運営 Twitter @ryu_compin Fb ryushindo
  3. 3. PWA、もうやってますか?
  4. 4. 今日の主人公はcache 始めに少しPWAの構造から
  5. 5. PWAの動作 キャッシュとオンラインコンテンツをService Workerが仲立ち Cache Online Service Worker
  6. 6. キャッシュをどう扱うか • そもそものキャッシュの目的 • 高速化 • ネットワークの節約、オフライン対応 • 考慮点 • 更新の反映 • インタラクティブなコンテンツ
  7. 7. キホン • Cache first • Network first • No cache
  8. 8. Cache API • match / matchAll • add / addAll • put • delete • keys
  9. 9. Cache API • 有効期限的なものはありません。 • だからほっといても消えません。 • 同期、更新、削除は自分でやります。
  10. 10. サイト構成によるCache制御 • SPA • AppShell 部分とそれ以外に明確に分けられるので設計がシンプル • Multiple Page • サイト構成によるが、固定コンテンツとそれ以外の個別の制御
  11. 11. 一般的なPWAのCache削除 Activate時に削除 self.addEventListener('activate', function(e) { e.waitUntil( caches.keys().then(function(keyList) { return Promise.all(keyList.map(function(key) { if ( key !== cacheName ) { return caches.delete(key); } })); }) ); return self.clients.claim(); });
  12. 12. 更新タイミング • ServiceWorkerはオンライン時に同期され、次回起動時に更新さ れたものが動作する • Cacheは明示的に更新するか、ServiceWorkerのActivate時に削除、 再取得される
  13. 13. Cache焦げ付き対策プラン • IndexedDBの活用 • Cacheエントリー時にDBにタイムスタンプとURIを記録 • Cache読み出し時にオンラインなら期限切れのものは削除、更新する 一定期間のタイムラグはあるものの、「焦げ付き」はなくなる • Workboxのexpiration.Plugin
  14. 14. フレームワークでできること PWA Builder と Workbox
  15. 15. フレームワークでのCacheコントロール • PWA Builder https://www.pwabuilder.com/ • Work Box https://developers.google.com/web/tools/workbox/
  16. 16. PWA Builder • サイトURLと必要項目を入力すると、ServiceWorker、Manifest、 registerを生成してくれる • Cache制御はURI個別の制御は無し(coming soon?) • Offline page • Offline copy of page • Offline copy with Backup offline page • Cache-first network • Advanced Pre-cache(coming soon) • ServiceWorkerのベース https://github.com/pwa-builder/serviceworkers • 既存のManifestがあるとそこから読み込んでくれる
  17. 17. PWA Builder
  18. 18. PWA Builder
  19. 19. Workbox • Webサイトのオフラインサポートのためのライブラリ • 細かなCache制御 importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js'); workbox.routing.registerRoute( new RegExp('.*.js'), workbox.strategies.networkFirst() );
  20. 20. Workbox • プラグインによる拡張 • workbox.backgroundSync.Plugin • workbox.broadcastUpdate.Plugin • workbox.cacheableResponse.Plugin • workbox.expiration.Plugin workbox.routing.registerRoute( /.(?:png|gif|jpg|jpeg|svg)$/, workbox.strategies.cacheFirst({ cacheName: 'images', plugins: [ new workbox.expiration.Plugin({ maxEntries: 60, maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days }), ], }), );
  21. 21. 組み合わせるといい感じ! • PWA Builderは簡単に素早くPWAの原型を作ってくれる • 細かい制御をWorkboxで追加する
  22. 22. 最後にちょっとチェック ServiceWorkerの仲間たち
  23. 23. ServiceWorkerの仲間たち
  24. 24. ServiceWorkerの仲間たち
  25. 25. ServiceWorkerの仲間たち
  26. 26. ServiceWorkerの仲間たち
  27. 27. ServiceWorkerの仲間たち
  28. 28. ServiceWorkerの仲間たち
  29. 29. ServiceWorker・・・あれれ? ま・・・待ちましょう
  30. 30. 最後に ABCでもPWA!
  31. 31. ABC 2018 Spring ご来場お待ちしております! https://abc.android-group.jp/2018s/

×