ワークボックスのランタイムキャッシュを使用すると、クロムのキャッシュストレージにリクエストが表示されません。

Question

ワークフローランタイムキャッシュを使用して外部呼び出しをキャッシュしています（materialize.cssもその1つです）。

しかし、キャッシュストレージに私のランタイムキャッシュが空になります：私のネットワーク]タブでは、要求がserviceWorker（正常に見える）から来ていることを示して

あなたは私を見ることができますクロームのアプリケーションタブのサービスワーカーで、これはウェブサイトです：https://quack.surge.sh/

サービスワーカーコード：

const workboxSW = new self.WorkboxSW(); 
workboxSW.precache(fileManifest); 
workboxSW.router.registerNavigationRoute("/index.html");workboxSW.router.registerRoute(/^https:\/\/res.cloudinary.com\/dc3dnmmpx\/image\/upload\/.*/, workboxSW.strategies.cacheFirst({}), 'GET'); 
workboxSW.router.registerRoute('https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css', workboxSW.strategies.cacheFirst({}), 'GET'); 
workboxSW.router.registerRoute('https://res.cloudinary.com/dc3dnmmpx/image/upload/(.*)', workboxSW.strategies.cacheFirst({}), 'GET'); 

これは正常な動作ですか？私はサービスワーカーには新しく、正しい結果は何か分かりません。

Answer 1

基本的な問題は、それらがopaque responsesであり、既定ではcacheFirst戦略では使用されないことです。

https://workboxjs.org/how_tos/cdn-caching.html

でいくつかの背景があるもののこの種のデバッグを支援するために仕事箱でログインしていますが、それは騒々しいだとして、それは生産ビルドでデフォルトで有効になっていないがあります。

あなたが働いて物事を取得するためのいくつかのオプションがあります：あなたのimportScripts()開発ビルド（例えばimportScripts('https://unpkg.com/workbox-sw@2.0.3/build/importScripts/workbox-sw.dev.v2.0.3.js')、またはデベロッパーツールに行くと、明示的にworkbox.LOG_LEVEL = 'debug'を設定すると、あなたに次のようなログメッセージを与えるを使用するように切り替えるのいずれか。あなたは期待どおり：デフォルトで不透明な応答をサポートしていますworkboxSW.strategies.staleWhileRevalidate()へ

• 変更、
• をあなたが岡だcacheFirst戦略を知らせますあなたのサードパーティのCDNがすべてCORSをサポートしているように見えるので、crossorigin属性を使用してCSSとイメージ要求のCORSモードをオプトインすると、応答はもはや不透明ではなくなります。 ：<img src='https://cors.example.com/path/to/image.jpg' crossorigin='anonymous'>または<link rel='stylesheet' href='https://cors.example.com/path/to/styles.css' crossorigin='anonymous'>