Jetzt neu: Hintergrundabruf

Jake Archibald
Jake Archibald
X Startseite

2015 haben wir die Hintergrundsynchronisierung eingeführt, mit der der Service Worker Aufgaben aufschieben kann, bis der Nutzer eine Verbindung hat. Das bedeutet, dass der Nutzer eine Nachricht eingeben, auf „Senden“ klicken und die Website verlassen kann, da die Nachricht entweder sofort oder bei bestehender Verbindung gesendet wird.

Das ist eine nützliche Funktion, aber der Service Worker muss für die Dauer des Abrufs aktiv sein. Bei kurzen Aufgaben wie dem Senden einer Nachricht ist das kein Problem. Wenn die Aufgabe jedoch zu lange dauert, beendet der Browser den Service Worker, da dies sonst ein Risiko für den Datenschutz und den Akku des Nutzers darstellt.

Was ist aber, wenn Sie etwas herunterladen müssen, das lange dauern kann, z. B. einen Film, Podcasts oder Level eines Spiels? Dafür gibt es den Hintergrundabruf.

Background Fetch ist seit Chrome 74 standardmäßig verfügbar.

In dieser kurzen zweiminütigen Demo sehen Sie, wie es bisher war und wie es mit Background Fetch ist:

Funktionsweise

So funktioniert ein Hintergrundabruf:

  1. Sie weisen den Browser an, eine Gruppe von Abrufen im Hintergrund auszuführen.
  2. Der Browser ruft diese Elemente ab und zeigt dem Nutzer den Fortschritt an.
  3. Sobald der Abruf abgeschlossen oder fehlgeschlagen ist, öffnet der Browser Ihren Service Worker und löst ein Ereignis aus, um Sie darüber zu informieren, was passiert ist. Hier entscheiden Sie, was mit den Antworten geschehen soll.

Wenn der Nutzer nach Schritt 1 Seiten Ihrer Website schließt, ist das in Ordnung. Der Download wird fortgesetzt. Da der Abruf gut sichtbar und leicht abzubrechen ist, besteht nicht das Datenschutzproblem einer viel zu langen Hintergrundsynchronisierungsaufgabe. Da der Service Worker nicht ständig ausgeführt wird, besteht nicht die Gefahr, dass er das System missbraucht, z. B. durch das Mining von Bitcoins im Hintergrund.

Auf einigen Plattformen (z. B. Android) kann es sein, dass der Browser nach Schritt 1 geschlossen wird, da er das Abrufen an das Betriebssystem übergeben kann.

Wenn der Nutzer den Download startet, während er offline ist, oder während des Downloads offline geht, wird der Hintergrundabruf pausiert und später fortgesetzt.

Mit der API

Funktionserkennung

Wie bei jeder neuen Funktion müssen Sie prüfen, ob der Browser sie unterstützt. Für den Hintergrundabruf ist es ganz einfach:

if ('BackgroundFetchManager' in self) {
  // This browser supports Background Fetch!
}

Hintergrundabruf starten

Die Haupt-API hängt von einer Service Worker-Registrierung ab. Registrieren Sie also zuerst einen Service Worker. Dann:

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

backgroundFetch.fetch verwendet drei Argumente:

Parameter
id string
kennzeichnet diesen Hintergrundabruf eindeutig.

backgroundFetch.fetch wird abgelehnt, wenn die ID mit einem vorhandenen Hintergrundabruf übereinstimmt.
requests Array<Request|string>
Die abzurufenden Elemente. Strings werden als URLs behandelt und über new Request(theString) in Requests umgewandelt.

Sie können Inhalte aus anderen Ursprüngen abrufen, sofern die Ressourcen dies über CORS zulassen.

Hinweis:Chrome unterstützt derzeit keine Anfragen, für die ein CORS-Preflight erforderlich wäre.
options Ein Objekt, das Folgendes enthalten kann:
options.title string
Ein Titel, der im Browser zusammen mit dem Fortschritt angezeigt wird.
options.icons Array<IconDefinition>
Ein Array von Objekten mit „src“, „size“ und „type“.
options.downloadTotal number
Die Gesamtgröße der Antworttexte (nach dem Entzippen).

Diese Angabe ist zwar optional, wird aber dringend empfohlen. Sie wird verwendet, um dem Nutzer die Größe des Downloads mitzuteilen und Fortschrittsinformationen bereitzustellen. Wenn Sie diese Angabe nicht machen, wird dem Nutzer im Browser angezeigt, dass die Größe unbekannt ist. Das kann dazu führen, dass der Nutzer den Download eher abbricht.

Wenn die Anzahl der Downloads im Hintergrund die hier angegebene Zahl überschreitet, wird der Vorgang abgebrochen. Es ist in Ordnung, wenn der Download kleiner als downloadTotal ist. Wenn Sie sich nicht sicher sind, wie groß der Download insgesamt sein wird, sollten Sie lieber etwas mehr Speicherplatz einplanen.

backgroundFetch.fetch gibt ein Promise zurück, das mit einem BackgroundFetchRegistration aufgelöst wird. Die Details dazu werden später erläutert. Das Promise wird abgelehnt, wenn der Nutzer Downloads deaktiviert hat oder einer der angegebenen Parameter ungültig ist.

Wenn Sie viele Anfragen für einen einzelnen Hintergrundabruf bereitstellen, können Sie Dinge kombinieren, die für den Nutzer logisch zusammengehören. Ein Film kann beispielsweise in Tausende von Ressourcen aufgeteilt sein (typisch bei MPEG-DASH) und zusätzliche Ressourcen wie Bilder enthalten. Ein Level eines Spiels kann sich über viele JavaScript-, Bild- und Audioressourcen erstrecken. Für den Nutzer ist es aber einfach „der Film“ oder „das Level“.

Vorhandenen Hintergrundabruf abrufen

So können Sie einen vorhandenen Hintergrundabruf abrufen:

navigator.serviceWorker.ready.then(async (swReg) => {
  const bgFetch = await swReg.backgroundFetch.get('my-fetch');
});

…indem Sie die id des gewünschten Hintergrundabrufs übergeben. get gibt undefined zurück, wenn kein aktiver Hintergrundabruf mit dieser ID vorhanden ist.

Ein Hintergrundabruf gilt als „aktiv“, sobald er registriert wird, bis er entweder erfolgreich ist, fehlschlägt oder abgebrochen wird.

Mit getIds können Sie eine Liste aller aktiven Hintergrundabrufe abrufen:

navigator.serviceWorker.ready.then(async (swReg) => {
  const ids = await swReg.backgroundFetch.getIds();
});

Registrierungen für den Hintergrundabruf