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 esté abierto, 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 antes puede ser extremadamente útil para usuarios y desarrolladores, pero permitir que una app web realice el trabajo en segundo plano sin que el usuario lo sepa está expuesto a abusos.
La API de presupuesto es una nueva API diseñada para permitir a los desarrolladores realizar tareas limitadas en segundo plano sin notificar al usuario, como una inserción silenciosa o una recuperación en segundo plano. En Chrome 60 y versiones posteriores, podrás comenzar a usar esta API, y el equipo de Chrome está ansioso por 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 un presupuesto con la nueva API de presupuesto. A cada sitio se le otorgará una cantidad de recursos en función de la participación del usuario que pueda consumir para acciones en segundo plano, como un envío 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, usar el presupuesto, obtener una lista del presupuesto restante y comprender el costo de las operaciones en segundo plano.
Reservar presupuesto
En Chrome 60 y versiones posteriores, el método navigator.budget.reserve() estará disponible sin ninguna marca.
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 el presupuesto se reservó, no es necesario notificar al usuario sobre tu trabajo en segundo plano.
En el ejemplo de las notificaciones push, puedes intentar reservar el presupuesto para una operación de “silent-push” y si reserve() se resuelve con un valor verdadero, la operación está permitida. De lo contrario, el resultado será 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 tipos de operaciones en la especificación. Tampoco hay una manera fácil de aumentar el presupuesto con fines de prueba o depuración una vez que se usa, pero como solución temporal, puedes crear un perfil nuevo en Chrome. Lamentablemente, no puedes usar el modo Incógnito para esto, ya que la API de presupuesto mostrará un presupuesto de cero en ese modo (aunque hay un error que genera un error durante la prueba).
Solo debes llamar a reserve() cuando quieras realizar la operación que reservas en algún momento en el futuro. Ten en cuenta que, si llamaste a Reserve en el ejemplo anterior, pero aun así se muestra una notificación, se utilizará el presupuesto de todas formas.
Un caso de uso común que no está habilitado solo por reserve() es la capacidad de programar un envío silencioso desde un backend. La API de presupuesto tiene API para habilitar este caso de uso, pero aún se trabaja en Chrome y, por el momento, solo están disponibles detrás de marcas o 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. Sin embargo, a fin de realizar pruebas, puedes usarlos de forma local si habilitas la marca de funciones de plataforma web experimental (Abrir 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(). En algunos navegadores (como Chrome) el presupuesto "disminuirá" con el tiempo. Por lo tanto, para brindarte una visibilidad completa, se muestra un array de BudgetStates, que indica cuál será el presupuesto en diferentes momentos en el futuro.
Para ver una lista de las entradas de presupuesto, podemos ejecutar lo siguiente:
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 su comportamiento del servidor (es decir, solo enviar un mensaje push con el fin de activar una actualización cuando el cliente tiene presupuesto para un envío silencioso).
Obtener el costo de una operación
Para averiguar cuánto costará una operación, si llamas a getCost(), se 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 envío 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);
});
Cuando se escriba, Chrome 60 imprimirá lo siguiente:
Cost of silent push is: 2
Algo 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 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 trabajos en segundo plano, como la recuperación en segundo plano, se puede usar la API de presupuesto para administrar la cantidad de operaciones que puedes realizar sin notificar al usuario.
Cuando uses la API, envía comentarios en el repositorio de GitHub o informa errores de Chrome en crbug.com.