1

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


【質問の主旨】

JavaScriptのコードをクライアントマシンのNode.jsで実行しているにも関わらず、Chrome developer toolsのCache Storageにアセットが表示されない(1.png)のはなぜでしょうか?

(参考ページ)
https://developers.google.com/web/tools/chrome-devtools/manage-data/local-storage?hl=ja#application-cache

【質問の補足】

【質問の主旨】について以下5点を補足します。

1.

Cache Storageにアセットするために使用しているJavaScriptのコードは以下のGitHubで公開しているURLです。

https://github.com/webopt/ch9-service-workers/blob/master/htdocs/sw-install.js
https://github.com/webopt/ch9-service-workers/blob/master/htdocs/sw.js

sw-install.jsとsw.jsには何も記述されていませんが、下記のhackmdのURLにそれぞれ追記しています。
https://hackmd.io/6c2T_isvR8iKIF3peIE9jg

2.

developer toolで[Application]→[Service Workers]を表示させると、Service Workerは動作しているように見えます(2.png)。

3.

1.pngと2.pngの画像はローカル開発環境(http://localhost:8080/)で表示させています。

4.

今回の質問内容やコードについては、「Webサイトパフォーマンス実践入門」という本のP228からP229を参考にしています。

https://www.shoeisha.co.jp/book/detail/9784798155098

5.

stackoverflowで質問投稿をする前に、Google Chromeのヘルプフォーラムで質問をしました。
その回答でヘルプフォーラムで質問するよりこちらで質問をした方が良いと勧められ投稿しました。


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

画像の説明をここに入力

3
  • 【質問の補足】の2で挙げている2.pngはこちらのアドレスでご覧になれます。合わせてご確認よろしくお願いします。 takaiba.net/stackoverflow/2.png Commented 2019年2月19日 3:00
  • 質問は後からでも [編集] できるので、補足内容があれば質問本文に直接追記してみてください。
    – cubick
    Commented 2019年2月19日 3:23
  • マルチポスト teratail.com/questions/175471
    – htb
    Commented 2019年3月11日 4:29

1 件の回答 1

1

誤字を直したら手元の環境では動きました。
環境を作っているときに何度かパスがらみのエラーに遭遇しましたが、それらはコンソールで表示されるので分かると思います。

self.addEventListener("install", function(event) {
  event.waitUntil(caches.open(cacheVersion).then(function(cache) { // chashes -> caches
      return cache.addAll(cachedAssets); // chache -> cache
  }).then(function() {
      return self.skipWainting();
  }));
});



余談ですが、エディタにこだわりが無ければ Visual Studio Code をオススメします。
以下のようにちょっとした警告表示(厳格なチェックではないですが)等もしてくれて便利です。

vscodeでの警告表示

ESLint といった検証用プラグインもありますのでお好みで。

1
  • wataさん。 返信が遅くなり恐縮です。 >誤字を直したら手元の環境では動きました。 wataさんに指摘していただいた箇所を修正すると画像の通り、選択したキャッシュとキャッシュされているアセットが表示されるようになりました。アドバイス助かります! >エディタにこだわりが無ければ Visual Studio Code をオススメします おすすめありがとうございます。Visual Studio Codeを使うことも検討してみます。これからもどうぞよろしくお願い申し上げます。 Commented 2019年2月23日 10:37

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

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。