Signatur
Beschreibung
Die Eigenschaft Request.destination gibt an, wofür der Browser eine Ressource lädt. Der Wert wird vom Browser anhand des Kontexts gesetzt, in dem die Anfrage entsteht: Ein <img>-Element ergibt "image", ein <script> ergibt "script", eine Seitennavigation ergibt "document". Der Wert ist eine Zeichenkette aus dem Enum RequestDestination.
Praktisch wichtig ist die Eigenschaft vor allem in Service Workern. Im fetch-Ereignis kann man mit event.request.destination je nach Ressourcentyp eine andere Caching-Strategie wählen, etwa „Cache zuerst“ für Bilder und Schriften und „Netzwerk zuerst“ für HTML-Dokumente. Das ist deutlich zuverlässiger, als den Typ aus der URL-Endung oder dem Accept-Header abzuleiten.
Mögliche Werte sind unter anderem: "" (leerer String, z. B. bei fetch() und XMLHttpRequest), "audio", "audioworklet", "document", "embed", "font", "frame", "iframe", "image", "json", "manifest", "object", "paintworklet", "report", "script", "serviceworker", "sharedworker", "style", "track", "video", "worker" und "xslt".
Die Eigenschaft ist schreibgeschützt. Man kann sie auch über den Request-Konstruktor nicht setzen: Mit new Request() erzeugte Anfragen haben immer den leeren String als destination.
Rückgabewert
RequestDestination, z. B. "image", "script", "style", "font", "document", oder "", wenn kein bestimmtes Ziel vorliegt (z. B. bei fetch()).Beispiele
Destination einer selbst erzeugten Anfrage auslesen
const request = new Request('/api/daten.json');
// Anfragen aus fetch() oder new Request() haben kein spezielles Ziel
console.log(JSON.stringify(request.destination));Caching-Strategie im Service Worker nach Ressourcentyp wählen
// sw.js
const STATISCH = new Set(['image', 'font', 'style', 'script']);
self.addEventListener('fetch', (event) => {
const { request } = event;
if (STATISCH.has(request.destination)) {
// Cache zuerst für statische Ressourcen
event.respondWith((async () => {
const cache = await caches.open('statisch-v1');
const treffer = await cache.match(request);
if (treffer) return treffer;
const antwort = await fetch(request);
cache.put(request, antwort.clone());
return antwort;
})());
} else if (request.destination === 'document') {
// Netzwerk zuerst für Seiten, bei Offline-Zustand Fallback
event.respondWith(
fetch(request).catch(() => caches.match('/offline.html'))
);
}
// alle anderen Anfragen (z. B. destination "") laufen normal durch
});Ersatzbild für fehlgeschlagene Bildanfragen liefern
// sw.js
self.addEventListener('fetch', (event) => {
if (event.request.destination !== 'image') return;
event.respondWith((async () => {
try {
const antwort = await fetch(event.request);
if (!antwort.ok) throw new Error(`HTTP ${antwort.status}`);
return antwort;
} catch {
return caches.match('/bilder/platzhalter.svg');
}
})());
});// Wichtig · Fallstricke
- Leerer String bei fetch(): Anfragen, die über
fetch()oderXMLHttpRequestentstehen, haben diedestination"". JSON-API-Aufrufe lassen sich damit also nicht von anderen Skript-Anfragen unterscheiden. Nutze dafür die URL oder die Header. - Nicht setzbar: Das Init-Objekt von
new Request(url, init)kennt keine Optiondestination. Der Wert wird ausschließlich vom Browser vergeben. - Nicht mit
modeverwechseln:Request.mode(z. B.\"navigate\",\"cors\") beschreibt den CORS- bzw. Navigationsmodus,destinationdagegen den Inhaltstyp. Für die Erkennung von Navigationen ist oftrequest.mode === 'navigate'sinnvoll. Bei<iframe>-Navigationen istdestinationnämlich\"iframe\"und nicht\"document\". - Neuere Werte: Einige Werte wie
\"json\"(für JSON-Module) oder\"audioworklet\"kommen erst in neueren Browsern vor. Frage deshalb gezielt bekannte Werte ab, statt mit einer vollständigen Werteliste zu rechnen. - Kompatibilität: Die Eigenschaft wird in allen modernen Browsern unterstützt. Der Internet Explorer unterstützt sie nicht, dort gibt es aber auch keine Service Worker.
- Serverseitig entspricht die Information ungefähr dem Header
Sec-Fetch-Dest, den moderne Browser mitsenden.