L'API Push Messaging ci consente di inviare notifiche a un utente anche quando il browser è chiuso. Molti sviluppatori vogliono poter utilizzare questi messaggi 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.
Essere in grado di inviare un messaggio push per sincronizzare i dati sul dispositivo di un utente o nascondere una notifica che avevi mostrato in precedenza può essere estremamente utile per utenti e sviluppatori, ma consentire a un'app web di lavorare in background senza che l'utente se ne accorga è predisposto ad abusi.
L'API API è una nuova API progettata per consentire agli sviluppatori di eseguire operazioni in background limitate senza informare l'utente, come il push invisibile all'utente o il recupero in background. In Chrome 60 e versioni successive potrai iniziare a utilizzare questa API e il team di Chrome non vede l'ora di ricevere feedback dagli sviluppatori.
Per consentire agli sviluppatori di consumare le risorse di un utente in background, la piattaforma web sta introducendo il concetto di budget utilizzando la nuova API Budget. A ogni sito viene assegnata una quantità di risorse in base al coinvolgimento dell'utente che può utilizzare per azioni in background, ad esempio un push invisibile all'utente, in cui ogni operazione esaurirà il budget. Quando il budget viene speso, le azioni in background non possono più essere eseguite senza visibilità degli utenti. Lo user agent sarà responsabile della determinazione del budget assegnato a un'app web in base alla sua euristica; ad esempio, la quota di budget potrebbe essere collegata al coinvolgimento dell'utente. Ogni browser può stabilire la propria euristica.
TL;DR L'API Budget ti consente di prenotare il budget, di utilizzarlo, di ottenere un elenco dei budget rimanenti e di conoscere 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() ti consente di richiedere il budget per un'operazione specifica e
restituirà 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 un budget per un'operazione "push silenziosa" e, se reserve() restituisce true, l'operazione è consentita. In caso contrario, verrà restituito 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, "silent-push" è 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 le finalità di test o debug una volta utilizzato, ma come soluzione alternativa temporanea puoi creare un nuovo profilo in Chrome. Purtroppo non puoi utilizzare la modalità di navigazione in incognito, poiché l'API Budget restituisce un budget pari a zero in modalità di navigazione in incognito (sebbene sia presente un bug che restituisce un errore durante i test).
Devi chiamare reserve() solo se intendi eseguire l'operazione che stai
prenotando in futuro. Tieni presente che se hai chiamato la prenotazione nell'esempio precedente, ma hai comunque visualizzato 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 invisibile all'utente 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 sono attualmente disponibili solo dietro flag e / o una prova dell'origine.
API Budget e prove dell'origine
Esistono due metodi, getBudget() e getCost(), che possono essere utilizzati da un'app web
per pianificare l'utilizzo del budget.
In Chrome 60, entrambi i metodi sono disponibili se ti registri alla prova dell'origine, ma per i test puoi usarli localmente attivando il flag delle funzionalità sperimentali della piattaforma web (apri chrome://flags/#enable-experimental-web-platform-features in Chrome).
Vediamo come utilizzare queste API.
Ottieni il tuo budget
Puoi trovare il budget disponibile con il metodo getBudget(). Alcuni browser, ad esempio Chrome, presentano un "decadimento" del budget nel tempo. Pertanto, per garantire una visibilità completa, viene restituito un array di BudgetStates, che indica lo stato del budget nei vari momenti futuri.
Per elencare le voci di budget, possiamo pubblicare:
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 indicheranno l'importo del budget in 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 di future quote di budget è che gli sviluppatori possono condividere queste informazioni con il backend per adattare il comportamento lato server (ovvero inviare un messaggio push solo per attivare un aggiornamento quando il client dispone di un budget per un push invisibile all'utente).
Calcolare il costo di un'operazione
Per scoprire il costo di un'operazione, la chiamata a getCost() restituirà un numero che indica l'importo massimo che verrà consumato se chiami reserve() per quell'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 scrittura di questo articolo, Chrome 60 stamperà:
Cost of silent push is: 2
Una cosa 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 riuscire a prenotare un'operazione se il tuo budget attuale è inferiore al costo indicato. I dettagli specifici delle specifiche sono di seguito:
Si tratta dell'API attuale in Chrome e, poiché il web continua a supportare nuove API che richiedono la possibilità di eseguire operazioni in background, ad esempio 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 un feedback sul repository GitHub o segnala i bug di Chrome all'indirizzo crbug.com.