Chrome für Android - fügen Sie Web-App zum Startbildschirm hinzu

Question

Ich versuche, ein "Add to Homescreen" Banner mit Google Chrome nativen Banner-Support zu implementieren, mit dieser Demo als Referenz.

https://googlechrome.github.io/samples/app-install-banner/basic-banner/index.html

Gemäß der Spezifikation gibt, die Anforderungen sind:

• die Seite einen Servicemitarbeiter verwendet (yep, siehe unten)
• die Website mit HTTPS (yep, die Website hat ein gültiges SSL-Zertifikat und ich lade über HTTPS Chrome zeigt die Website als sicher und hat ein grünes Vorhängeschloss, keine Fehler oder Warnungen im Zertifikat)
• die App hat ein Manifest deklariert (yep, siehe unten)
• das Manifest eine short_name hat, 144 Pixel Symbol und eine Art von 'image/jpeg' (yep, siehe unten)

Das Manifest I ist unten verwenden.

Die enthält ein short_name und ein 144 Pixel-Symbol des Typs image/png.

Der Service Arbeiter ich verwende ist eine direkte Kopie & Paste aus diesem Code:

https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js

, die in diesem Artikel empfohlen wurde:

https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android?hl=en

Der Service Arbeiter gewesen registriert, wird das Manifest in die Seite geladen und die Bild-URL ist korrekt, aber das Banner wird nicht angezeigt.

Ich habe auch die chrome: // flags/# umgehen-app-banner-engagement-checks aktiviert, so dass dies kein Fall von mir morgen wieder kommen und überprüfen, ob es funktioniert. Ich konnte Homescreen-Banner auf allen von mir überprüften Chrome-Demos anzeigen (von denen ich den Großteil des Codes übernommen habe), und auf meinem Telefon ist die neueste Version von Chrome installiert.

Gibt es noch etwas, das ich vermisse, das das Homescreen-Banner blockieren könnte?

Danke.

Answer 1

Ein paar Dinge zu überprüfen:

• Stellen Sie sicher, Sie start_url in Ihrem Manifest haben, um die Seite zu starten definiert. Stellen Sie sicher,
• , dass Sie eine <link rel=manifest> auf Ihrer Seite
• die alle auf dem Manifest Lage richtig basierend
• Vorzugsweise haben ein 192px Symbol lösen die Bild-URL Stellen Sie sicher haben, 144 ist die minimale

Mounir Lamouri erstellt a manifest validator, die Sie verwenden können, um Ihr Manifest zu überprüfen, ist korrekt.

Sie sollten auch chrome: // flags/# umgehen-app-banner-engagement-checks aktivieren, wenn Sie Chrome verwenden, um eine schnellere Warnung oder Sichtbarkeit von Problemen zu erhalten. Schließlich können Sie in der Dev Tools-Konsole bei jedem Laden der Seite nachsehen, und es wird ein Fehler angezeigt, der angibt, warum das Banner nicht angezeigt wurde.

Es gibt auch eine Menge Führung auf developers.google.com

• Using App Install Banners
  • Erstellen Sie eine Manifest-Datei mit einem short_name, Icons und launch_url
  • Link zu der Manifest-Datei aus der Seite
• Web App Install Banner
  • Optional können zusätzliche Informationen wie background_color und theme_color enthalten sein.
• Listening to events on App Install banner
  • Erfahren Sie, wenn Chrome denkt, dass es für die Installation und dann bietet die Möglichkeit, es bis zu einem geeigneten Zeitpunkt verschieben veranlassen können.
  • Verstehen Sie, ob der Benutzer die Eingabeaufforderung akzeptiert oder abgelehnt hat, indem Sie sich die Antwort im onbeforeinstallprompt-Ereignis ansehen.

Answer 2

Im Allgemeinen würde ich das Einfügen Ihrer Manifest in diese empfehlen, um sicherzustellen, keine Fehler haben: http://mounirlamouri.github.io/manifest-validator/

Bei der Verwendung von Chrome mit chrome: // flags/# Bypass-app- banner-engagement-checks aktiviert, können Sie in der Konsole nach dem Laden jeder Seite suchen und es wird ein Fehler angezeigt, der angibt, warum das Banner nicht angezeigt wurde.