web-dev-qa-db-fra.com

PWA: comment redéclencher avant l'installation

Notre site utilise PWA pour que le visiteur puisse choisir d'ajouter à l'écran d'accueil (A2HS). Cependant, à partir des données de Google Analytics, le taux de rejet est trop élevé par rapport au taux d'acceptation.

Nous prévoyons de rendre l'interface utilisateur plus intuitive et plus claire pour améliorer le taux d'acceptation. Cependant, nous voulons également faire revivre les visiteurs qui ont déjà rejeté la boîte de dialogue A2HS.

Comment faire Dans la mesure de mes connaissances, nous ne pouvons ajouter que beforeinstallprompt écouteur mais il n'y a pas de méthode openinstallprompt.

google-chromeservice-workerprogressive-web-apps
9
Pahlevi Fikri Auliya

Non, vous ne pouvez pas déclencher la bannière d'installation et son piloté par les navigateurs. Si votre site répond à tous les critères PWA et si l'utilisateur visite suffisamment fréquemment (la fréquence n'est pas explicitement indiquée par les fournisseurs de navigateur), les navigateurs afficheront à nouveau l'invite. Nous ne pouvons pas déclencher la même chose avec notre code. Référez-vous à cette réponse pourquoi il se comporte de cette façon et quelle est la solution alternative.

7
Anand

Pour des raisons de sécurité, comme d'autres l'ont également écrit, les navigateurs ne vous permettent pas de déclencher manuellement l'événement d'installation.

Cependant, il existe un moyen de le tester vous-même. Accédez à chrome: // flags et activez "Contourner les vérifications de l'engagement des utilisateurs"

Cela lancera l'invite afin que vous puissiez tester.

À votre santé

6
Spock

La réponse d'Anand est correcte pour l'instant. Mais à partir de Chrome 68, Chrome n'affichera pas automatiquement l'invite A2HS. Vous devrez dire explicitement Chrome pour déclencher) l'invite.

enter image description here

Selon la documentation de Google, voici l'extrait de code pour gérer l'invite;

Écoutez le beforeinstallprompt

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the Prompt
  e.preventDefault();
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
});

Insérez le code suivant dans un écouteur qui déclenchera l'invite

// Show the Prompt
deferredPrompt.Prompt();
// Wait for the user to respond to the Prompt
deferredPrompt.userChoice
.then((choiceResult) => {
  if (choiceResult.outcome === 'accepted') {
    console.log('User accepted the A2HS Prompt');
  } else {
    console.log('User dismissed the A2HS Prompt');
  }
  deferredPrompt = null;
});

Reportez-vous à ce lien pour plus d'informations.

4
oninross