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

In Create React App ist standardmäßig ein Web-App-Manifest enthalten, mit dem jeder Ihre React-App auf seinem Gerät installieren kann.

Houssein Djirdeh

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

Welchen Nutzen bieten sie?

Manifestdateien von Web-Apps bieten die Möglichkeit, zu ändern, wie eine installierte Anwendung auf dem Desktop oder Mobilgerät des Nutzers aussieht. Durch das Ändern der Attribute 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 Attribute, die geändert werden können, im Detail beschrieben.

Standardmanifest ändern

In CRA, einer Standardmanifestdatei, wird /public/manifest.json automatisch eingefügt, 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 einige Standarddetails der App sehen. Die HTML-Datei public/index.html enthält außerdem ein <link>-Element, über das das Manifest geladen wird.

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

Hier ist ein Beispiel für eine Anwendung, die mit CRA erstellt wurde und eine geänderte Manifestdatei hat:

So finden Sie heraus, ob alle Attribute in diesem Beispiel ordnungsgemäß funktionieren:

• Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild aus.
• Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
• Klicken Sie auf den Tab Anwendung.
• Klicken Sie im Steuerfeld Anwendung auf den Tab Manifest.

Fazit

1. Wenn Sie eine Website erstellen, die Ihrer Meinung nach nicht auf einem Gerät installiert werden muss, entfernen Sie das Manifest und das <link>-Element aus der HTML-Datei, die darauf verweist.
2. Wenn Sie möchten, dass Nutzer die App auf ihrem Gerät installieren, ändern Sie die Manifestdatei (oder erstellen Sie eine, falls Sie CRA nicht verwenden) mit den gewünschten Eigenschaften. In der MDN-Dokumentation werden alle erforderlichen und optionalen Attribute erläutert.