0

いつもお世話になっています。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。


【質問の主旨】

「AMPで作成したサイト」にサービスワーカーをインストールをしているにも関わらず、Chrome developer toolsのCache Storageにアセットが表示されないのはなぜでしょうか?

【質問の補足】

上記【質問の主旨】に対して下記5点を補足説明します。

1.

【質問の主旨】にある「AMPで作成したサイト」は下記のURLで一般公開しています。
https://e-yota-ec.com/article.amp.html

2.

【質問の補足】1.のURLにアクセスして、Chrome developer toolsのCache Storageを確認すると、
"my-site-cache-v1"という任意で定義した、キャッシュ名は表示されるものの、アセットは表示されません。なおアセットをキャッシュするためにChrome developer toolsの[Service Workers]→[Application]→[Update on reload]にはチェックを入れています。

画像の説明をここに入力

3.

「AMPで作成したサイト」のコードはGitHubで公開しています。
https://github.com/echizenyayota/e-yota-ec.com/tree/developer_3

4.

【質問の補足】3.で公開しているコードでサービスワーカーに関連するファイル(sw.jsとsw-install.js)は、下記のGoogleの開発者ページをコピペしています(ただしsw.jsで定義したurlsToCacheは除く)
https://developers.google.com/web/fundamentals/primers/service-workers/

5.

【質問の補足】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以降の説明がよく分かりません。


以上、ご確認のほどよろしくお願い申し上げます。

5
  • developer tools の console タブになんらかのエラーが吐かれていませんか。吐かれていたら質問文に追記してください。
    – wata
    2019年3月14日 10:06
  • ↑デモ環境の url あったんですね、すみません。おそらく urlsToCache'/' のところで、トップページがなくて落ちてるんだと思います。 '/' を消すか、適当に index.html 作るかしたら期待する動作にならないでしょうか。
    – wata
    2019年3月15日 8:26
  • wataさん、コメントありがとうございます。こちらのGitHubに記述している通りにコードを修正してみましたが、アセットが表示されない状態です。 2019年3月16日 5:11
  • 一般公開url にて開発者ツールの「Network」タブを見ると、「home.png」と「Icon」が 404 と出ています。この辺をサーバーにアップしたら変わらないでしょうか。若干もぐら叩き感ありますから、cache.addAll(urlsToCache); のところを urlsToCache.forEach(function (url) { cache.add(url).catch(function (e){ console.log("ERROR! : " + url); })}); と書くとエラーが出てる url を特定できると思います。
    – wata
    2019年3月18日 3:00
  • wataさん。コメントありがとうございます。 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オブジェクトのメソッドを読んでいると、addaddAllでは若干違うものの、とりあえずアセットがキャッシュされたので、Googleの公式ドキュメントにあるリクエストをキャッシュして返す以降を写経します。 2019年3月19日 10:21

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。