BackgroundFetchRecord.responseReady — Eigenschaft · JavaScript-Referenz

Signatur

BackgroundFetchRecord.responseReady

Beschreibung

Die Eigenschaft responseReady eines BackgroundFetchRecord gibt ein Promise<Response> zurück. Jeder Record steht für genau eine Anfrage/Antwort-Kombination innerhalb eines Background Fetch. Das Promise wird aufgelöst, sobald die Antwort für diese Anfrage vollständig verfügbar ist.

Typischerweise liest man responseReady im Service Worker innerhalb des Events backgroundfetchsuccess: Man holt sich über registration.matchAll() alle Records, wartet auf deren Antworten und legt sie z. B. mit cache.put() im Cache Storage ab. So stehen große Downloads (Videos, Podcasts, Offline-Pakete) anschließend offline zur Verfügung.

Wird ein Record abgefragt, dessen Download noch läuft, bleibt das Promise so lange ausstehend, bis die Antwort eintrifft. Schlägt der Abruf fehl oder wurde er abgebrochen, wird das Promise mit einem Fehler (DOMException, meist "UnknownError") abgelehnt.

Rückgabewert

Typ

Promise<Response>

Beschreibung

Ein Promise, das mit dem Response-Objekt der zugehörigen Anfrage aufgelöst wird; bei Fehlschlag wird es mit einer DOMException abgelehnt.

Beispiele

Erfolgreiche Downloads im Service Worker cachen

// 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;
      await cache.put(record.request, response);
    }));

    await event.updateUI({ title: 'Download abgeschlossen!' });
  })());
});

Einzelne Antwort gezielt abfragen

// service-worker.js
self.addEventListener('backgroundfetchsuccess', (event) => {
  event.waitUntil((async () => {
    const record = await event.registration.match('/media/episode-42.mp3');
    if (!record) return;

    const response = await record.responseReady;
    console.log('Status:', response.status);
    console.log('Typ:', response.headers.get('Content-Type'));
  })());
});

Status: 200 Typ: audio/mpeg

Fehler beim Warten auf die Antwort abfangen

// service-worker.js
self.addEventListener('backgroundfetchfail', (event) => {
  event.waitUntil((async () => {
    const records = await event.registration.matchAll();
    for (const record of records) {
      try {
        const response = await record.responseReady;
        console.log('OK:', record.request.url, response.status);
      } catch (err) {
        console.warn('Fehlgeschlagen:', record.request.url, err.name);
      }
    }
  })());
});

OK: https://example.com/teil1.bin 200 Fehlgeschlagen: https://example.com/teil2.bin UnknownError

// Wichtig · Fallstricke

Kompatibilität: Die Background Fetch API ist experimentell und nur in Chromium-basierten Browsern (Chrome, Edge, Opera) verfügbar – nicht in Firefox oder Safari. Vorher per 'BackgroundFetchManager' in self prüfen.
Nur in sicheren Kontexten (HTTPS) und im Zusammenspiel mit einem Service Worker nutzbar.
Die Antworten sind nur verfügbar, solange die Registrierung existiert. Nach Abschluss des Event-Handlers können Records verworfen werden – deshalb die Antworten innerhalb von event.waitUntil() in den Cache schreiben.
Ein Response-Body kann nur einmal gelesen werden. Wer ihn cachen und auswerten möchte, braucht response.clone().
Auch HTTP-Fehlerstatus (z. B. 404) führen nicht zwingend zur Ablehnung des Promise – response.ok prüfen.

Siehe auch

Response Cache.put() BackgroundFetchRecord.request BackgroundFetchRegistration.id BackgroundFetchRegistration.result