L'API de messagerie push nous permet d'envoyer des notifications à un utilisateur même lorsque le navigateur est fermé. De nombreux développeurs souhaitent pouvoir utiliser cette messagerie pour mettre à jour et synchroniser le contenu sans que le navigateur soit ouvert, mais l'API est soumise à une restriction importante: vous devez toujours afficher une notification pour chaque message push reçu.
La possibilité d'envoyer un message push pour synchroniser les données sur l'appareil d'un utilisateur ou masquer une notification que vous aviez précédemment affichée peut être extrêmement utile pour les utilisateurs et les développeurs. Toutefois, autoriser une application Web à effectuer des tâches en arrière-plan à l'insu de l'utilisateur peut être abusif.
L'API Budget est une nouvelle API conçue pour permettre aux développeurs d'effectuer des tâches en arrière-plan limitées (comme un transfert silencieux ou une récupération en arrière-plan) sans en informer l'utilisateur. Dans Chrome 60 et versions ultérieures, vous pourrez commencer à utiliser cette API, et l'équipe Chrome est impatiente de recevoir les commentaires des développeurs.
Pour permettre aux développeurs de consommer les ressources d'un utilisateur en arrière-plan, la plate-forme Web introduit le concept de budget à l'aide de la nouvelle API Budget. Chaque site recevra une quantité de ressources en fonction de l'engagement utilisateur qu'il peut consommer pour les actions en arrière-plan, telles qu'un push silencieux, où chaque opération épuisera le budget. Lorsque le budget est dépensé, les actions en arrière-plan ne peuvent plus être effectuées sans visibilité de l'utilisateur. L'agent utilisateur est chargé de déterminer le budget attribué à une application Web en fonction de ses heuristiques. Par exemple, l'allocation budgétaire peut être liée à l'engagement des utilisateurs. Chaque navigateur peut définir sa propre heuristique.
Résumé : L'API Budget vous permet de réserver un budget, de l'utiliser, d'obtenir la liste du budget restant et de comprendre le coût des opérations en arrière-plan.
Réservation du budget
Dans Chrome 60 et versions ultérieures, la méthode navigator.budget.reserve() sera disponible sans aucun indicateur.
La méthode reserve() vous permet de demander un budget pour une opération spécifique. Elle renvoie une valeur booléenne pour indiquer si le budget peut être réservé. Si le budget a été réservé, il n'est pas nécessaire d'informer l'utilisateur de votre travail en arrière-plan.
Dans l'exemple des notifications push, vous pouvez essayer de réserver un budget pour une opération "push silencieuse". Si reserve() renvoie la valeur "true", l'opération est autorisée. Sinon, la valeur renvoyée sera "false", et vous devrez afficher une notification.
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);
});
Dans Chrome 60, "silent-push" est le seul type d'opération disponible, mais vous trouverez une liste complète des types d'opérations dans les spécifications. Il n'existe pas non plus de moyen simple d'augmenter votre budget à des fins de test ou de débogage une fois qu'il est utilisé, mais vous pouvez créer un nouveau profil dans Chrome en guise de solution temporaire. Malheureusement, vous ne pouvez pas non plus utiliser le mode navigation privée, car l'API Budget renvoie un budget de zéro en mode navigation privée (bien qu'un bug génère une erreur lors de mes tests).
Vous ne devez appeler reserve() que lorsque vous avez l'intention d'effectuer l'opération que vous réservez à un moment donné. Notez que si vous avez appelé la méthode reserve dans l'exemple ci-dessus, mais que vous avez quand même affiché une notification, le budget sera toujours utilisé.
Un cas d'utilisation courant qui n'est pas activé par reserve() seul est la possibilité de planifier un push silencieux à partir d'un backend. L'API Budget dispose d'API pour activer ce cas d'utilisation, mais elles sont toujours en cours de développement dans Chrome et ne sont actuellement disponibles que derrière des indicateurs et / ou une phase d'évaluation de l'origine.
API Budget et phases d'évaluation pour les origines
Une application Web peut utiliser deux méthodes, getBudget() et getCost(), pour planifier l'utilisation de son budget.
Dans Chrome 60, ces deux méthodes sont disponibles si vous vous inscrivez à la phase d'évaluation de l'origine. Sinon, vous pouvez les utiliser localement à des fins de test en activant l'indicateur "Experimental Web Platform features" (Ouvrez chrome://flags/#enable-experimental-web-platform-features dans Chrome).
Voyons comment utiliser ces API.
Obtenir votre budget
Vous pouvez trouver votre budget disponible à l'aide de la méthode getBudget(). Certains navigateurs (comme Chrome) voient leur budget "dégrader" au fil du temps. Pour vous offrir une visibilité complète, cette méthode renvoie un tableau de BudgetStates, qui indique votre budget à différents moments à l'avenir.
Pour afficher les entrées de budget que nous pouvons exécuter:
navigator.budget.getBudget()
.then((budgets) => {
budgets.forEach((element) => {
console.log(\`At '${new Date(element.time).toString()}' \` +
\`your budget will be '${element.budgetAt}'.\`);
});
});
La première entrée correspond à votre budget actuel. Les valeurs supplémentaires indiquent le montant de votre budget à différents moments.
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'.
L'un des avantages de l'inclusion de futures allocations budgétaires est que les développeurs peuvent partager ces informations avec leur backend pour adapter leur comportement côté serveur (c'est-à-dire n'envoyer un message push que pour déclencher une mise à jour lorsque le client dispose d'un budget pour un push silencieux).
Obtenir le coût d'une opération
Pour connaître le coût d'une opération, l'appel de getCost() renvoie un nombre indiquant le montant maximal du budget qui sera consommé si vous appelez reserve() pour cette opération.
Par exemple, nous pouvons déterminer le coût de ne pas afficher de notification lorsque vous recevez un message push (c'est-à-dire le coût d'un push silencieux) avec le code suivant:
navigator.budget.getCost('silent-push')
.then((cost) => {
console.log('Cost of silent push is:', cost);
})
.catch((err) => {
console.error('Unable to get cost:', err);
});
Au moment de la rédaction de cet article, Chrome 60 imprime les éléments suivants:
Cost of silent push is: 2
Une chose à souligner avec les méthodes reserve() et getCost() est que le coût réel d'une opération peut être inférieur au coût renvoyé par getCost().
Vous pouvez toujours réserver une opération si votre budget actuel est inférieur au coût indiqué. Les détails spécifiques de la spécification sont les suivants:
Il s'agit de l'API actuelle dans Chrome. Comme le Web continue de prendre en charge de nouvelles API qui nécessitent de pouvoir effectuer des tâches en arrière-plan, comme la récupération en arrière-plan, l'API Budget peut être utilisée pour gérer le nombre d'opérations que vous pouvez effectuer sans en informer l'utilisateur.
À mesure que vous utilisez l'API, veuillez nous faire part de vos commentaires dans le dépôt GitHub ou signaler des bugs Chrome à l'adresse crbug.com.