BackgroundFetchManager.getIds() — Methode · JavaScript-Referenz

Signatur

BackgroundFetchManager.prototype.getIds()

Beschreibung

Die Methode getIds() der Schnittstelle BackgroundFetchManager liefert die Kennungen (IDs) aller Hintergrundabrufe, die aktuell für die zugehörige ServiceWorkerRegistration registriert sind. Über registration.backgroundFetch gelangt man an den Manager, sowohl von der Seite als auch aus dem Service Worker heraus.

Die Methode eignet sich gut, um nach einem Neuladen der Seite oder beim Start der Anwendung festzustellen, welche Downloads noch laufen. Das ist zum Beispiel für Fortschrittsanzeigen nötig oder um zu vermeiden, dass ein Abruf mit derselben ID ein zweites Mal gestartet wird. Mit jeder ID kann man anschließend über BackgroundFetchManager.get(id) die zugehörige BackgroundFetchRegistration holen.

Enthalten sind nur aktive Abrufe. Ist ein Abruf abgeschlossen, fehlgeschlagen oder abgebrochen, taucht seine ID nicht mehr in der Liste auf, sobald die zugehörigen Ereignisse (backgroundfetchsuccess, backgroundfetchfail, backgroundfetchabort) im Service Worker verarbeitet wurden.

Rückgabewert

Typ

Promise<string[]>

Beschreibung

Ein Promise, das mit einem Array von Zeichenketten erfüllt wird. Jede Zeichenkette ist die ID eines aktiven Hintergrundabrufs. Gibt es keine aktiven Abrufe, ist das Array leer.

Beispiele

Alle aktiven Hintergrundabrufe auflisten

const listeAktiveAbrufe = async () => {
  if (!('serviceWorker' in navigator)) return [];
  const registration = await navigator.serviceWorker.ready;
  if (!('backgroundFetch' in registration)) {
    console.warn('Background Fetch wird nicht unterstützt');
    return [];
  }
  const ids = await registration.backgroundFetch.getIds();
  console.log('Aktive Abrufe:', ids);
  return ids;
};

listeAktiveAbrufe();

Aktive Abrufe: ['podcast-folge-42', 'film-trailer']

Doppelten Start eines Downloads vermeiden

const starteDownload = async (id, urls, title) => {
  const registration = await navigator.serviceWorker.ready;
  const ids = await registration.backgroundFetch.getIds();

  if (ids.includes(id)) {
    console.log(`Download "${id}" läuft bereits`);
    return registration.backgroundFetch.get(id);
  }

  return registration.backgroundFetch.fetch(id, urls, {
    title,
    downloadTotal: 0
  });
};

starteDownload('podcast-folge-42', ['/media/folge-42.mp3'], 'Folge 42');

Download "podcast-folge-42" läuft bereits

Fortschritt aller Abrufe nach dem Neuladen anzeigen

const zeigeFortschritt = async () => {
  const registration = await navigator.serviceWorker.ready;
  const ids = await registration.backgroundFetch.getIds();

  const regs = await Promise.all(
    ids.map((id) => registration.backgroundFetch.get(id))
  );

  for (const reg of regs) {
    if (!reg) continue;
    const berechne = () => {
      const prozent = reg.downloadTotal
        ? Math.round((reg.downloaded / reg.downloadTotal) * 100)
        : '?';
      console.log(`${reg.id}: ${prozent} %`);
    };
    berechne();
    reg.addEventListener('progress', berechne);
  }
};

zeigeFortschritt();

podcast-folge-42: 37 % film-trailer: 80 %

// Wichtig · Fallstricke

Experimentell: Die Background Fetch API gibt es nur in Chromium-basierten Browsern (Chrome, Edge, Opera). Firefox und Safari unterstützen sie nicht. Prüfe deshalb immer mit 'backgroundFetch' in registration, ob sie verfügbar ist.
Die Methode braucht einen sicheren Kontext (HTTPS oder localhost) und einen aktiven Service Worker. Ohne aktive Registrierung wird das Promise abgelehnt.
Die IDs gelten nur für die jeweilige Service-Worker-Registrierung (also deren Scope). Abrufe aus anderen Scopes erscheinen nicht.
Zwischen getIds() und einem darauffolgenden get(id) kann ein Abruf bereits beendet sein. get() liefert dann undefined, und das sollte man im Code abfangen.
Die Reihenfolge der IDs im Array ist nicht festgelegt.

Siehe auch

BackgroundFetchUpdateUIEvent.updateUI() PeriodicSyncManager.getTags() BackgroundFetchManager.get() BackgroundFetchManager.fetch() new BackgroundFetchUpdateUIEvent()