いつもお世話になっています。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。
【質問の主旨】
「AMPで作成したサイト」にサービスワーカーをインストールをしているにも関わらず、Chrome developer toolsのCache Storageにアセットが表示されないのはなぜでしょうか?
【質問の補足】
上記【質問の主旨】に対して下記5点を補足説明します。
1.【質問の主旨】にある「AMPで作成したサイト」は下記のURLで一般公開しています。
https://e-yota-ec.com/article.amp.html
【質問の補足】1.のURLにアクセスして、Chrome developer toolsのCache Storageを確認すると、
"my-site-cache-v1"という任意で定義した、キャッシュ名は表示されるものの、アセットは表示されません。なおアセットをキャッシュするためにChrome developer toolsの[Service Workers]→[Application]→[Update on reload]にはチェックを入れています。
「AMPで作成したサイト」のコードはGitHubで公開しています。
https://github.com/echizenyayota/e-yota-ec.com/tree/developer_3
【質問の補足】3.で公開しているコードでサービスワーカーに関連するファイル(sw.jsとsw-install.js)は、下記のGoogleの開発者ページをコピペしています(ただしsw.jsで定義したurlsToCache
は除く)
https://developers.google.com/web/fundamentals/primers/service-workers/
【質問の補足】4.で紹介したGoogleの開発者ページでは「つまずきやすいポイント」が紹介されています。
回避策は、
chrome://serviceworker-internals
にアクセスし、[Open DevTools window and pause JavaScript execution on service worker startup for debugging] にチェックを入れて、install イベントの開始時に debugger 文を記述してください。 これを、Pause on uncaught exceptions とともに使用すると、問題が明らかになります。
とありますが、ここに書かれていることやリンクが貼られているPause on uncaught exceptions
以降の説明がよく分かりません。
以上、ご確認のほどよろしくお願い申し上げます。
urlsToCache
の'/'
のところで、トップページがなくて落ちてるんだと思います。'/'
を消すか、適当に index.html 作るかしたら期待する動作にならないでしょうか。404
と出ています。この辺をサーバーにアップしたら変わらないでしょうか。若干もぐら叩き感ありますから、cache.addAll(urlsToCache);
のところをurlsToCache.forEach(function (url) { cache.add(url).catch(function (e){ console.log("ERROR! : " + url); })});
と書くとエラーが出てる url を特定できると思います。cache.addAll(urlsToCache);
の代わりに教えていただいたurlsToCache.forEach(function (url) { cache.add(url).catch(function (e){ console.log("ERROR! : " + url); })});
を実行すると、2つのことが分かりました。 1.'/icons/home.png'
と'/icons/Icon'
にエラーが発生すること。2. こちらの画像のとおり、iconsディレクトリ以外のアセットはすべて、Cache Strageに収められていること。公式ドキュメントでCacheオブジェクトのメソッドを読んでいると、add
とaddAll
では若干違うものの、とりあえずアセットがキャッシュされたので、Googleの公式ドキュメントにあるリクエストをキャッシュして返す以降を写経します。