Antwort, deren "Körper" gesperrt ist, kann nicht verwendet werden, um auf eine Anfrage zu antworten

Question

Ich habe gerade versucht Service Worker in Google Chrome. Ich bin auf einen Fehler gestoßen. Googling the error gives one single result im Moment scheint das in der google chrome sourcecode zu sein.

Ich bin nicht davon überzeugt, dass der Fehler Fehler ist. Wenn ich in Firefox versuche, bekomme ich beschädigten Inhalt Fehler Bildschirm. Es tritt auf, wenn ich Ereignis für das Projekt-Stamm Umgang holen:

self.addEventListener('fetch', function(event) { 
    // Nice url 
    var requestURL = new URL(event.request.url); 
    console.log("Request for: ", requestURL.href); 
    // Network, then cache, then fallback 
    event.respondWith(
    // Try to download 
    fetch(event.request) 
     .then(function(x) { 
     console.log(" "+requestURL.href+" >> ",x); 
     // If failed the x will not be ok 
     if(x && x.ok) { 
      // If result was ok save it to cache 
      cache.put(event.request, x); 
      return x; 
     } 
     else 
      // Try to fetch cached version if request failed 
      return cache.match(event.request); 
     }) 
     // In case of error return something like 404 page 
     .catch(function(error) { 
     console.warn(" "+requestURL.href+" >> UNAVAILABLE: ",error); 
     return cache.match('/page/content-not-available-offline'); 
     }) 
); 
}); 

Ich bin nicht sicher, was der Körper gesperrt Fehler bedeutet, so dass ich weiß nicht einmal, was Code relevant ist.

Answer 1

Das Problem ist, dass body der Antwort (der eigentliche Inhalt, wie HTML oder JavaScript) kann nur einmal für bestimmte Zwecke verwendet werden, wie Speichern in den Cache oder als tatsächliche Antwort verwenden.

Um dies zu lösen, existiert Response.prototype.clone() Methode existiert.

In der Tat, ist der Hauptgrund clone() existiert, ist mehreren Verwendungen von Body Objekten zu ermöglichen (wenn sie nur ein Gebrauch ist.)

In diesem Fall wurde das Problem, die Antwort im Cache-Speichern und dann zurückgeben. Korrekter Ansatz ist:

if(x && x.ok) { 
    // If result was ok save it to cache 
    cache.put(event.request, x.clone()); 
    return x; 
}