Met de Push Messaging API kunnen we meldingen naar een gebruiker sturen, zelfs als de browser gesloten is. Veel ontwikkelaars willen deze berichten kunnen gebruiken om inhoud bij te werken en te synchroniseren zonder dat de browser geopend is, maar de API heeft één belangrijke beperking: je moet altijd een melding weergeven voor elk ontvangen pushbericht.
Het kunnen verzenden van een pushbericht om gegevens op het apparaat van een gebruiker te synchroniseren of een melding te verbergen die u eerder had getoond, kan uiterst nuttig zijn voor gebruikers en ontwikkelaars, maar het toestaan van een webapp om op de achtergrond te werken zonder dat de gebruiker het weet, is vatbaar voor misbruik .
De Budget API is een nieuwe API die is ontworpen om ontwikkelaars in staat te stellen beperkt achtergrondwerk uit te voeren zonder de gebruiker hiervan op de hoogte te stellen, zoals een stille push of het uitvoeren van een ophaalactie op de achtergrond. In Chrome 60 en hoger kun je deze API gaan gebruiken en het Chrome-team wil graag feedback van ontwikkelaars.
Om ontwikkelaars in staat te stellen de bronnen van een gebruiker op de achtergrond te gebruiken, introduceert het webplatform het concept van een budget met behulp van de nieuwe Budget API. Elke site krijgt een hoeveelheid middelen toegekend op basis van gebruikersbetrokkenheid die ze kunnen gebruiken voor achtergrondacties, zoals een stille push, waarbij elke operatie het budget zal uitputten. Wanneer het budget is uitgegeven, kunnen achtergrondacties niet langer worden uitgevoerd zonder zichtbaarheid van de gebruiker. De user-agent is verantwoordelijk voor het bepalen van het budget dat aan een web-app is toegewezen op basis van de heuristieken ervan. Het budget kan bijvoorbeeld worden gekoppeld aan gebruikersbetrokkenheid. Elke browser kan zijn eigen heuristiek bepalen.
TL;DR Met de Budget API kunt u budget reserveren, budget gebruiken, een lijst met het resterende budget krijgen en inzicht krijgen in de kosten van achtergrondbewerkingen
Budget reserveren
In Chrome 60 en hoger is de methode navigator.budget.reserve() beschikbaar zonder vlaggen.
Met de methode reserve() kunt u budget aanvragen voor een specifieke bewerking en wordt een Booleaanse waarde geretourneerd om aan te geven of het budget kan worden gereserveerd. Als het budget gereserveerd is, hoeft u de gebruiker niet op de hoogte te stellen van uw achtergrondwerk.
In het voorbeeld van pushmeldingen kunt u proberen budget te reserveren voor een 'silent-push'-bewerking. Als reserve() met true wordt opgelost, is de bewerking toegestaan. Anders retourneert het false en moet u een melding weergeven
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 is 'silent-push' het enige bewerkingstype dat beschikbaar is, maar je kunt een volledige lijst met bewerkingstypen vinden in de specificatie . Er is ook geen eenvoudige manier om uw budget voor test- of foutopsporingsdoeleinden te verhogen zodra het eenmaal is gebruikt, maar als tijdelijke oplossing kunt u een nieuw profiel maken in Chrome. Helaas kun je hiervoor ook niet incognito gebruiken, omdat de Budget API in Incognito een budget van nul retourneert (hoewel er een bug is die resulteert in een fout tijdens mijn tests).
U dient reserve() alleen aan te roepen als u van plan bent de bewerking die u reserveert op een bepaald moment in de toekomst uit te voeren. Let op: als u in het bovenstaande voorbeeld reserve heeft gebeld maar nog steeds een melding laat zien, wordt het budget nog steeds gebruikt.
Een veelvoorkomend gebruiksscenario dat niet alleen door reserve() mogelijk wordt gemaakt, is de mogelijkheid om een stille push vanaf een backend te plannen. De Budget API beschikt wel over API's om deze use case mogelijk te maken, maar daar wordt nog aan gewerkt in Chrome en zijn momenteel alleen beschikbaar achter vlaggen en/of een Origin Trial .
Budget API en Origin-proefversies
Er zijn twee methoden, getBudget() en getCost() , die door een webapp kunnen worden gebruikt om het gebruik van hun budget te plannen.
In Chrome 60 zijn beide methoden beschikbaar als u zich aanmeldt voor de origin-proefversie , maar voor tests kunt u ze lokaal gebruiken door de functievlag van het Experimental Web Platform in te schakelen (Open chrome://flags/#enable-experimental-web- platformfuncties in Chrome).
Laten we eens kijken hoe we deze API's kunnen gebruiken.
Ontvang uw begroting
U kunt uw beschikbare budget vinden met de getBudget() -methode. Bij sommige browsers (zoals Chrome) zal het budget na verloop van tijd 'vervallen'. Om u volledige zichtbaarheid te geven, retourneert dit een reeks BudgetStates , die aangeven wat uw budget op verschillende tijdstippen in de toekomst zal zijn.
Om de budgetposten weer te geven, kunnen we het volgende uitvoeren:
navigator.budget.getBudget()
.then((budgets) => {
budgets.forEach((element) => {
console.log(\`At '${new Date(element.time).toString()}' \` +
\`your budget will be '${element.budgetAt}'.\`);
});
});
De eerste invoer is uw huidige budget en aanvullende waarden laten zien wat uw budget op verschillende tijdstippen in de toekomst zal zijn.
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'.
Een van de voordelen van het opnemen van toekomstige budgetlimieten is dat ontwikkelaars deze informatie kunnen delen met hun backend om hun gedrag aan de serverzijde aan te passen (dwz alleen een pushbericht sturen om een update te activeren wanneer de client budget heeft voor een stille push).
Bereken de kosten van een operatie
Om erachter te komen hoeveel een bewerking gaat kosten, retourneert het aanroepen van getCost() een getal dat het maximale budgetbedrag aangeeft dat zal worden verbruikt als u reserve() voor die bewerking aanroept.
We kunnen bijvoorbeeld de kosten achterhalen van het niet tonen van een melding wanneer u een pushbericht ontvangt (dwz de kosten van een stille push), met de volgende code:
navigator.budget.getCost('silent-push')
.then((cost) => {
console.log('Cost of silent push is:', cost);
})
.catch((err) => {
console.error('Unable to get cost:', err);
});
Op het moment van schrijven drukt Chrome 60 het volgende af:
Cost of silent push is: 2
Eén ding om te benadrukken met de methoden reserve() en getCost() is dat de werkelijke kosten van een bewerking lager kunnen zijn dan de kosten die worden geretourneerd door getCost() . Mogelijk kunt u nog steeds een operatie reserveren als uw huidige budget lager is dan de aangegeven kosten. De specifieke details uit de specificatie zijn als volgt :
Dat is de huidige API in Chrome en omdat het web nieuwe API's blijft ondersteunen die de mogelijkheid vereisen om achtergrondwerk uit te voeren, zoals background fetch , kan de Budget API worden gebruikt om het aantal bewerkingen te beheren dat u kunt uitvoeren zonder de gebruiker hiervan op de hoogte te stellen.
Geef tijdens het gebruik van de API feedback op de GitHub Repo of dien Chrome-bugs in op crbug.com .