Einführung in die Budget API

Mit der Push Messaging API können wir Nutzern Benachrichtigungen senden, auch wenn der Browser geschlossen ist. Viele Entwickler möchten diese Nachrichten verwenden, um Inhalte zu aktualisieren und zu synchronisieren, ohne dass der Browser geöffnet ist. Die API hat jedoch eine wichtige Einschränkung: Sie müssen immer eine Benachrichtigung für jede einzelne empfangene Push-Nachricht anzeigen.

Die Möglichkeit, eine Push-Nachricht zum Synchronisieren von Daten auf dem Gerät eines Nutzers zu senden oder eine zuvor angezeigte Benachrichtigung auszublenden, kann für Nutzer und Entwickler sehr nützlich sein. Wenn eine Webanwendung jedoch im Hintergrund arbeitet, ohne dass der Nutzer weiß, kann dies missbraucht werden.

Die Budget API ist eine neue API, mit der Entwickler begrenzte Hintergrundarbeiten ausführen können, ohne den Nutzer zu benachrichtigen, z. B. ein stiller Push oder ein Abruf im Hintergrund. Ab Chrome 60 können Sie diese API verwenden und das Chrome-Team freut sich auf Feedback von Entwicklern.

Damit Entwickler die Ressourcen eines Nutzers im Hintergrund nutzen können, wird auf der Webplattform das Konzept eines Budgets mit der neuen Budget API eingeführt. Jede Website erhält basierend auf den Nutzerinteraktionen eine bestimmte Menge an Ressourcen, die für Hintergrundaktionen wie ein stilles Push-Nachrichten verwendet werden können. Dabei wird das Budget mit jedem Vorgang verringert. Wenn das Budget aufgebraucht ist, können Hintergrundaktionen nicht mehr ohne Nutzerwahrnehmbarkeit ausgeführt werden. Der User-Agent ist dafür verantwortlich, das Budget zu ermitteln, das einer Webanwendung anhand seiner Heuristik zugewiesen wird. So kann beispielsweise das Budget mit der Nutzerinteraktion verknüpft werden. Jeder Browser kann seine eigene Heuristik festlegen.

Zusammenfassung Mit der Budget API können Sie ein Budget reservieren, das Budget verwenden, eine Liste des verbleibenden Budgets abrufen und die Kosten von Hintergrundvorgängen nachvollziehen.

Budget reservieren

In Chrome 60 und höher ist die navigator.budget.reserve()-Methode ohne Flags verfügbar.

Mit der Methode reserve() können Sie ein Budget für einen bestimmten Vorgang anfordern. Sie gibt einen booleschen Wert zurück, der angibt, ob das Budget reserviert werden kann. Wenn das Budget reserviert wurde, muss der Nutzer nicht über Ihre Hintergrundarbeit informiert werden.

Im Beispiel mit Push-Benachrichtigungen können Sie versuchen, ein Budget für einen „Silent Push“-Vorgang zu reservieren. Wenn reserve() mit „wahr“ zurückgegeben wird, ist der Vorgang zulässig. Andernfalls wird „false“ zurückgegeben und Sie müssen eine Benachrichtigung

self.addEventListener('push', event => {
 const promiseChain = navigator.budget.reserve('silent-push')
   .then((reserved) => {
     if (reserved) {
       // No need to show a notification.
       return;
     }

     // Not enough budget is available, must show a notification.
     return registration.showNotification(...);
   });
 event.waitUntil(promiseChain);
});

In Chrome 60 ist „silent-push“ der einzige verfügbare Vorgangstyp. Eine vollständige Liste der Vorgangstypen finden Sie in der Spezifikation. Es gibt auch keine einfache Möglichkeit, das Budget für Tests oder Fehlerbehebungen zu erhöhen, nachdem es verwendet wurde. Als vorübergehende Lösung können Sie jedoch ein neues Profil in Chrome erstellen. Leider können Sie auch den Inkognitomodus nicht verwenden, da die Budget API in diesem Modus ein Budget von null zurückgibt. Es gibt jedoch einen Fehler, der bei meinen Tests zu einem Fehler führt.

Sie sollten reserve() nur dann aufrufen, wenn Sie den Vorgang, den Sie reservieren, später ausführen möchten. Hinweis: Wenn Sie im obigen Beispiel „reserve“ aufgerufen haben, aber trotzdem eine Benachrichtigung angezeigt wurde, wird das Budget trotzdem verwendet.

Ein häufiger Anwendungsfall, der nicht nur mit reserve() möglich ist, ist die Möglichkeit, ein stilles Push-Nachrichten-Ereignis von einem Back-End aus zu planen. Die Budget API verfügt zwar über APIs, um diesen Anwendungsfall zu ermöglichen, sie werden aber noch in Chrome bearbeitet und sind derzeit nur hinter Flags und / oder einem Ursprungstest verfügbar.

