Progressive Web-App zeigt die Schaltfläche „Installieren“ in der Browserleiste nicht an

Ich versuche, eine zu machen PWA und nichts scheint die Schaltfläche “Installieren als Web-App” auf meiner Website erscheinen zu lassen.

Die Schaltfläche „Installieren“ sieht wie folgt aus und wird in der Adressleiste angezeigt:

Es erscheint, wenn ich zu einer Diskursseite gehe, aber nicht zu meiner eigenen.

Ich habe folgendes im Kopf:

Mein Manifest befindet sich im Stammverzeichnis und heißt manifest.webmanifest:

{
  "name": "Example 1",
  "short_name": "example1",
  "display": "standalone",
  "start_url": ".",
  "background_color": "#000000",
  "theme_color":"#ffffff",
  "description": "Example web app.",
  "icons": [{
    "src": "https://www.example.com/test/images/icon_512.png",
    "sizes": "512x512",
    "type": "image/png"
  }],
  "share_target": {
    "action":"/new-topic",
    "method":"GET",
    "enctype":"application/x-www-form-urlencoded",
    "params": {
      "title":"title",
      "text":"body"}
  }
}

Jetzt gibt es keine Fehler mehr in der Konsole. Zuerst gab es einen Fehler, der besagte, dass das Logobild nicht gefunden werden konnte. Sobald dieser Pfad korrekt war, verschwand der Fehler, aber es gab immer noch keine Installationsschaltfläche.

Ein Beispiel für eine PWA sind discourse.org-Foren Hier. Diese Seite lässt sich gut installieren.

Getestet in Brave / Firefox / OS X

MDN Progressive Web

Update gefunden):
Net Ninja-Kurs zu PWAs

Ich verwende Chrome Inspector zum Debuggen meines Web-App-Manifests:
https://developers.google.com/web/tools/chrome-devtools/progressive-web-apps

Zum Beispiel zeigt es die Probleme in meiner manifest.json:

Nachdem die Probleme behoben wurden, erscheint das PWA-Installationssymbol in der Chrome-Adressleiste 🙂

Die Kriterien für eine PWA-App finden Sie in den MDN-Dokumenten unter https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen#how_do_you_make_an_app_a2hs-ready. Zum Startbildschirm hinzufügen (A2HS) wird häufig verwendet, um PWAs zu erklären. Die Kriterien sind in den meisten Browsern ziemlich konsistent.

Probleme, warum es möglicherweise nicht als PWA erkannt wird:

1. Es muss serviert werden https (http:// oder file:// wird nicht funktionieren).
2. Es muss eine Manifestdatei mit den korrekt ausgefüllten Feldern vorhanden sein.
3. Es muss ein entsprechendes Symbol haben, um auf dem Startbildschirm angezeigt zu werden.
4. Für Google Chrome muss ein Servicemitarbeiter registriert sein, damit die App offline arbeiten kann.

In meinem Fall das Chrom Application Registerkarte zeigt keinen Fehler an. Aber ich habe die Seite mit überprüft Lighthouse und auswählen Progressive Web App Kategorie. Da sehe ich das Site-Problem.

Stellen Sie einfach sicher, dass Ihr Hosting-Server über ein SSL verfügt, da PWA nur auf http:// funktioniert.

Eine bessere Dokumentation zu PWA finden Sie unter diesem Link. https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps.

Es scheint ein Fehler zu sein, dass in einigen Fällen, obwohl Ihre App eine korrekte PWA ist, die Schaltfläche „Installieren“ nicht angezeigt wird.

Ich sehe dies, wenn Sie das Manifest ständig ändern und Ihre Seite aktualisieren, um die Schaltfläche „Installieren“ zu sehen.

Als Problemumgehung starten Sie Chrom einfach neu, indem Sie eingeben chrome://restart in der Adressleiste.

Für meine PWA-Übungs-App zeigte Chrome das Installationssymbol. Aber nachdem ich es installiert hatte, sah ich auch nach der Deinstallation nie wieder ein Installationssymbol. Selbst nach dem Neustart von Chrome, der Neuinstallation des Serviceworkers usw. weiß ich nicht, ob meine PWA einen Fehler hat oder ob Chrome einen Fehler hat.