Sinds we de banner 'Toevoegen aan startscherm' voor het eerst lanceerden, hebben we gewerkt aan het duidelijker labelen van Progressive Web Apps en het vereenvoudigen van de manier waarop gebruikers ze kunnen installeren. Ons uiteindelijke doel is om op alle platforms een installatieknop in de omnibox te hebben, 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 de banner 'Toevoegen aan startscherm' niet meer. Als de site voldoet aan de criteria voor 'Toevoegen aan startscherm' , toont Chrome de mini-infobalk. Als de gebruiker vervolgens op de mini-infobalk klikt, of als u prompt() aanroept bij de beforeinstallprompt -gebeurtenis vanuit een gebruikersgebaar, toont Chrome een modaal dialoogvenster 'Toevoegen aan startscherm'.
A2HS banner Chrome 67 en eerder
Wordt automatisch weergegeven wanneer de site voldoet aan de criteria voor toevoegen aan het startscherm en de site geen preventDefault() aanroept bij de beforeinstallprompt -gebeurtenis
OF
Wordt weergegeven door prompt() aan te roepen bij de beforeinstallprompt gebeurtenis.
Mini-infobalk Chrome 68 en later
Als de gebruiker deze negeert, wordt deze pas na een bepaalde tijd (ongeveer 3 maanden) weergegeven.
Wordt weergegeven ongeacht of preventDefault() is aangeroepen bij de beforeinstallprompt gebeurtenis.
Deze UI-behandeling wordt verwijderd in een toekomstige versie van Chrome wanneer de omnibox-installatieknop wordt geïntroduceerd.
A2HS-dialoog
Wordt weergegeven door prompt() aan te roepen vanuit een gebruikersgebaar op de beforeinstallprompt gebeurtenis in Chrome 68 en later.
OF
Wordt weergegeven wanneer een gebruiker op de mini-infobalk tikt in Chrome 68 en later.
OF
Wordt weergegeven nadat de gebruiker op 'Toevoegen aan startscherm' klikt in het Chrome-menu in alle Chrome-versies.
De mini-infobalk
De mini-infobalk is een onderdeel van de Chrome-gebruikersinterface en kan niet door de site worden beheerd, maar kan eenvoudig door de gebruiker worden gesloten. Nadat de gebruiker de balk heeft gesloten, wordt deze pas weer weergegeven nadat er voldoende tijd is verstreken (momenteel 3 maanden). De mini-infobalk verschijnt wanneer de site voldoet aan de criteria voor toevoegen aan startscherm , ongeacht of u preventDefault() gebruikt bij de beforeinstallprompt -gebeurtenis.
In plaats van de gebruiker te vragen om toestemming bij het laden van de pagina (een antipatroon voor toestemmingsverzoeken ), kunt u aangeven dat uw app met een bepaalde gebruikersinterface geïnstalleerd kan worden, waarna de modale installatieprompt wordt weergegeven. Deze desktop-PWA voegt bijvoorbeeld een knop 'App installeren' toe net boven de profielnaam van de gebruiker.
Als de gebruiker wordt gevraagd je app te installeren met een gebaar, voelt dat minder spamachtig aan en vergroot het de kans dat hij op 'Toevoegen' klikt in plaats van op 'Annuleren'. Door een installatieknop in je app te integreren, blijft de knop er morgen nog steeds, of wanneer hij er klaar voor is om te installeren, zelfs als de gebruiker ervoor kiest je app vandaag niet te installeren.
Luisteren naar de beforeinstallprompt -gebeurtenis
Als uw site voldoet aan de criteria voor toevoegen aan startscherm , activeert Chrome de beforeinstallprompt -gebeurtenis, wordt er een verwijzing naar de gebeurtenis opgeslagen en wordt uw gebruikersinterface bijgewerkt om aan te geven dat de gebruiker uw app aan het 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 ). Als de gebruiker de app echter later verwijdert, wordt de gebeurtenis beforeinstallprompt opnieuw geactiveerd bij elke paginanavigatie.
Het dialoogvenster weergeven met prompt()
Om het dialoogvenster 'Toevoegen aan startscherm' weer te geven, roept u prompt() aan op de opgeslagen gebeurtenis vanuit een gebruikersgebaar. Chrome toont het modale dialoogvenster, waarin de gebruiker wordt gevraagd uw app aan het 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 eigenschap 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 op Annuleren klikt in het dialoogvenster, moet u wachten tot de beforeinstallprompt -gebeurtenis wordt geactiveerd bij de volgende paginanavigatie. In tegenstelling tot traditionele toestemmingsverzoeken blokkeert het klikken op Annuleren geen toekomstige aanroepen van prompt() omdat deze 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 om het startscherm toe te voegen
- Bijhouden of de app is geïnstalleerd
- Bepalen of uw app als geïnstalleerde app wordt uitgevoerd