web-dev-qa-db-de.com

Hinzufügen zum Startbildschirm Pop-up auf Site In mobilem Browser öffnen

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

So rufen Sie dieses Popup im mobilen Browser auf "Zu Hause hinzufügen" erstellt ein Chrom-Symbol auf dem Startbildschirm des Mobiltelefons mit einem Standortlink auf dem Mobiltelefon.

Bitte schlagen Sie die Lösung vor.

19
Niral Bhavsar

Offizielle Anforderungen sind:

Chrome zeigt das Banner automatisch an, wenn Ihre App die folgenden Kriterien erfüllt:

  • Verfügt über eine Webanwendungsmanifest -Datei mit:
    • ein Kurzname (wird auf dem Startbildschirm verwendet)
    • ein Name (im Banner verwendet)
    • ein 144 x 144 png-Symbol (die Symboldeklarationen müssen einen Mime-Typ von image/png enthalten)
    • ein start_url das lädt
  • Hat ein Service Worker auf Ihrer Site registriert.
  • Wird über HTTPS geliefert (eine Voraussetzung für die Verwendung von Service Worker).
  • Wird mindestens zweimal besucht, mindestens fünf Minuten zwischen den Besuchen.

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

Sie können diese Anforderungen zu Test- oder Debugging-Zwecken überspringen, indem Sie ein Chrome-Flag aktivieren:

chrome: // flags/# Bypass-App-Banner-Engagement-Checks

chrome flag bypass user engagement checks

9
Lukasz Wiktor

Sie benötigen Folgendes, um eine Manifestdatei anzuzeigen.

  1. Sie sollten eine Manifestdatei für die Webanwendung haben mit: 

    1. short_name - wird auf dem Startbildschirm direkt unter dem Symbol verwendet. 
    2. name - vollständiger Name Ihrer App 
    3. icon - Logo/icon mit mindestens 192x192 png-Symbol (die Symboldeklarationen müssen einen Mime-Typ von image/png enthalten) 
    4. start_url - die Seite, die beim Öffnen der App geladen werden soll
  2. Sie sollten einen Service-Mitarbeiter auf Ihrer Website registrieren.

  3. Stellen Sie sicher, dass Ihre Site über HTTPS (eine Voraussetzung für die Verwendung von Service-Mitarbeitern) bereitgestellt wird.

  4. Und es sollte die Heuristik der Browserseite treffen.

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

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

Sehen Sie sich beforeinstallprompt event an, das Sie abfangen und halten können.

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

6
aWebDeveloper

Ich habe diesen ausführlichen Artikel zu Medium gefunden. So fügen Sie das Popup-Fenster "Hinzufügen zum Homescreen" in der Web-App hinzu

Schritt 1: Erstellen Sie eine leere Datei service-worker.js in Ihrem Stammordner. Fügen Sie den folgenden Code in Ihre HTML-Seite ein, 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 Sie die Manifestdatei Erstellen Sie die manifest.json-Datei im Stammverzeichnis. Fügen Sie unten im HTML-Seitenkopfabschnitt ein Tag hinzu.

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

Schritt 3: Fügen Sie Konfigurationen in der Manifestdatei hinzu. __Hier ist das Konfigurationsbeispiel.

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

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

Kurzname: Dieser Name ist auf dem Homescreen entlang des App-Symbols sichtbar.

icons: Legt verschiedene Größen-Icons für verschiedene Bildschirmgrößen fest

theme_color: Dieser Farbcode ändert die Farbe des Adressierers in Chrom.

background_color: Legt die Hintergrundfarbe für den Begrüßungsbildschirm fest.

name: Vollständiger Name der Anwendung.

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

3
NitinKumar

Die js-Datei Ihres Service-Workers enthält diese einzige Zeile.

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