Sinds we de banner voor het toevoegen aan het startscherm voor het eerst hebben gelanceerd, hebben we gewerkt aan het duidelijker labelen van Progressive Web Apps en het vereenvoudigen van de manier waarop gebruikers deze kunnen installeren. Ons uiteindelijke doel is om op alle platforms een installatieknop in de omnibox aan te bieden, en in Chrome 68 brengen we wijzigingen aan om dat doel te bereiken.
Wat verandert er?
Vanaf Chrome 68 op Android (stabiel in juli 2018) toont Chrome niet langer de banner voor toevoegen aan het startscherm. Als de site voldoet aan de criteria voor toevoegen aan het startscherm , toont Chrome de mini-infobalk. Als de gebruiker vervolgens op de mini-infobalk klikt, of als u prompt() aanroept voor de beforeinstallprompt -gebeurtenis vanuit een gebruikersgebaar, toont Chrome een modaal dialoogvenster voor toevoegen aan het startscherm.
A2HS banner Chroom 67 en eerder
Wordt automatisch weergegeven wanneer de site voldoet aan de criteria voor toevoegen aan het startscherm en de site preventDefault() niet aanroept bij de beforeinstallprompt -gebeurtenis
OF
Getoond door prompt() aan te roepen bij de beforeinstallprompt -gebeurtenis.
Mini-infobar Chrome 68 en hoger
Als het bericht door een gebruiker wordt afgewezen, wordt het pas weergegeven als er voldoende tijd (~3 maanden) is verstreken.
Wordt weergegeven ongeacht of preventDefault() is aangeroepen voor de beforeinstallprompt -gebeurtenis.
Deze UI-behandeling wordt verwijderd in een toekomstige versie van Chrome wanneer de omnibox-installatieknop wordt geïntroduceerd.
A2HS-dialoog
Getoond door prompt() aan te roepen vanuit een gebruikersgebaar op de beforeinstallprompt gebeurtenis in Chrome 68 en hoger.
OF
Wordt weergegeven wanneer een gebruiker op de mini-infobalk tikt in Chrome 68 en hoger.
OF
Wordt weergegeven nadat de gebruiker in alle Chrome-versies op 'Toevoegen aan startscherm' klikt in het Chrome-menu.
De mini-infobar
De mini-infobalk is een Chrome UI-component en kan niet door de site worden beheerd, maar kan gemakkelijk door de gebruiker worden verwijderd. Eenmaal door de gebruiker verwijderd, zal het niet opnieuw verschijnen totdat er voldoende tijd is verstreken (momenteel 3 maanden). De mini-infobalk verschijnt wanneer de site voldoet aan de criteria voor toevoegen aan het startscherm , ongeacht of u preventDefault() op de beforeinstallprompt -gebeurtenis gebruikt of niet.
In plaats van de gebruiker te vragen bij het laden van de pagina (een antipatroon voor toestemmingsverzoeken ), kunt u aangeven dat uw app kan worden geïnstalleerd met een bepaalde gebruikersinterface, die vervolgens de modale installatieprompt toont. Deze desktop-PWA voegt bijvoorbeeld een knop 'App installeren' toe net boven de profielnaam van de gebruiker.
Als u via een gebruikersgebaar vraagt om uw app te installeren, voelt dit voor de gebruiker minder spamachtig aan en vergroot de kans dat hij of zij op 'Toevoegen' klikt in plaats van op 'Annuleren'. Als u een installatieknop in uw app opneemt, betekent dit dat zelfs als de gebruiker ervoor kiest uw app vandaag niet te installeren, de knop er morgen nog steeds is, of wanneer hij of zij klaar is om te installeren.
Luisteren naar de beforeinstallprompt -gebeurtenis
Als uw site voldoet aan de criteria voor toevoegen aan startscherm , activeert Chrome een gebeurtenis beforeinstallprompt , slaat een verwijzing naar de gebeurtenis op en werkt uw gebruikersinterface bij om aan te geven dat de gebruiker uw app aan zijn startscherm kan toevoegen.
let installPromptEvent;
window.addEventListener('beforeinstallprompt', event => {
// Prevent Chrome <= 67 from automatically showing the prompt
event.preventDefault();
// Stash the event so it can be triggered later.
installPromptEvent = event;
// Update the install UI to notify the user app can be installed
document.querySelector('#install-button').disabled = false;
});
De gebeurtenis beforeinstallprompt wordt niet geactiveerd als de app al is geïnstalleerd (zie de criteria voor toevoegen aan startscherm ). Maar als de gebruiker de app later verwijdert, wordt de gebeurtenis beforeinstallprompt opnieuw geactiveerd bij elke paginanavigatie.
Het dialoogvenster tonen met prompt()
Om het dialoogvenster 'Toevoegen aan startscherm' weer te geven, roept u prompt() op voor de opgeslagen gebeurtenis vanuit een gebruikersgebaar. Chrome toont het modale dialoogvenster waarin de gebruiker wordt gevraagd uw app aan zijn startscherm toe te voegen. Luister vervolgens naar de belofte die wordt geretourneerd door de eigenschap userChoice van de gebeurtenis beforeinstallprompt . De belofte retourneert een object met een outcome nadat de prompt is weergegeven en de gebruiker erop heeft gereageerd.
btnInstall.addEventListener('click', () => {
// Update the install UI to remove the install button
document.querySelector('#install-button').disabled = true;
// Show the modal add to home screen dialog
installPromptEvent.prompt();
// Wait for the user to respond to the prompt
installPromptEvent.userChoice.then(choice => {
if (choice.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
// Clear the saved prompt since it can't be used again
installPromptEvent = null;
});
});
U kunt prompt() slechts één keer aanroepen voor de uitgestelde gebeurtenis. Als de gebruiker in het dialoogvenster op Annuleren klikt, moet u wachten tot de gebeurtenis beforeinstallprompt wordt geactiveerd bij de navigatie op de volgende pagina. In tegenstelling tot traditionele toestemmingsverzoeken blokkeert het klikken op Annuleren toekomstige aanroepen van prompt() niet, omdat de aanroep binnen een gebruikersgebaar moet worden aangeroepen.
Aanvullende bronnen
Bekijk app-installatiebanners voor meer informatie, waaronder:
- Details over de
beforeinstallprompt-gebeurtenis - Het volgen van de reactie van de gebruiker op de prompt voor het toevoegen van een startscherm
- Bijhouden of de app is geïnstalleerd
- Bepalen of uw app wordt uitgevoerd als een geïnstalleerde app