Web-App-Manifest mit Create React App hinzufügen

Ein Web-App-Manifest ist standardmäßig in Create React App enthalten und ermöglicht es jedem, Ihre React-Anwendung auf seinem Gerät zu installieren.

Houssein Djirdeh

„Create React App“ (CRA) enthält standardmäßig ein Web-App-Manifest. Durch Ändern dieser Datei können Sie ändern, wie Ihre Anwendung angezeigt wird, wenn sie auf dem Gerät des Nutzers installiert ist.

Symbol einer progressiven Webanwendung auf dem Startbildschirm eines Smartphones

Welchen Nutzen bieten sie?

Mit Manifestdateien für Webanwendungen können Sie festlegen, wie eine installierte Anwendung auf dem Computer oder Mobilgerät des Nutzers aussehen soll. Durch Ändern der Eigenschaften in der JSON-Datei können Sie eine Reihe von Details in Ihrer Anwendung ändern, darunter:

  • Name
  • Beschreibung
  • App-Symbol
  • Farbe des Designs

In der MDN-Dokumentation werden alle Eigenschaften beschrieben, die geändert werden können.

Standardmanifest ändern

In CRA ist /public/manifest.json in der Standardmanifestdatei automatisch enthalten, wenn eine neue App erstellt wird:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Dadurch kann jeder die App auf seinem Gerät installieren und sich einige Standarddetails der App ansehen. Die HTML-Datei public/index.html enthält außerdem ein <link>-Element zum Laden des Manifests.

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

Hier ein Beispiel für eine mit CRA erstellte Anwendung mit einer geänderten Manifestdatei:

So prüfen Sie, ob alle Properties in diesem Beispiel richtig funktionieren:

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.
  • Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
  • Klicken Sie auf den Tab Anwendung.
  • Klicken Sie im Bereich Anwendung auf den Tab Manifest.

Auf dem Tab „Manifest“ des DevTools werden die Eigenschaften aus der Manifestdatei der App angezeigt.

Fazit

  1. Wenn du eine Website erstellst, die deiner Meinung nach nicht auf einem Gerät installiert werden muss, entferne das Manifest und das <link>-Element in der HTML-Datei, die darauf verweist.
  2. Wenn Sie möchten, dass Nutzer die Anwendung auf ihrem Gerät installieren können, ändern Sie die Manifestdatei (oder erstellen Sie eine, falls Sie kein CRA verwenden) mit beliebigen Eigenschaften. In der MDN-Dokumentation werden alle erforderlichen und optionalen Attribute erläutert.