Zugriff auf die Überschriften / Textkörper undurchsichtiger Antworten
Die einfachste Einschränkung bei undurchsichtigen Antworten besteht darin, dass Sie von den meisten Eigenschaften der Response
Klasse keine aussagekräftigen Informationen zurückerhalten headers
oder die verschiedenen Methoden , aus denen die Body
Schnittstelle besteht, wie json()
oder aufrufen können text()
. Dies steht im Einklang mit der Black-Box-Natur einer undurchsichtigen Reaktion.
Verwenden undurchsichtiger Antworten als Ressourcen auf einer Seite
Undurchsichtige Antworten können als Ressource auf einer Webseite verwendet werden, wenn der Browser die Verwendung einer nicht CORS-übergreifenden Ressource zulässt. Hier ist eine Teilmenge von Elementen, für die nicht CORS-übergreifende Ressourcen und daher undurchsichtige Antworten gültig sind, angepasst aus der Dokumentation des Mozilla Developer Network :
<script>
<link rel="stylesheet">
<img>
, <video>
Und<audio>
<object>
und <embed>
<iframe>
Ein bemerkenswerter Anwendungsfall, für den undurchsichtige Antworten nicht gültig sind, sind Schriftartenressourcen .
Überprüfen Sie im Allgemeinen die entsprechende Spezifikation, um festzustellen, ob Sie eine undurchsichtige Antwort als bestimmten Ressourcentyp auf einer Seite verwenden können. In der HTML-Spezifikation wird beispielsweise erläutert, dass nicht-CORS-Kreuzursprungsantworten (dh undurchsichtige Antworten) für <script>
Elemente verwendet werden können, allerdings mit einigen Einschränkungen, um das Auslaufen von Fehlerinformationen zu verhindern.
Undurchsichtige Antworten und die Cache-Speicher-API
Ein "Gotcha", auf das Entwickler mit undurchsichtigen Antworten stoßen könnten, besteht darin, sie mit der Cache-Speicher-API zu verwenden . Zwei Hintergrundinformationen sind relevant:
- Die
status
Eigenschaft einer undurchsichtigen Antwort wird immer auf gesetzt0
, unabhängig davon, ob die ursprüngliche Anforderung erfolgreich war oder fehlgeschlagen ist.
- Die
add()
/ addAll()
Methoden der Cache-Speicher-API lehnen beide ab, wenn die Antworten, die aus einer der Anforderungen resultieren, einen Statuscode haben, der nicht im 2XX-Bereich liegt .
Aus diesen beiden Punkten folgt, dass die Anforderung, die als Teil des add()
/ addAll()
-Aufrufs ausgeführt wird, zu einer undurchsichtigen Antwort führt, nicht zum Cache hinzugefügt werden kann.
Sie können dies umgehen, indem Sie explizit a ausführen fetch()
und dann die put()
Methode mit der undurchsichtigen Antwort aufrufen . Auf diese Weise entscheiden Sie sich effektiv für das Risiko, dass die Antwort, die Sie zwischenspeichern, ein von Ihrem Server zurückgegebener Fehler war.
const request = new Request('https://third-party-no-cors.com/', {mode: 'no-cors'});
fetch(request).then(response => cache.put(request, response));
Undurchsichtige Antworten und die navigator.storage-API
Um zu vermeiden, dass domänenübergreifende Informationen verloren gehen, wird die Größe einer undurchsichtigen Antwort, die zur Berechnung der Speicherkontingentgrenzen verwendet wird (dh ob eine QuotaExceeded
Ausnahme ausgelöst wird) und von der navigator.storage
API gemeldet wird , erheblich aufgefüllt .
Die Details dieses Auffüllens variieren von Browser zu Browser. Für Google Chrome bedeutet dies jedoch, dass die Mindestgröße , die eine einzelne zwischengespeicherte undurchsichtige Antwort zur gesamten Speichernutzung beiträgt, ungefähr 7 Megabyte beträgt . Sie sollten dies berücksichtigen, wenn Sie festlegen, wie viele undurchsichtige Antworten zwischengespeichert werden sollen, da Sie die Speicherkontingentbeschränkungen aufgrund der tatsächlichen Größe der undurchsichtigen Ressourcen viel früher überschreiten können, als Sie es sonst erwarten würden.
cdn.x.com/test.jpg
und Cache-Anforderungen an die Hauptdomäne senden lassenwww.x.com/test.jpg
./test.jpg
für jede Abrufanforderung,cdn.x.com/test.jpg
um die URL mit der Ursprungsdomäne zu ändern (die URL wirdwww.x.com/test.jpg
)), Folgendes:const cacheUrl = (url.hostname == 'cdn.x.com')? new URL(event.target.location.origin + url.pathname): url;
Ich fordere dann den Cache mit dieser neuen URL ancaches.match(cacheUrl)
, wie es scheint um gut zu arbeiten. Irgendwelche obwohl auf diesem Ansatz?