Wie kommt man zu Home-Bildschirm hinzufügen vor Ort öffnet Pop Up in mobilem Browser

Question

Wie dies in mobilem Browser Pop-up bekommen „zu Hause hinzufügen“ wird mit Site-Symbol Chrom auf Home-Bildschirm der mobilen erstellen Link auf Handy.

Bitte schlagen Sie die Lösung vor.

Answer 1

Offizielle Anforderungen sind:

Chrome automatisch das Banner angezeigt wird, wenn Ihre Anwendung die folgenden Kriterien erfüllt:

• Hat eine web app manifest Datei mit:
  • einem short_name (auf die verwendete Startbildschirm)
  • ein Name (im Banner verwendet)
  • ein 144x144 PNG-Symbol (das Symbol Erklärungen müssen einen MIME-Typ image/jpeg enthalten)
  • eine START_URL die
• Hat ein service worker registriert auf Ihrer Website lädt.
• Wird über HTTPS bedient (Voraussetzung für die Verwendung von Service Worker).
• Wird mindestens zweimal besucht, mit mindestens fünf Minuten zwischen den Besuchen.

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

Sie diese Anforderungen zum Testen oder Debuggen überspringen kann einen Chrom-Flag durch Aktivierung:

chrome: // flags/# Bypass-App-Banner -engagement-Kontrollen

Answer 2

Ich fand diesen detaillierten Artikel auf Medium. How to add “Add to Homescreen” popup in web app

Schritt 1: erstellen Sie eine leere Service-worker.js Datei in Ihrem Stammordner. Und setzen Sie den folgenden Code in Ihre HTML-Seite, bevor Sie das Tag schließen.

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

Schritt 2: Erstellen Manifest-Datei manifest.json Datei im Stammordner erstellen. Fügen Sie unter Tag in Ihrem HTML-Seite Header-Abschnitt

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

Schritt 3: Fügen Sie Konfigurationen in Manifest-Datei Hier ist die Konfigurationen Proben.

{ 
 
    "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" 
 
}

In obigen Code können Sie Ihre eigenen Werte ersetzen.

short_name: Dieser Name ist auf der Startseite neben App-Symbol sichtbar.

Symbole: Set unterschiedliche Größe Symbole für verschiedene Bildschirmgrößen

theme_color: Dieser Farbcode der Farbe addresser in Chrom ändern wird.

background_color: Hintergrundfarbe für Begrüßungsbildschirm festlegen. Name: Vollständiger Name der Anwendung

Sie können Ihr Manifest hier https://manifest-validator.appspot.com/

Answer 3

Sie müssen bestätigen Folgendes zeigen eine Manifest-Datei haben.

1. Sie sollten mit einer Web-App-Manifest-Datei:

   1. short_name - sein auf dem Home-Bildschirm direkt unter dem Symbol verwendet.
   2. Name - vollständiger Name der App
   3. icon - Logo/Symbol von mindestens 192x192 PNG-Symbol (das Symbol Erklärungen müssen einen MIME-Typ image/jpeg enthalten)
   4. START_URL - die Seite, die geladen werden soll, wenn die App geöffnet wird

2. Sie sollten einen Service-Mitarbeiter auf Ihrer Website registriert haben.

3. Stellen Sie sicher, dass Ihre Website über HTTPS bedient wird (Voraussetzung für die Verwendung von Service Worker).

4. Und es sollte die Browser-Website Engagement Heuristik erfüllen.

Jetzt können Sie dieses Popup erfassen und entscheiden, wann Sie es

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(); 
}); 

Blick auf beforeinstallprompt event zeigen wnat, die Sie abfangen und zurückhalten können.

Dieses Ereignis hat eine Methode namens .prompt(), mit der Sie das Popup nach Belieben anzeigen können.