Jetzt neu: Hintergrundabruf

Jake Archibald

2015 haben wir die Hintergrundsynchronisierung eingeführt, mit der der Dienst-Worker Aufgaben verschieben kann, bis der Nutzer eine Internetverbindung hat. Das bedeutet, dass der Nutzer eine Nachricht eingeben, auf „Senden“ klicken und die Website verlassen kann, in dem Wissen, dass die Nachricht entweder jetzt oder sobald er eine Verbindung hat, gesendet wird.

Das ist eine nützliche Funktion, erfordert aber, dass der Dienst-Worker während der gesamten Abrufzeit aktiv ist. Dies ist kein Problem für kurze Arbeitsschritte wie das Senden einer Nachricht. Wenn die Aufgabe jedoch zu lange dauert, beendet der Browser den Service Worker, da dies andernfalls ein Risiko für den Datenschutz und den Akku des Nutzers darstellt.

Was ist, wenn Sie etwas herunterladen möchten, was viel Zeit in Anspruch nimmt, z. B. einen Film, Podcasts oder Level eines Spiels? Dafür gibt es den Hintergrundabruf.

Der Hintergrundabruf ist seit Chrome 74 standardmäßig verfügbar.

In dieser zweiminütigen Demo wird der herkömmliche Zustand verglichen mit der Verwendung von Hintergrundabruf:

Probieren Sie die Demo selbst aus und sehen Sie sich den Code an.

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 über das Ergebnis zu informieren. Hier können Sie festlegen, 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 sehr sichtbar ist und einfach abgebrochen werden kann, gibt es keine Datenschutzbedenken einer zu langwierigen Hintergrundsynchronisierung. Da der Dienst-Worker nicht ständig ausgeführt wird, besteht keine Gefahr, dass er das System missbraucht, z. B. durch Bitcoin-Mining im Hintergrund.

Auf einigen Plattformen (z. B. Android) kann der Browser nach Schritt 1 geschlossen werden, da der Browser den Abruf 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

Funktion erkennen

Wie bei jeder neuen Funktion möchten Sie herausfinden, ob der Browser dies unterstützt. So aktivieren Sie den Hintergrundabruf:

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

Hintergrundabruf starten

Die Haupt-API hängt von einer Service Worker-Registrierung ab. Achten Sie daher darauf, zuerst einen Service Worker zu registrieren. 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,
  });
});

Für backgroundFetch.fetch sind drei Argumente erforderlich:

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

Wenn Sie mehrere Anfragen für einen einzelnen Hintergrundabruf bereitstellen, können Sie Dinge kombinieren, die für den Nutzer logisch nur eine Sache sind. Ein Film kann beispielsweise in Tausende von Ressourcen aufgeteilt sein (typisch für MPEG-DASH) und zusätzliche Ressourcen wie Bilder enthalten. Ein Level eines Spiels kann auf viele JavaScript-, Bild- und Audioressourcen verteilt werden. Für den Nutzer ist es jedoch nur „der Film“ oder „das Level“.

Vorhandenen Hintergrundabruf abrufen

So rufen Sie einen vorhandenen Hintergrundabruf ab:

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

Dabei wird die id des gewünschten Hintergrundabrufs übergeben. Für get wird undefined zurückgegeben, wenn kein aktiver Hintergrundabruf mit dieser ID vorhanden ist.

Ein Hintergrundabruf gilt ab dem Zeitpunkt seiner Registrierung als „aktiv“, bis er entweder erfolgreich abgeschlossen, fehlgeschlagen oder abgebrochen wurde.

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

Ein BackgroundFetchRegistration (bgFetch in den Beispielen oben) hat Folgendes:

Fortschritt wird erfasst

Das ist über das Ereignis progress möglich. Denken Sie daran, dass downloadTotal der von Ihnen angegebene Wert ist oder 0, wenn Sie keinen Wert angegeben haben.

bgFetch.addEventListener('progress', () => {
  // If we didn't provide a total, we can't provide a %.
  if (!bgFetch.downloadTotal) return;

  const percent = Math.round(bgFetch.downloaded / bgFetch.downloadTotal * 100);
  console.log(`Download progress: ${percent}%`);
});

Anfragen und Antworten abrufen

bgFetch.match('/ep-5.mp3').then(async (record) => {
  if (!record) {
    console.log('No record found');
    return;
  }

  console.log(`Here's the request`, record.request);
  const response = await record.responseReady;
  console.log(`And here's the response`, response);
});

record ist eine BackgroundFetchRecord und sieht so aus:

Service Worker-Ereignisse

Die Ereignisobjekte haben folgende Eigenschaften:

Auf Erfolg oder Misserfolg reagieren

Wir haben das Ereignis progress bereits kennengelernt. Es ist jedoch nur dann nützlich, wenn der Nutzer eine Seite Ihrer Website geöffnet hat. Der Hauptvorteil des Hintergrundabrufs besteht darin, dass die Inhalte auch dann funktionieren, wenn der Nutzer die Seite verlässt oder sogar den Browser schließt.

Wenn der Abruf im Hintergrund erfolgreich abgeschlossen wurde, erhält Ihr Service Worker das Ereignis backgroundfetchsuccess. event.registration ist die Registrierung für den Abruf im Hintergrund.

Nach diesem Ereignis sind die abgerufenen Anfragen und Antworten nicht mehr zugänglich. Wenn Sie sie behalten möchten, verschieben Sie sie an einen anderen Speicherort, z. B. in die Cache API.

Wie bei den meisten Dienstworker-Ereignissen sollten Sie event.waitUntil verwenden, damit der Dienstworker weiß, wann das Ereignis abgeschlossen ist.

Beispielsweise in Ihrem Service Worker:

addEventListener('backgroundfetchsuccess', (event) => {
  const bgFetch = event.registration;

  event.waitUntil(async function() {
    // Create/open a cache.
    const cache = await caches.open('downloads');
    // Get all the records.
    const records = await bgFetch.matchAll();
    // Copy each request/response across.
    const promises = records.map(async (record) => {
      const response = await record.responseReady;
      await cache.put(record.request, response);
    });

    // Wait for the copying to complete.
    await Promise.all(promises);

    // Update the progress notification.
    event.updateUI({ title: 'Episode 5 ready to listen!' });
  }());
});

Möglicherweise ist der Fehler auf eine einzelne 404-Antwort zurückzuführen, die für Sie nicht wichtig war. Es kann sich daher trotzdem lohnen, einige Antworten wie oben beschrieben in einen Cache zu kopieren.

Auf Klicks reagieren

Die Benutzeroberfläche mit dem Downloadfortschritt und dem Ergebnis ist anklickbar. Mit dem Ereignis backgroundfetchclick im Service Worker können Sie darauf reagieren. Wie oben ist event.registration die Registrierung für den Hintergrundabruf.

Normalerweise wird bei diesem Ereignis ein Fenster geöffnet:

addEventListener('backgroundfetchclick', (event) => {
  const bgFetch = event.registration;

  if (bgFetch.result === 'success') {
    clients.openWindow('/latest-podcasts');
  } else {
    clients.openWindow('/download-progress');
  }
});

Zusätzliche Ressourcen

• Erläuterung
• Spezifikation
• Eintrag auf chromestatus.com

Korrektur: In einer früheren Version dieses Artikels wurde fälschlicherweise behauptet, dass der Abruf im Hintergrund ein „Webstandard“ ist. Die API befindet sich derzeit nicht in der Entwicklungsphase. Die Spezifikation finden Sie im WICG als Entwurf für einen Community-Gruppenbericht.