ServiceWorker ne parvient pas à extraire la ressource externe sans raison

Question

J'essaie d'extraire et de mettre en cache des ressources/sites Web externes à l'aide d'un technicien de maintenance.

Mon code service-worker.js est le suivant:

'use strict'; 

var static_urls = [ 
    'https://quiqqer.local/test?app=1', 
    'https://quiqqer.local/calendar?app=1' 
]; 

self.addEventListener('install', function (event) 
{ 
    event.waitUntil(
     caches.open('ionic-cache').then(function(cache) { 
      cache.addAll(static_urls.map(function (urlToPrefetch) 
      { 
       console.log(urlToPrefetch); 
       return new Request(urlToPrefetch, {mode: 'no-cors'}); 
      })).catch(function(error) { 
       console.error(error); 
      }).then(function() { 
       console.log('All fetched and cached'); 
      }); 
     }) 
    ); 
}); 

Ce qui crée cette sortie:

service-worker.js: https://quiqqer.local/test?app=1 
service-worker.js: https://quiqqer.local/calendar?app=1 
service-worker.js: TypeError: failed to fetch 
service-worker.js: All fetched and cached 
(index): service worker installed 

Quelle est la raison de l'échec chercher?

Mon site https://quiqqer.local a mis l'en-tête Access-Control-Allow-Origin à « * »

Peut-être que mon certificat auto-signé pour mon site?

J'ai ajouté une exception pour ce certificat, donc si j'ouvre le site Chrome montre que le site n'est pas sécurisé à côté de la barre d'URL mais le contenu est toujours affiché.

Answer 1

Étant donné que vous définissez explicitement {mode: 'no-cors'}, vous obtiendrez un opaque Response -un code de réponse 0.

cache.add() sera throw a TypeError si le Response que vous tentez d'ajouter de la mémoire cache a un code en dehors de la gamme 2xx. Comme vous avez activé CORS sur votre serveur, via l'en-tête Access-Control-Allow-Origin, vous pouvez simplement faire une demande avec mode défini sur 'cors'. 'cors'mode est la valeur par défaut pour les URL croisée origine, donc

cache.addAll(static_urls) 
    .then(...) 
    .catch(...); 

devrait vous donner le comportement que vous voulez.

Si vous faites une demande sur un serveur qui ne prend pas en charge CORS, et que vous vouliez mettre en cache, alors vous devez définir explicitement {mode: 'no-cors'} et utiliser une combinaison de fetch() + cache.put() ajouter l'opaque réponse le cache. (Et vous devez assumer le risque que la réponse opaque n'est pas une erreur 4xx ou 5xx, car il n'y a aucune façon de savoir.) Mais, vous n'avez pas à vous en préoccuper car votre serveur prend en charge CORS .