Comment faire pour ajouter à l'écran d'accueil Pop up sur le site Ouvrir dans le navigateur mobile

Comment faire pour ajouter à l'écran d'accueil Pop up sur le site Ouvrir dans le navigateur mobile

Comment obtenir ce pop up dans le navigateur mobile
"Ajouter à la maison" va créer une icône de google chrome sur l'écran d'accueil du mobile avec un lien de site sur mobile.

S'il vous plaît suggérer la solution.

source d'informationauteur Niral Bhavsar

  1. 6

    Les exigences officielles sont:

    Chrome affiche automatiquement la bannière lorsque votre application répond aux critères suivants:

    • A un web du manifeste de l'application fichier avec:
      • un short_name (utilisé sur l'écran d'accueil)
      • un nom (utilisé dans la bannière)
      • un 144x144 png icône (l'icône déclarations doivent inclure un type mime image/png)
      • un start_url que les charges
    • A un travailleur des services inscrit sur votre site.
    • Est servi sur HTTPS (une exigence pour l'utilisation de travailleur des services).
    • Est visité au moins deux fois, avec au moins cinq minutes entre les visites.

    source: https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/

    Vous pouvez ignorer ces exigences à l'essai ou à des fins de débogage en permettant un chrome drapeau:

    chrome://flags/#bypass-app-bannière-engagement-vérifie

    Comment faire pour ajouter à l'écran d'accueil Pop up sur le site Ouvrir dans le navigateur mobile

  2. 2

    Vous devez avoir les éléments suivants à afficher un fichier manifeste.

    1. Vous devriez avoir une web app fichier manifeste:

      1. short_name - son utilisée sur l'écran d'accueil juste en dessous de l'icône.
      2. nom - nom complet de votre application
      3. icône - logo/icône d'au moins 192x192 png icône (l'icône déclarations doivent inclure un type mime image/png)
      4. start_url - la page à charger lorsque l'application s'ouvre

    2. Vous devriez avoir un service de travailleur inscrit sur votre site.

    3. Assurez-vous que votre site est desservi par le protocole HTTPS (une exigence pour l'utilisation de travailleur des services).

    4. Et doit répondre aux navigateurs de site engagement heuristique.

    Vous pouvez maintenant acquérir cette même fenêtre, et de décider quand vous wnat montrer

    window.addEventListener("beforeinstallprompt", ev => { 
  //Stop Chrome from asking _now_
  ev.preventDefault();

  //Create your custom "add to home screen" button here if needed.
  //Keep in mind that this event may be called multiple times, 
  //so avoid creating multiple buttons!
  myCustomButton.onclick = () => ev.prompt();
});

    Regarder beforeinstallprompt événementce qui vous permet d'intercepter et de les mettre en attente.

    Cet événement a une méthode appelée .prompt()qui permet de faire le pop-up apparaît.

  3. 1

    Dans votre service de travailleur fichier js ont cette seule ligne.

    self.addEventListener('fetch', function(event) {});