web-dev-qa-db-ja.com

ワークボックスランタイムキャッシュを使用すると、リクエストはchrome

ワークボックスランタイムキャッシュを使用して外部呼び出しをキャッシュしています（materialize.cssはその1つです）。私のネットワークタブでは、リクエストがserviceWorkerから来ていることが示されています（問題ないようです）。

enter image description here

しかし、キャッシュストレージでは、ランタイムキャッシュは空に見えます。

enter image description here

私のサービスワーカーはchromesの[アプリケーション]タブで確認できます。これは次のWebサイトです： 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');

これは予想される動作ですか？私はサービスワーカーにかなり慣れていないので、正しい結果が何であるかわかりません。

javascriptcachingservice-workerprogressive-web-appsworkbox
9
Glauber Ramos

根本的な問題は、それらが 不透明な応答 であり、デフォルトでは、cacheFirst戦略では使用されないことです。

https://workboxjs.org/how_tos/cdn-caching.html にはいくつかの背景があります

この種のデバッグに役立つWorkboxへのログインがありますが、ノイズが多いため、本番ビルドではデフォルトで有効になっていません。 importScripts()を切り替えて開発ビルドを使用する（例：importScripts('https://unpkg.com/[email protected]/build/importScripts/workbox-sw.dev.v2.0.3.js')）か、DevToolsにアクセスして_workbox.LOG_LEVEL = 'debug'_を明示的に設定すると、次のようなログメッセージが表示されます。

DevTools log

期待どおりに機能させるには、いくつかのオプションがあります。

  • workboxSW.strategies.staleWhileRevalidate()に変更します。これは、デフォルトで不透明な応答をサポートします。
  • 不透明な応答を使用して、cacheFirst戦略に問題がないことを伝えます：workboxSW.strategies.cacheFirst({cacheableResponse: {statuses: [0, 200]}})
  • サードパーティの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'>_
16
Jeff Posnick