Wijzigingen om toe te voegen aan het gedrag van het startscherm,Wijzigingen om toe te voegen aan het gedrag van het startscherm

Sinds we de banner voor het toevoegen aan het startscherm voor het eerst hebben gelanceerd, hebben we eraan gewerkt om Progressive Web Apps duidelijker te labelen en de manier te vereenvoudigen 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.

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 gesloten. 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.

De mini-infobalk is een tijdelijke ervaring voor Chrome op Android terwijl we werken aan het creëren van een consistente ervaring op alle platforms, inclusief een installatieknop in de omnibox. ## Activeert het dialoogvenster Toevoegen aan startscherm

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 dat minder spam voor de gebruiker 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

,

Sinds we de banner voor het toevoegen aan het startscherm voor het eerst hebben gelanceerd, hebben we eraan gewerkt om Progressive Web Apps duidelijker te labelen en de manier te vereenvoudigen 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.

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. Nadat de gebruiker het heeft verwijderd, verschijnt het pas weer nadat 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.

De mini-infobalk is een tijdelijke ervaring voor Chrome op Android terwijl we werken aan het creëren van een consistente ervaring op alle platforms, inclusief een installatieknop in de omnibox. ## Activeert het dialoogvenster Toevoegen aan startscherm

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 dat minder spam voor de gebruiker 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 op Annuleren klikt in het dialoogvenster, 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