it-swarm.com.de

Warum wird mein Banner zum Hinzufügen zum Startbildschirm nicht in meiner Web-App angezeigt?

Ich habe einen Service-Worker und eine manifest.json-Datei erstellt, um ein Web-App-Installationsbanner für Chrome-Browserbenutzer anzeigen zu können.

Es funktioniert nicht wie beabsichtigt.

Hier ist meine manifest.json-Datei

{
  "name": "MySite",
  "short_name": "Mysite",
  "start_url": "./?utm_source=homescreen",
  "icons": [{
      "src": "assets/cacheable/images/shortcut/120x120.png",
      "sizes": "128x128",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/142x142.png",
      "sizes": "142x142",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    }, {
      "src": "assets/cacheable/images/shortcut/192x192.png",
      "sizes": "384x384",
      "type": "image/png"
    }],
  "orientation": "portrait" ,
  "background_color": "#fff",
  "display": "standalone",
  "theme_color": "#fff"
}

Bitte lassen Sie mich wissen, wenn ich vergessen habe, etwas hinzuzufügen.

10
PPShein

Lassen Sie uns zunächst prüfen, ob Ihr Manifest die Voraussetzungen für die Anzeige von Web-App-Installationsbannern erfüllt.

Bedarf

Vollständige (aktuelle) Anforderungen zum Anzeigen von Web App-Installationsbannern sind *:

  • Besitzen Sie eine Web-App-Manifestdatei mit:
    • ein Kurzname 
    • einen Namen (wird in der banner-Eingabeaufforderung verwendet) 
    • ein 144 x 144 png-Symbol
    • ein start_url das lädt
  • Wird über HTTPS (eine Voraussetzung für die Verwendung von Service-Mitarbeitern) bereitgestellt.
  • Wird mindestens zweimal besucht, mindestens fünf Minuten zwischen den Besuchen.

Referenz

Okay, nehmen wir an, dies ist alles gültig. Lassen Sie uns zum Testen übergehen.

Testen

Um zu testen, ob Sie es richtig installiert haben, können Sie die folgenden Schritte ausführen:

  1. Öffnen Sie die Chrome DevTools.
  2. Gehen Sie zum Bereich Application
  3. Wechseln Sie zur Registerkarte Manifest
  4. Klicken Sie auf Zum Startbildschirm hinzufügen.

Eine Aufforderung sollte jetzt über Ihrem Browser angezeigt werden und Sie werden gefragt, ob Sie die URL zu Ihren Dingen hinzufügen möchten (auf dem Chrome-Desktop).

Fehlerbehebung

Wenn nach dem Testen der folgende Fehler in Ihrer Konsole angezeigt wird:

Es wurde kein übereinstimmender Servicemitarbeiter gefunden. Möglicherweise müssen Sie die Seite neu laden oder überprüfen, ob der Service-Mitarbeiter für die aktuelle Seite auch die Start-URL vom Manifest aus steuert

Stellen Sie dann sicher, dass 1. Ihr Service-Mitarbeiter einwandfrei und fehlerfrei arbeitet und 2. Ihr start_url mit einer tatsächlichen URL Ihrer Website übereinstimmt, die (geladen. Andernfalls werden Sie niemals die Aufforderung erhalten, zu zeigen!

Zusätzlich,

Beachten Sie, dass Benutzer (und Sie!) Über das Chrome-Menü (Android) auch manuell zum Startbildschirm hinzufügen können. Es ist nicht erforderlich, auf die Aufforderung zu warten! Ich füge meinem Homescreen viele Websites hinzu, die ich täglich benutze, und ich sehe kaum ein Banner!

* Beachten Sie, dass sich diese Anforderungen von Zeit zu Zeit ändern können (dies war zuvor der Fall!). Ein Update für "Zu Home-Bildschirm hinzufügen", das 2017 veröffentlicht wird, wurde bereits angekündigt hier

** Beachten Sie auch, dass sich diese Anforderungen erheblich von den Eingabeaufforderungen für die native App-Installation unterscheiden. **

17
Extricate

ihr Manifest.json scheint gut genug zu sein. und die oben genannten Punkte von @Extricate sind korrekt und perfekt. 

Die nächste Frage lautet also: Haben Sie Service-Worker für Ihre App implementiert?
Ich habe irgendwo gelesen, dass eine leere Service-Worker-Datei funktionieren würde, aber als ich eine leere Implementierung von Service-Worker ausprobierte, sagte es das 

  "Site kann nicht installiert werden: Die Seite funktioniert nicht offline." 

Ich vermute also, dass die neueste Chrome-Version den A2HS-Prompt für APP INSTALL BANNERS nicht unterstützen würde, wenn der Service-Mitarbeiter kein Offline-Arbeiten unterstützt. 

Sie können versuchen, zu Basic web app Prompt zu devtools in Chrome zu navigieren, zur Registerkarte Anwendung zu navigieren. Dort finden Sie manifest.json. Auf der linken Seite der Manifestdatei sehen Sie den HINZUFÜGEN-HINZUFÜGEN. Wenn Sie auf klicken, wird es gedruckt 

  "Site kann nicht installiert werden: Die Seite funktioniert nicht offline." 

PFA-Screenshot für dasselbe

5
Parth Mistry

Fügen Sie in Ihrer js-Datei für den Servicearbeiter diese Codezeile hinzu:

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