Introduzione all'API Budget

L'API Push Messaging ci consente di inviare notifiche a un utente anche quando il browser è chiuso. Molti sviluppatori vogliono poter utilizzare questo sistema di messaggistica per aggiornare e sincronizzare i contenuti senza che il browser sia aperto, ma l'API ha una limitazione importante: devi sempre mostrare una notifica per ogni singolo messaggio push ricevuto.

La possibilità di inviare un messaggio push per sincronizzare i dati sul dispositivo di un utente o nascondere una notifica che hai mostrato in precedenza può essere estremamente utile per gli utenti e gli sviluppatori, ma consentire a un'app web di eseguire operazioni in background senza che l'utente lo sappia è un'opportunità per gli abusi.

L'API Budget è una nuova API progettata per consentire agli sviluppatori di eseguire operazioni in background limitate senza informare l'utente, ad esempio push silenziosa o recupero in background. In Chrome 60 e versioni successive potrai iniziare a utilizzare questa API e il team di Chrome è ansioso di ricevere feedback dagli sviluppatori.

Per consentire agli sviluppatori di utilizzare le risorse di un utente in background, la piattaforma web sta introducendo il concetto di budget utilizzando la nuova API Budget. A ogni sito verrà assegnata una quantità di risorse in base al coinvolgimento degli utenti che può consumare per le azioni in background, come un push silenzioso, in cui ogni operazione esaurirà il budget. Quando il budget è stato speso, le azioni in background non possono più essere eseguite senza la visibilità dell'utente. L'user agent sarà responsabile della determinazione del budget assegnato a un'app web in base alle sue heurismi, ad esempio l'indennità di bilancio potrebbe essere collegata al coinvolgimento degli utenti. Ogni browser può decidere la propria regola di euristica.

TL;DR L'API Budget consente di prenotare il budget, utilizzare il budget, ottenere un elenco del budget rimanente e comprendere il costo delle operazioni in background

Prenotazione del budget

In Chrome 60 e versioni successive, il metodo navigator.budget.reserve() sarà disponibile senza flag.

Il metodo reserve() consente di richiedere il budget per un'operazione specifica e restituisce un valore booleano per indicare se il budget può essere prenotato. Se il budget è stato prenotato, non è necessario informare l'utente del tuo lavoro in background.

Nell'esempio delle notifiche push, puoi tentare di riservare il budget per un'operazione di "push silenzioso" e se reserve() si risolve in true, l'operazione è consentita. In caso contrario, restituirà false e dovrai mostrare una notifica

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, "push silenzioso" è l'unico tipo di operazione disponibile, ma puoi trovare un elenco completo dei tipi di operazioni nelle specifiche. Inoltre, non esiste un modo semplice per aumentare il budget per scopi di test o debug una volta utilizzato, ma come soluzione temporanea puoi creare un nuovo profilo in Chrome. Purtroppo non puoi utilizzare la modalità di navigazione in incognito nemmeno per questo, poiché l'API Budget restituirà un budget pari a zero in incognito (anche se è presente un bug che genera un errore durante i miei test).

Devi chiamare reserve() solo quando intendi eseguire l'operazione che stai prenotando in un secondo momento. Tieni presente che se hai chiamato la prenotazione nell'esempio riportato sopra, ma è stata comunque visualizzata una notifica, il budget verrà comunque utilizzato.

Un caso d'uso comune che non viene abilitato solo da reserve() è la possibilità di pianificare un push silenzioso da un backend. L'API Budget dispone di API per abilitare questo caso d'uso, ma sono ancora in fase di sviluppo in Chrome e al momento sono disponibili solo dietro flag e / o una prova dell'origine.

API Budget e prove dell'origine

Un'app web può utilizzare due metodi, getBudget() e getCost(), per pianificare l'utilizzo del budget.

In Chrome 60, entrambi i metodi sono disponibili se ti registri per la prova dell'origine, ma in caso contrario puoi utilizzarli localmente attivando il flag Funzionalità sperimentali della piattaforma web (apri chrome://flags/#enable-experimental-web-platform-features in Chrome).

Vediamo come utilizzare queste API.

Visualizza il budget

Puoi trovare il budget disponibile con il metodo getBudget(). Alcuni browser (come Chrome) hanno un "decadimento" del budget nel tempo, quindi per offrirti una visibilità completa viene restituito un array di BudgetStates che indica quale sarà il tuo budget in vari momenti in futuro.

Per elencare le voci di budget che possiamo eseguire:

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

La prima voce sarà il budget attuale e i valori aggiuntivi mostreranno il budget nei vari momenti futuri.

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 dei vantaggi dell'inclusione delle tolleranze di budget future è che gli sviluppatori possono condividere queste informazioni con il proprio backend per adattare il comportamento lato server (ad es. inviare un messaggio push solo per attivare un aggiornamento quando il client ha budget per un push silenzioso).

Ottenere il costo di un'operazione

Per scoprire il costo di un'operazione, chiama getCost() per visualizzare un numero che indica l'importo massimo del budget che verrà consumato se chiami reserve() per l'operazione.

Ad esempio, possiamo scoprire il costo della mancata visualizzazione di una notifica quando ricevi un messaggio push (ovvero il costo di un push silenzioso) con il seguente codice:

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 della stesura di questo documento, Chrome 60 stampa:

Cost of silent push is: 2

Un aspetto da evidenziare con i metodi reserve() e getCost() è che il costo effettivo di un'operazione può essere inferiore al costo restituito da getCost(). Potresti comunque essere in grado di prenotare un'operazione se il tuo budget corrente è inferiore al costo indicato. I dettagli specifici della specifica sono riportati di seguito:

Questa è l'API attuale in Chrome e poiché il web continua a supportare nuove API che richiedono la possibilità di eseguire operazioni in background, come il recupero in background, l'API Budget può essere utilizzata per gestire il numero di operazioni che puoi eseguire senza informare l'utente.

Quando utilizzi l'API, fornisci feedback sul repository GitHub o segnala bug di Chrome all'indirizzo crbug.com.