web-dev-qa-db-fra.com

PWA - beforeinstallprompt non appelé

Bonjour, j'essaie d'installer un PWA personnalisé "Ajouter à l'écran d'accueil".

L'enregistrement ServiceWorker est réussi.

Mais la fonction beforeinstallpromp n'appelle pas après s'inscrire.

<script type="text/javascript">

  function request_debug(paramdata){

    document.getElementById('output').innerHTML += '<BR>'+ paramdata;

  }

  window.addEventListener('load', function() {

      document.getElementById('output').style.display = "block"; 

      if('serviceWorker' in navigator) {

      navigator.serviceWorker.register('sw.js').then(function(registration) {
        console.log('Service worker  registrado com sucesso:', registration);
        request_debug(registration);

      }).catch(function(error) {
        console.log('Falha ao Registrar o Service Worker:', error);
        request_debug(error);

      });

          var isTooSoon = true;
          window.addEventListener('beforeinstallprompt', function(e) {

              //e.preventDefault();
              //e.Prompt();
              //promptEvent = e;
              request_debug(' window.addEventListener beforeinstallprompt fired!')

              if (isTooSoon) {
                //e.preventDefault(); // Prevents Prompt display
                // Prompt later instead:
                setTimeout(function() {
                  isTooSoon = false;
                  e.Prompt(); // Throws if called more than once or default not prevented
                }, 4000);
              }

          });

    }else{

      console.log('serviceWorker not in navigator');
      request_debug('serviceWorker not in navigator');

    }


  });

</script>

De plus, mon agent de service dans le répertoire racine ... HTTPS est sécurisé!

mon manifeste:

{
  "background_color": "purple",
  "description": "lojaportaldotricot TESTE",
  "display": "standalone",
  "icons": [
    {
      "src": "/componentes/serviceWorker/fox-icon.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "name": "lojaportaldotricot",
  "short_name": "lojaportaldotricot",
  "start_url": "/dashboard"
}

Cela ne fonctionne que lorsque je définis "Enable" chrome: // flags/# bypass-app-banner-engagement-checks

Edit: On dirait que j'ai trouvé le problème. Les onglets Audits de l'outil de développement de Chrome (F12) fournissent des informations sur le débogage .  enter image description here

progressive-web-apps
4
sealabr

Essaye ça : 

 <script>
    let deferredPrompt;

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

    // Installation must be done by a user gesture! Here, the button click
    btnAdd.addEventListener('click', (e) => {
      // hide our user interface that shows our A2HS button
      btnAdd.style.display = 'none';
      // 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;
        });
    });

    </script>

beforeinstallprompt ne sera déclenché que si certaines conditions sont remplies:

  • Le PWA ne doit pas déjà être installé
  • Conforme à une heuristique d'engagement de l'utilisateur (l'utilisateur doit avoir une interaction d'au moins 30 secondes avec votre application Web.
  • Votre application Web doit inclure un manifeste d'application Web.
  • Votre application Web doit être servie via une connexion HTTPS sécurisée.
  • A inscrit un travailleur de service avec un gestionnaire d'événements fetch.
6
Sreelal TS

Incluez-vous le fichier manifeste dans l'en-tête de la page?

<link rel="manifest" href="/manifest.json">
2
Adam Griffith

Oui, "start_url" est incorrect dans le manifeste.

SI UNE PARTIE DU MANIFESTE IS CASSÉ 'beforeinstallprompt' n'est pas déclenchée.

L'événement n'est pas déclenché parce que ... le manifeste start_url est incorrect.

Ma façon préférée de comprendre cela est de regarder dans l'onglet> RÉSEAU de DevTools for 404's.

ET l’autre façon de voir pourquoi manifeste est cassé, c’est d’exécuter> AUDIT dans DevTools et de voir l’erreur. Comme ce que @sealabr a trouvé:

"Échecs: le technicien de service ne sert pas avec succès l'adresse start_url du manifeste, Délai d'attente pour l'attente start_url. Ce qui signifie le 'start_url "

Ce fil était une aide précieuse pour le dépannage de la production. Merci.

0
Jack Stone