Signatur
Beschreibung
Die Eigenschaft request eines BackgroundFetchRecord gibt ein Request-Objekt zurück. Darin stehen URL, Methode, Header und weitere Angaben der Anfrage, die im Rahmen eines Background Fetch abgesetzt wurde. Jeder Datensatz steht für genau ein Anfrage-Antwort-Paar.
Gebraucht wird die Eigenschaft vor allem im Service Worker, etwa in den Handlern für backgroundfetchsuccess oder backgroundfetchfail. Dort ruft man mit registration.matchAll() alle Datensätze ab und legt die heruntergeladenen Dateien meist im Cache ab. Die Anfrage aus record.request dient dabei als Cache-Schlüssel. So findet ein späteres caches.match() die Antwort genau zu dieser Anfrage.
Weil das Request-Objekt sofort verfügbar ist, kann man anhand von request.url auch filtern oder Fortschrittsanzeigen beschriften. Die zugehörige Antwort ist dagegen nur als Promise (record.responseReady) erreichbar.
Rückgabewert
Request-Objekt, das die abzurufende Ressource beschreibt: URL, Methode, Header und weitere Angaben.Beispiele
Heruntergeladene Dateien im Cache ablegen
// service-worker.js
self.addEventListener('backgroundfetchsuccess', (event) => {
const bgFetch = event.registration;
event.waitUntil((async () => {
const cache = await caches.open('downloads');
const records = await bgFetch.matchAll();
await Promise.all(records.map(async (record) => {
const response = await record.responseReady;
// record.request dient als Cache-Schlüssel
await cache.put(record.request, response);
}));
await event.updateUI({ title: 'Download abgeschlossen' });
})());
});URLs und Methoden aller Datensätze protokollieren
self.addEventListener('backgroundfetchfail', (event) => {
event.waitUntil((async () => {
const records = await event.registration.matchAll();
for (const { request } of records) {
console.log(`${request.method} ${request.url}`);
}
})());
});Einen bestimmten Datensatz über die Anfrage finden
self.addEventListener('backgroundfetchsuccess', (event) => {
event.waitUntil((async () => {
// match() akzeptiert eine URL oder einen Request
const record = await event.registration.match('/videos/intro.mp4');
if (record) {
console.log('Gefunden:', record.request.url);
const response = await record.responseReady;
console.log('Status:', response.status);
}
})());
});// Wichtig · Fallstricke
- Experimentelle API: Background Fetch gibt es derzeit nur in Chromium-Browsern (Chrome, Edge, Opera). Firefox und Safari unterstützen sie nicht. Prüfen Sie die Verfügbarkeit mit
'BackgroundFetchManager' in self. - Die Eigenschaft ist schreibgeschützt. Eine Zuweisung hat keine Wirkung.
- Nur in sicheren Kontexten (HTTPS) und mit einem registrierten Service Worker verfügbar.
matchAll()undmatch()werfen einenInvalidStateError, sobald die Datensätze nicht mehr verfügbar sind, etwa nach Ende des Event-Handlers. Rufen Sie sie deshalb innerhalb vonevent.waitUntil()auf.- Braucht der Body der Anfrage mehrfach, klonen Sie sie mit
record.request.clone(), denn ein Body lässt sich nur einmal lesen.