ServiceWorker kann externe Ressource ohne Grund nicht abrufen

Question

Ich versuche, einige externe Ressourcen/Websites mithilfe eines Service Worker abzurufen und zwischenzuspeichern.

Mein Code in service-worker.js ist folgende:

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

die diese Ausgabe erstellt:

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 

Was ist der Grund für das Scheitern holen?

Meine Website https://quiqqer.local hat den Header Access-Control-Allow-Origin zu ‚*‘

Vielleicht setzen es ist mein selbst signiertes Zertifikat für meine Website?

Ich habe eine Ausnahme für dieses Zertifikat hinzugefügt. Wenn ich die Website öffne, zeigt Chrome an, dass die Seite neben der URL-Leiste nicht sicher ist, aber der Inhalt wird weiterhin angezeigt.

Answer 1

Da Sie explizit {mode: 'no-cors'} einstellen, erhalten Sie eine opaque Response -on, die immer einen Antwortcode von 0 hat.

cache.add() wird throw a TypeError wenn die Response, die Sie den Cache hinzuzufügen sind versucht, einen Code außerhalb des 2xx Bereichs aufweist.

Da Sie CORS auf Ihrem Server über den Header Access-Control-Allow-Origin aktiviert haben, können Sie einfach eine Anfrage mit mode auf 'cors' stellen. 'cors'mode ist die Standardeinstellung für Cross-Origin-URLs, so

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

sollten Sie das Verhalten, die Sie wollen.

Wenn Sie eine Anfrage an einen Server zu machen wurden, die nicht CORS unterstützt hat, und man wollte es in den Cache, dann würden Sie explizit {mode: 'no-cors'} müssen und verwenden eine Kombination aus fetch() + cache.put() die undurchsichtige hinzufügen Beantworte den Cache. (Und Sie müssten das Risiko eingehen, dass die undurchsichtige Antwort kein 4xx oder 5xx Fehler ist, da es keine Möglichkeit gibt, zu wissen.) Aber, Sie müssen sich nicht darum kümmern, weil Ihr Server CORS unterstützt .