前回 Service WorkerをWebサイトに導入する で、サンプルコードを理解せずそのまま利用したため、全てのリソースがキャッシュされてしまったが、追加しない方法が分かった。
まず、Service Workerがインストールされていない場合、installのイベントが発生する。
self.addEventListener('install', func()) では、キャッシュを一覧として保存するための名前、キャッシュを行うリソースを指定し、キャッシュを行う。
再度サイトにアクセスした時、 self.addEventListener('fetch', func()) でfetchのイベントをキャッチする。
サイトを構成するリソース(css, js, image等)に対し行われるメソッド(GET等)の度に呼び出され、初回に宣言したキャッシュストレージに追加していくの部分が cache.put(event.request, response.clone()) に該当する。
つまり、追加したくないリソースはputしなければ良いので、fetchイベントリスナーを書かなければよい。
一部は動的に追加したいが、したくないものもある場合は条件式で場合分けすることで対応が可能になる。
if (event.request.destination !== 'image') {
cache.put(event.request, response.clone();
}
