La API de Push Messaging nos permite enviar notificaciones a un usuario incluso cuando el navegador está cerrado. Muchos desarrolladores quieren poder usar estos mensajes para actualizar y sincronizar contenido sin que el navegador se abra, pero la API tiene una restricción importante: siempre debes mostrar una notificación por cada mensaje push recibido.
Poder enviar un mensaje push para sincronizar datos en el dispositivo de un usuario, o bien ocultar una notificación que habías mostrado anteriormente puede ser muy útil para los usuarios y desarrolladores, pero permitir que una app web funcione en segundo plano sin que el usuario lo sepa que puede sufrir abuso.
La API de Budget es una nueva API diseñada para permitir que los desarrolladores realicen tareas en segundo plano limitadas sin notificar al usuario, como las inserciones silenciosas o una actualización en segundo plano. En Chrome 60 y versiones posteriores, podrás comenzar a usar esta API, y el equipo de Chrome espera recibir comentarios de los desarrolladores.
Para permitir que los desarrolladores consuman los recursos de un usuario en segundo plano, la plataforma web presenta el concepto de presupuesto con la nueva API de presupuesto. A cada sitio se le otorgará una cantidad de recursos según la participación del usuario que puede consumir para acciones en segundo plano, como un push silencioso, en el que cada operación agotará el presupuesto. Cuando se agota el presupuesto, ya no se pueden realizar acciones en segundo plano sin la visibilidad del usuario. El usuario-agente será responsable de determinar el presupuesto asignado a una app web en función de su heurística, por ejemplo, la asignación de presupuesto podría vincularse a la participación del usuario. Cada navegador puede decidir su propia heurística.
Resumen: La API de Budget te permite reservar y usar el presupuesto, obtener una lista del presupuesto restante y comprender el costo de las operaciones en segundo plano.
Reserva de presupuesto
En Chrome 60 y versiones posteriores, el método navigator.budget.reserve() estará disponible sin marcas.
El método reserve() te permite solicitar un presupuesto para una operación específica y mostrará un valor booleano para indicar si se puede reservar el presupuesto. Si se reservó el presupuesto, no es necesario notificarle al usuario tu trabajo previo.
En el ejemplo de las notificaciones push, puedes intentar reservar el presupuesto para una operación de "push silencioso" y, si reserve() se resuelve como verdadero, se permite la operación. De lo contrario, se mostrará un valor falso y deberás mostrar una notificación.
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);
});
En Chrome 60, "silent-push" es el único tipo de operación disponible, pero puedes encontrar una lista completa de los tipos de operación en las especificaciones. Tampoco hay una manera fácil de aumentar tu presupuesto para pruebas o depuración una vez que se usa, pero como solución alternativa temporal, puedes crear un perfil nuevo en Chrome. Lamentablemente, tampoco puedes usar el modo Incógnito para esto, ya que la API de Budget mostrará un presupuesto de cero en Incógnito (aunque hay un error que genera un error durante mis pruebas).
Solo debes llamar a reserve() si tienes la intención de realizar la operación que reservas en algún momento en el futuro. Ten en cuenta que, si llamaste a la reserva en el ejemplo anterior, pero aún se muestra una notificación, se seguirá usando el presupuesto.
Un caso de uso común que reserve() no habilita por sí solo es la capacidad de programar un push silencioso desde un backend. La API de presupuesto tiene APIs para habilitar este caso de uso, pero aún se está desarrollando en Chrome y, por el momento, solo están disponibles detrás de marcas o en una prueba de origen.
API de presupuesto y pruebas de origen
Hay dos métodos, getBudget() y getCost(), que una app web puede usar para planificar el uso de su presupuesto.
En Chrome 60, ambos métodos están disponibles si te registras en la prueba de origen. De lo contrario, para realizar pruebas, puedes usarlos de forma local habilitando la marca de funciones de la plataforma web experimental (abre chrome://flags/#enable-experimental-web-platform-features en Chrome).
Veamos cómo usar estas APIs.
Obtén tu presupuesto
Puedes encontrar tu presupuesto disponible con el método getBudget(). Algunos navegadores (como Chrome) tendrán un "deterioro" del presupuesto con el tiempo, por lo que, para brindarte visibilidad completa, se muestra un array de BudgetStates que indica cuál será tu presupuesto en varios momentos en el futuro.
Para obtener una lista de las entradas de presupuesto que podemos ejecutar, sigue estos pasos:
navigator.budget.getBudget()
.then((budgets) => {
budgets.forEach((element) => {
console.log(\`At '${new Date(element.time).toString()}' \` +
\`your budget will be '${element.budgetAt}'.\`);
});
});
La primera entrada será tu presupuesto actual y los valores adicionales mostrarán cuál será tu presupuesto en varios puntos en el futuro.
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'.
Uno de los beneficios de incluir asignaciones de presupuesto futuras es que los desarrolladores pueden compartir esta información con su backend para adaptar el comportamiento del servidor (es decir, solo enviar un mensaje push con el objetivo de activar una actualización cuando el cliente tenga presupuesto para un envío silencioso).
Cómo obtener el costo de una operación
Para saber cuánto costará una operación, llamar a getCost() mostrará un número que indica el importe máximo de presupuesto que se consumirá si llamas a reserve() para esa operación.
Por ejemplo, podemos averiguar el costo de no mostrar una notificación cuando recibes un mensaje push (es decir, el costo de un push silencioso) con el siguiente código:
navigator.budget.getCost('silent-push')
.then((cost) => {
console.log('Cost of silent push is:', cost);
})
.catch((err) => {
console.error('Unable to get cost:', err);
});
Al momento de la redacción, Chrome 60 imprimirá lo siguiente:
Cost of silent push is: 2
Una cosa que se debe destacar con los métodos reserve() y getCost() es que el
costo real de una operación puede ser menor que el costo que muestra getCost().
Es posible que puedas reservar una operación si tu presupuesto actual es inferior al costo indicado. Los detalles específicos de la especificación son los siguientes :
Esa es la API actual en Chrome y, a medida que la Web sigue admitiendo nuevas APIs que requieren la capacidad de realizar tareas en segundo plano, como la recuperación en segundo plano, la API de Budget se puede usar para administrar la cantidad de operaciones que puedes realizar sin notificar al usuario.
Cuando uses la API, envía comentarios sobre el repositorio de GitHub o informa errores de Chrome en crbug.com.