52904


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

* * *

### 【質問の主旨】

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のヘルプフォーラム](https://productforums.google.com/forum/#!topic/chrome-
ja/Q4MurSe4WKc;context-place=forum/chrome-ja)で質問をしました。  
その回答でヘルプフォーラムで質問するよりこちらで質問をした方が良いと勧められ投稿しました。

* * *

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

[![画像の説明をここに入力](https://i.stack.imgur.com/hVVFE.png)](https://i.stack.imgur.com/hVVFE.png)


CC BY-SA 4.0
2019-02-19T02:56:02.880
52865
2019-02-20T13:10:12.110
2019-02-19T17:03:26.523
3068
32232
question
javascript node.js
Chrome developer toolsのCache Storageにアセットが表示されないのはなぜでしょうか？


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

[code]

    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();
      }));
    });
    
[/code]

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

[![vscodeでの警告表示](https://i.stack.imgur.com/ACyiA.png)](https://i.stack.imgur.com/ACyiA.png)

[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-
eslint) といった検証用プラグインもありますのでお好みで。


CC BY-SA 4.0
2019-02-20T13:10:12.110
52904
2019-02-20T13:10:12.110
31716
52865
answer