web-dev-qa-db-fra.com

Comment obtenir Ajouter à l'écran d'accueil Pop-up sur le site Ouvrir dans un navigateur mobile

 How to get this pop up in mobile browser . when we click to Add to home Chrome icon generate on Home screen of mobile

Comment obtenir cela dans un navigateur mobile "Ajouter à la maison" créera l'icône du chrome sur l'écran d'accueil du mobile avec un lien de site sur le mobile.

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

androidgoogle-chromeprogressive-web-apps
19
Niral Bhavsar

Les exigences officielles sont:

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

  • A un manifeste d'application web fichier avec:
    • un nom court (utilisé sur l'écran d'accueil)
    • un nom (utilisé dans la bannière)
    • une icône png 144x144 (les déclarations d'icônes doivent inclure un type mime d'image/png)
    • un start_url qui charge
  • Est-ce qu'un ouvrier de service inscrit sur votre site.
  • Est servi sur HTTPS (condition requise pour utiliser le service worker).
  • 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 à des fins de test ou de débogage en activant un indicateur chromé:

chrome: // flags/# bypass-app-banner-engagement-checks

 chrome flag bypass user engagement checks

9
Lukasz Wiktor

Vous devez disposer des éléments suivants pour afficher un fichier manifeste.

  1. Vous devriez avoir un fichier manifeste d'application Web avec: 

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

  2. Vous devriez avoir un technicien inscrit sur votre site.

  3. Assurez-vous que votre site est desservi via HTTPS (condition requise pour utiliser le service worker).

  4. Et il devrait rencontrer l'heuristique d'engagement de sites de navigateurs.

Maintenant, vous pouvez capturer ce popup et décider quand vous voulez le 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();
});

Regardez beforeinstallprompt event , que vous pouvez intercepter et mettre en attente.

Cet événement a une méthode appelée .Prompt() , qui vous permet de faire apparaître le popup à volonté.

6
aWebDeveloper

J'ai trouvé cet article détaillé sur Medium. Comment ajouter «Ajouter à l'écran d'accueil» dans une application Web

Étape 1: Créez un fichier service-worker.js vide dans votre dossier racine. Et mettez le code ci-dessous dans votre page html, avant de fermer la balise.

<script>
 if ('serviceWorker' in navigator) {
    console.log("Will the service worker register?");
    navigator.serviceWorker.register('service-worker.js')
      .then(function(reg){
        console.log("Yes, it did.");
     }).catch(function(err) {
        console.log("No it didn't. This happened:", err)
    });
 }
</script>

Étape 2: Créez le fichier manifeste Créez le fichier manifest.json dans le dossier racine. Ajoutez la balise ci-dessous dans la section d’en-tête de votre page HTML.

<link rel="manifest" href="/manifest.json">

Étape 3: Ajoutez les configurations dans le fichier manifesteVoici l'exemple de configuration.

{
  "short_name": "BetaPage",
  "name": "BetaPage",
  "theme_color": "#4A90E2",
  "background_color": "#F7F8F9",
  "display": "standalone",
  "icons": [
    {
      "src": "assets/icons/launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "assets/icons/launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "assets/icons/launcher-icon-3x.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "assets/icons/launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/?utm_source=launcher"
}

Dans le code ci-dessus, vous pouvez remplacer vos propres valeurs.

short_name: ce nom est visible sur l'écran d'accueil le long de l'icône de l'application.

icons: permet de définir différentes icônes de taille pour différentes tailles d'écran

theme_color: Ce code couleur modifiera la couleur de l'adresse en chrome.

background_color: Définit la couleur d'arrière-plan pour l'écran de démarrage.

name: nom complet de l'application.

Vous pouvez valider votre manifeste ici à https://manifest-validator.appspot.com

3
NitinKumar

Dans votre fichier service worker, js n'a cette ligne.

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