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

1. Cache 自由自在
2018/05/31
JAG-WWG
3 Month Road to PWA

2. 自己紹介
進藤 龍之介
エンジニア／日本Androidの会
Web Working Group PWA 集中勉強会主催
www.crowdfarm.jp 運営
Twitter @ryu_compin
Fb ryushindo

3. PWA、もうやってますか?

4. 今日の主人公はcache
始めに少しPWAの構造から

5. PWAの動作
キャッシュとオンラインコンテンツをService
Workerが仲立ち
Cache
Online
Service Worker

6. キャッシュをどう扱うか
• そもそものキャッシュの目的
• 高速化
• ネットワークの節約、オフライン対応
• 考慮点
• 更新の反映
• インタラクティブなコンテンツ

7. キホン
• Cache first
• Network first
• No cache

8. Cache API
• match / matchAll
• add / addAll
• put
• delete
• keys

9. Cache API
• 有効期限的なものはありません。
• だからほっといても消えません。
• 同期、更新、削除は自分でやります。

10. サイト構成によるCache制御
• SPA
• AppShell 部分とそれ以外に明確に分けられるので設計がシンプル
• Multiple Page
• サイト構成によるが、固定コンテンツとそれ以外の個別の制御

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. 更新タイミング
• ServiceWorkerはオンライン時に同期され、次回起動時に更新さ
れたものが動作する
• Cacheは明示的に更新するか、ServiceWorkerのActivate時に削除、
再取得される

13. Cache焦げ付き対策プラン
• IndexedDBの活用
• Cacheエントリー時にDBにタイムスタンプとURIを記録
• Cache読み出し時にオンラインなら期限切れのものは削除、更新する
一定期間のタイムラグはあるものの、「焦げ付き」はなくなる
• Workboxのexpiration.Plugin

14. フレームワークでできること
PWA Builder と Workbox

15. フレームワークでのCacheコントロール
• PWA Builder
https://www.pwabuilder.com/
• Work Box
https://developers.google.com/web/tools/workbox/

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. PWA Builder

18. PWA Builder

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. 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. 組み合わせるといい感じ！
• PWA Builderは簡単に素早くPWAの原型を作ってくれる
• 細かい制御をWorkboxで追加する

22. 最後にちょっとチェック
ServiceWorkerの仲間たち

23. ServiceWorkerの仲間たち

24. ServiceWorkerの仲間たち

25. ServiceWorkerの仲間たち

26. ServiceWorkerの仲間たち

27. ServiceWorkerの仲間たち

28. ServiceWorkerの仲間たち

29. ServiceWorker・・・あれれ？
ま・・・待ちましょう

30. 最後に
ABCでもPWA！

31. ABC 2018 Spring ご来場お待ちしております！
https://abc.android-group.jp/2018s/