Background Fetch API - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

Background Fetch API

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die Background Fetch API bietet eine Methode zum Verwalten von Downloads, die viel Zeit in Anspruch nehmen können, wie Filme, Audiodateien und Software.

In diesem Artikel

Konzepte und Verwendung

Wenn eine Webanwendung den Benutzer bittet, große Dateien herunterzuladen, stellt dies häufig ein Problem dar, da der Benutzer mit der Seite verbunden bleiben muss, damit der Download abgeschlossen wird. Bei Verlust der Verbindung, Schließen des Tabs oder Wechseln zu einer anderen Seite stoppt der Download.

Die Background Synchronization API ermöglicht es Service-Workern, die Verarbeitung aufzuschieben, bis ein Benutzer verbunden ist; sie kann jedoch nicht für lang andauernde Aufgaben wie das Herunterladen einer großen Datei verwendet werden. Background Sync erfordert, dass der Service-Worker so lange aktiv bleibt, bis der Abruf abgeschlossen ist. Um die Akkulaufzeit zu schonen und unerwünschte Hintergrundaktivitäten zu vermeiden, wird der Browser die Aufgabe irgendwann beenden.

Die Background Fetch API löst dieses Problem. Sie ermöglicht es einem Webentwickler, dem Browser mitzuteilen, einige Abrufe im Hintergrund auszuführen, zum Beispiel wenn der Benutzer auf eine Schaltfläche klickt, um eine Videodatei herunterzuladen. Der Browser führt die Abrufe dann in einer für den Benutzer sichtbaren Weise durch, zeigt den Fortschritt an und bietet eine Möglichkeit zum Abbrechen des Downloads. Sobald der Download abgeschlossen ist, öffnet der Browser den Service-Worker, woraufhin Ihre Anwendung bei Bedarf mit der Antwort arbeiten kann.

Die Background Fetch API ermöglicht den Abruf, wenn der Benutzer den Prozess offline startet. Sobald er verbunden ist, beginnt der Prozess. Wenn der Benutzer offline geht, pausiert der Prozess, bis der Benutzer wieder online ist.

Schnittstellen

BackgroundFetchManager

Eine Map, in der die Schlüssel Hintergrundabruf-IDs und die Werte BackgroundFetchRegistration-Objekte sind.

BackgroundFetchRegistration

Repräsentiert einen Hintergrundabruf.

BackgroundFetchRecord

Repräsentiert eine einzelne Abrufanfrage und Antwort.

BackgroundFetchEvent

Der Ereignistyp für die Ereignisse backgroundfetchabort und backgroundfetchclick.

BackgroundFetchUpdateUIEvent

Der Ereignistyp für die Ereignisse backgroundfetchsuccess und backgroundfetchfail.

Erweiterungen zu anderen Schnittstellen

ServiceWorkerRegistration.backgroundFetch Schreibgeschützt

Gibt eine Referenz auf ein BackgroundFetchManager-Objekt zurück, das Hintergrundabrufoperationen verwaltet.

backgroundfetchabort Ereignis

Wird ausgelöst, wenn ein Hintergrundabruf von dem Benutzer oder der App abgebrochen wurde.

backgroundfetchclick Ereignis

Wird ausgelöst, wenn der Benutzer auf die Benutzeroberfläche für eine Hintergrundabrufoperation geklickt hat.

backgroundfetchfail Ereignis

Wird ausgelöst, wenn mindestens eine der Anfragen in einer Hintergrundabrufoperation fehlgeschlagen ist.

backgroundfetchsuccess Ereignis

Wird ausgelöst, wenn alle Anfragen in einer Hintergrundabrufoperation erfolgreich waren.

Beispiele

Überprüfen Sie die Browser-Kompatibilität, bevor Sie Background Fetch verwenden.

js
if (!("BackgroundFetchManager" in self)) {
  // Provide fallback downloading.
}

Die Verwendung von Background Fetch erfordert einen registrierten Service-Worker. Dann rufen Sie backgroundFetch.fetch() auf, um einen Abruf durchzuführen. Dies gibt ein Versprechen zurück, das mit einer BackgroundFetchRegistration aufgelöst wird.

Ein Hintergrundabruf kann eine Anzahl von Dateien abrufen. In unserem Beispiel fordert der Abruf eine MP3 und eine JPEG an. Dies ermöglicht das Herunterladen eines Pakets von Dateien, die der Benutzer als ein Element ansieht (zum Beispiel ein Podcast und ein Artwork).

js
navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.fetch(
    "my-fetch",
    ["/ep-5.mp3", "ep-5-artwork.jpg"],
    {
      title: "Episode 5: Interesting things.",
      icons: [
        {
          sizes: "300x300",
          src: "/ep-5-icon.png",
          type: "image/png",
        },
      ],
      downloadTotal: 60 * 1024 * 1024,
    },
  );
});

Sie finden weitere Codebeispiele und eine Demo in Introducing Background Fetch.

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Background Fetch API

In diesem Artikel

Konzepte und Verwendung

Schnittstellen

Erweiterungen zu anderen Schnittstellen

Beispiele

Spezifikationen

Browser-Kompatibilität

api.BackgroundFetchManager

api.BackgroundFetchRegistration

api.BackgroundFetchRecord

Siehe auch

Help improve MDN