Background Fetch API

Wenn eine Webanwendung den Benutzer dazu bringt, große Dateien herunterzuladen, ergibt sich oft das Problem, dass der Benutzer mit der Seite verbunden bleiben muss, damit der Download abgeschlossen wird. Gehen sie offline, schließen den Tab oder navigieren von der Seite weg, stoppt der Download.

Die Background Synchronization API bietet eine Möglichkeit für Service Worker, die Verarbeitung aufzuschieben, bis der Benutzer verbunden ist. Sie kann jedoch nicht für länger laufende Aufgaben wie das Herunterladen großer Dateien verwendet werden. Background Sync erfordert, dass der Service Worker so lange aktiv bleibt, bis der Abruf abgeschlossen ist. Um die Akkulaufzeit zu schonen und um unerwünschte Aufgaben im Hintergrund zu verhindern, wird der Browser die Aufgabe irgendwann beenden.

Die Background Fetch API löst dieses Problem. Sie ermöglicht es einem Webentwickler, dem Browser zu sagen, dass einige Abrufe im Hintergrund durchgeführt werden sollen, z.B. wenn der Benutzer auf eine Schaltfläche klickt, um eine Videodatei herunterzuladen. Der Browser führt dann die Abrufe auf eine für den Benutzer sichtbare Weise aus, zeigt Fortschritte an und gibt dem Benutzer eine Methode, den Download abzubrechen. Sobald der Download abgeschlossen ist, öffnet der Browser den Service Worker, und die Anwendung kann bei Bedarf etwas mit der Antwort machen.

Die Background Fetch API ermöglicht den Abruf, wenn der Benutzer den Prozess offline startet. Sobald sie verbunden sind, beginnt der Abruf. Geht der Benutzer offline, pausiert der Vorgang, bis sie wieder online sind.

BackgroundFetchManager Experimentell

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

BackgroundFetchRegistration Experimentell

Repräsentiert einen Background Fetch.

BackgroundFetchRecord Experimentell

Repräsentiert einen individuellen Abrufanforderung und -antwort.

BackgroundFetchEvent Experimentell

Der Ereignistyp für das backgroundfetchabort- und backgroundfetchclick-Ereignis.

BackgroundFetchUpdateUIEvent Experimentell

Der Ereignistyp für das backgroundfetchsuccess- und backgroundfetchfail-Ereignis.

ServiceWorkerRegistration.backgroundFetch Nur lesbar Experimentell

Gibt eine Referenz zu einem BackgroundFetchManager-Objekt zurück, das Hintergrundabrufoperationen verwaltet.

backgroundfetchabort Ereignis Experimentell

Wird ausgelöst, wenn ein Hintergrundabrufvorgang vom Benutzer oder der App abgebrochen wurde.

backgroundfetchclick Ereignis Experimentell

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

backgroundfetchfail Ereignis Experimentell

Wird ausgelöst, wenn mindestens eine der Anfragen in einem Hintergrundabrufvorgang fehlgeschlagen ist.

backgroundfetchsuccess Ereignis Experimentell

Wird ausgelöst, wenn alle Anfragen in einem Hintergrundabrufvorgang erfolgreich waren.

Überprüfen Sie vor der Nutzung von Background Fetch die Browser-Kompatibilität.

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

Die Nutzung von Background Fetch erfordert einen registrierten Service Worker. Rufen Sie dann backgroundFetch.fetch() auf, um einen Abruf durchzuführen. Dies gibt ein Promise zurück, das sich mit einem BackgroundFetchRegistration auflöst.

Ein Hintergrundabruf kann eine Anzahl von Dateien abrufen. In unserem Beispiel fordert der Abruf eine MP3- und eine JPEG-Datei an. Dies ermöglicht es, ein Paket von Dateien, das der Benutzer als ein Element sieht (zum Beispiel einen Podcast und Artwork), auf einmal herunterzuladen.

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,
    },
  );
});

Eine Demo-Anwendung, die Background Fetch implementiert, finden Sie hier.

• Introducing Background Fetch
• Background Fetch - HTTP 203