L'API Push Messaging 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 ne soit ouvert, mais l'API comporte une restriction importante: vous devez toujours afficher une notification pour chaque message push reçu.
Pouvoir envoyer un message push pour synchroniser les données sur l'appareil d'un utilisateur ou masquer une notification que vous avez affichée précédemment peut être extrêmement utile pour les utilisateurs et les développeurs, mais autoriser une application Web à effectuer des tâches en arrière-plan sans que l'utilisateur en sache qu'il est sujet à une utilisation abusive.
L'API API est une nouvelle API conçue pour permettre aux développeurs d'effectuer des tâches en arrière-plan limitées sans avertir l'utilisateur, comme un transfert silencieux ou une récupération en arrière-plan. Vous pourrez commencer à utiliser cette API à partir de la version 60 de Chrome. L'équipe Chrome sera heureuse 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 se verra attribuer une quantité de ressources en fonction de l'engagement utilisateur qu'il pourra consommer pour des actions en arrière-plan, telles qu'un transfert silencieux, où chaque opération épuisera le budget. Une fois le budget dépensé, les actions en arrière-plan ne peuvent plus être effectuées sans la visibilité de l'utilisateur. L'user-agent sera chargé de déterminer le budget attribué à une application Web en fonction de ses heuristiques. Par exemple, le budget alloué peut être lié à l'engagement utilisateur. Chaque navigateur peut choisir sa propre heuristique.
Résumé : l'API Budget vous permet de réserver et d'utiliser un budget, 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 les versions ultérieures, la méthode navigator.budget.reserve() sera disponible sans indicateur.
La méthode reserve() vous permet de demander un budget pour une opération spécifique. Elle renvoie une valeur booléenne indiquant 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 est "false" et vous devez 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 pouvez consulter la liste complète des types d'opérations dans la spécification. Il n'existe pas non plus de moyen simple d'augmenter votre budget à des fins de test ou de débogage une fois celui-ci utilisé. Toutefois, vous pouvez temporairement créer un profil dans Chrome. Malheureusement, vous ne pouvez pas non plus utiliser la navigation privée pour cela, car l'API Budget renvoie un budget de zéro en mode navigation privée (bien qu'un bug entraîne une erreur lors de mes tests).
N'appelez reserve() que si vous avez l'intention d'effectuer l'opération que vous réservez à un moment ultérieur. Notez que si vous avez appelé "Réserver" dans l'exemple ci-dessus, mais que vous avez quand même affiché une notification, le budget sera tout de même utilisé.
La possibilité de planifier une transmission silencieuse à partir d'un backend est un cas d'utilisation courant qui n'est pas activé uniquement par reserve(). L'API Budget dispose d'API permettant de répondre à ce cas d'utilisation, mais celles-ci sont toujours en cours de traitement dans Chrome et ne sont actuellement disponibles qu'avec des options et / ou une phase d'évaluation.
API Budget et phases d'évaluation
Il existe deux méthodes, getBudget() et getCost(), qui peuvent être utilisées par une application Web pour planifier l'utilisation de son budget.
Dans Chrome 60, ces deux méthodes sont disponibles si vous vous inscrivez à la phase d'évaluation. Toutefois, pour les tests, vous pouvez les utiliser localement en activant l'indicateur de fonctionnalités expérimentales de la plate-forme Web (Ouvrir chrome://flags/#enable-experimental-web-platform-features dans Chrome).
Voyons comment utiliser ces API.
Maîtrisez votre budget
Vous pouvez déterminer votre budget disponible à l'aide de la méthode getBudget(). Certains navigateurs (comme Chrome) connaîtront une "décroissance" du budget au fil du temps. Par conséquent, pour vous offrir une visibilité totale, cette fonction renvoie un tableau de BudgetStates, qui indique le montant de votre budget à différents moments à l'avenir.
Pour lister 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, tandis que les valeurs supplémentaires indiquent le montant de votre budget à différents moments à l'avenir.
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 futurs budgets alloués est que les développeurs peuvent partager ces informations avec leur backend pour adapter leur comportement côté serveur (par exemple, n'envoyer un message push pour déclencher une mise à jour que lorsque le client dispose d'un budget pour une transmission silencieuse).
Obtenir le coût d'une opération
Pour déterminer le coût d'une opération, l'appel de getCost() renvoie un nombre indiquant le montant maximal du budget qui sera utilisé si vous appelez reserve() pour cette opération.
Par exemple, nous pouvons déterminer le coût de l'absence de notification lors de la réception d'un message push (c'est-à-dire le coût d'une transmission silencieuse), 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 ce document, Chrome 60 affichera les éléments suivants:
Cost of silent push is: 2
Une chose à mettre en évidence 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 d'accepter de nouvelles API qui nécessitent la possibilité d'effectuer des tâches en arrière-plan, telles que 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 avertir l'utilisateur.
Lorsque vous utilisez l'API, veuillez nous faire part de vos commentaires sur le dépôt GitHub ou signaler des bugs Chrome sur crbug.com.