En utilisant la mise en cache d'exécution de Workbox, les demandes ne s'affichent pas dans la mémoire cache de Chrome.

Question

J'utilise la mise en cache d'exécution de Workbox pour mettre en cache les appels externes (materialize.css en fait partie). Dans mon onglet réseau, il est indiqué que la demande provient de serviceWorker (tout semble correct) :

Mais sur le stockage du cache, mon cache d'exécution semble vide :

Vous pouvez voir mon travailleur de service sur l'onglet d'application de chromes, et voici le site web : https://quack.surge.sh/

Code du travailleur de service :

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');

Est-ce le comportement attendu ? Je suis assez novice en matière de travailleurs de service et je ne suis pas sûr du résultat correct.

Answer 1

Le problème sous-jacent est que ce sont des réponses opaques et, par défaut, ils ne seront pas utilisés avec un fichier cacheFirst stratégie.

Vous trouverez des informations sur le site https://workboxjs.org/how_tos/cdn-caching.html

Il y a une journalisation dans Workbox pour aider à déboguer ce genre de choses, mais comme elle est bruyante, elle n'est pas activée par défaut dans la version de production. Soit vous changez votre importScripts() pour utiliser le build de développement (ex. importScripts('https://unpkg.com/workbox-sw@2.0.3/build/importScripts/workbox-sw.dev.v2.0.3.js') ou en entrant dans DevTools et en définissant explicitement les paramètres suivants workbox.LOG_LEVEL = 'debug' vous donnerait un message de journal comme le suivant :

Vous avez plusieurs possibilités pour que les choses fonctionnent comme vous le souhaitez :

• Changer pour workboxSW.strategies.staleWhileRevalidate() qui prend en charge la réponse opaque par défaut.
• Dites à la cacheFirst que vous êtes d'accord avec l'utilisation de réponses opaques : workboxSW.strategies.cacheFirst({cacheableResponse: {statuses: [0, 200]}})
• Étant donné que les CDN tiers semblent tous prendre en charge le mode CORS, vous pouvez opter pour ce mode pour vos demandes de CSS et d'images par l'intermédiaire de la fonction crossorigin et les réponses ne seront plus opaques : <img src='https://cors.example.com/path/to/image.jpg' crossorigin='anonymous'> o <link rel='stylesheet' href='https://cors.example.com/path/to/styles.css' crossorigin='anonymous'>