質問: お世話になっています。 下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。 --- ### 【質問の主旨】 JavaScriptのコードをクライアントマシンのNode.jsで実行しているにも関わらず、Chrome developer toolsのCache Storageにアセットが表示されない(1.png)のはなぜでしょうか? (参考ページ) ### 【質問の補足】 【質問の主旨】について以下5点を補足します。 1. Cache Storageにアセットするために使用しているJavaScriptのコードは以下のGitHubで公開しているURLです。 sw-install.jsとsw.jsには何も記述されていませんが、下記のhackmdのURLにそれぞれ追記しています。 2. developer toolで[Application]→[Service Workers]を表示させると、Service Workerは動作しているように見えます(2.png)。 3. 1.pngと2.pngの画像はローカル開発環境()で表示させています。 4. 今回の質問内容やコードについては、「Webサイトパフォーマンス実践入門」という本のP228からP229を参考にしています。 5. stackoverflowで質問投稿をする前に、Google Chromeのヘルプフォーラムで質問をしました。 その回答でヘルプフォーラムで質問するよりこちらで質問をした方が良いと勧められ投稿しました。 --- 以上、ご確認のほどよろしくお願い申し上げます。 ![画像の説明をここに入力](https://i.stack.imgur.com/hVVFE.png)
回答: 誤字を直したら手元の環境では動きました。 環境を作っているときに何度かパスがらみのエラーに遭遇しましたが、それらはコンソールで表示されるので分かると思います。 ``` 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 といった検証用プラグインもありますのでお好みで。