Budget API und Ursprungstests

Es gibt zwei Methoden, getBudget() und getCost(), die von einer Webanwendung verwendet werden können, um die Nutzung ihres Budgets zu planen.

In Chrome 60 sind beide Methoden verfügbar, wenn Sie sich für den Ursprungstest registrieren. Andernfalls können Sie sie lokal verwenden, indem Sie die Flag „Experimental Web Platform features“ aktivieren. Öffnen Sie dazu in Chrome chrome://flags/#enable-experimental-web-platform-features.

Sehen wir uns an, wie Sie diese APIs verwenden.

Budget abrufen

Sie können Ihr verfügbares Budget mit der Methode getBudget() ermitteln. Bei einigen Browsern (z. B. Chrome) wird das Budget im Laufe der Zeit aufgebraucht. Um Ihnen eine vollständige Übersicht zu bieten, wird ein Array von BudgetStates zurückgegeben, das angibt, wie hoch Ihr Budget zu verschiedenen Zeitpunkten in der Zukunft sein wird.

So rufen Sie die Budgeteinträge auf, die wir ausführen können:

navigator.budget.getBudget()
.then((budgets) => {
  budgets.forEach((element) => {
    console.log(\`At '${new Date(element.time).toString()}' \` +
      \`your budget will be '${element.budgetAt}'.\`);
  });
});

Der erste Eintrag ist Ihr aktuelles Budget. Zusätzliche Werte zeigen, wie hoch Ihr Budget zu verschiedenen Zeitpunkten in der Zukunft sein wird.

At 'Mon Jun 05 2017 12:47:20' you will have a budget of '3'.
At 'Fri Jun 09 2017 10:42:57' you will have a budget of '2'.
At 'Fri Jun 09 2017 12:31:09' you will have a budget of '1'.

Ein Vorteil der Aufnahme zukünftiger Budgetzuweisungen besteht darin, dass Entwickler diese Informationen an ihr Backend weitergeben können, um das serverseitige Verhalten anzupassen. Das bedeutet, dass nur dann eine Push-Nachricht gesendet wird, um ein Update auszulösen, wenn der Client ein Budget für einen stillen Push hat.

Hinweis: Zum Zeitpunkt der Abfassung dieses Artikels gibt es einen Fehler, bei dem das Budget auf einen negativen Wert gesenkt werden kann. Das Budget darf niemals negativ werden.

Kosten eines Vorgangs abrufen

Wenn Sie wissen möchten, wie viel ein Vorgang kostet, geben Sie getCost() ein. Daraufhin wird eine Zahl zurückgegeben, die den maximalen Budgetbetrag angibt, der verbraucht wird, wenn Sie reserve() für diesen Vorgang aufrufen.

Mit dem folgenden Code können wir beispielsweise die Kosten ermitteln, die entstehen, wenn keine Benachrichtigung angezeigt wird, wenn Sie eine Push-Nachricht erhalten (d.h. die Kosten für eine stumme Push-Nachricht):

navigator.budget.getCost('silent-push')
.then((cost) => {
  console.log('Cost of silent push is:', cost);
})
.catch((err) => {
  console.error('Unable to get cost:', err);
});

Derzeit können mit Chrome 60 folgende Elemente gedruckt werden:

Cost of silent push is: 2

Bei den Methoden reserve() und getCost() ist zu beachten, dass die tatsächlichen Kosten eines Vorgangs unter den von getCost() zurückgegebenen Kosten liegen können. Möglicherweise können Sie einen Vorgang auch dann reservieren, wenn Ihr aktuelles Budget unter den angegebenen Kosten liegt. Die spezifischen Details aus der Spezifikation finden Sie hier:

Hinweis:Die reservierten Kosten für bestimmte Hintergrundvorgänge können unter Umständen niedriger sein als die Kosten, die von „getCost()“ angegeben werden, wenn sich das Gerät des Nutzers in günstigen Bedingungen befindet, z. B. weil es nicht mit Akku betrieben wird.

Hinweis: Wenn Sie einen Vorgangstyp übergeben, der vom Browser nicht unterstützt wird oder ungültig ist, wird das Promise mit einer TypeError abgelehnt.

Das ist die aktuelle API in Chrome. Da im Web weiterhin neue APIs unterstützt werden, die die Ausführung von Hintergrundarbeiten wie das Abrufen im Hintergrund erfordern, kann die Budget API verwendet werden, um die Anzahl der Vorgänge zu verwalten, ohne den Nutzer zu benachrichtigen.

Wenn Sie die API verwenden, geben Sie bitte Feedback im GitHub-Repository oder melden Sie Chrome-Fehler unter crbug.com.