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

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

Houssein Djirdeh

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

Symbol einer progressiven Web-App auf dem Startbildschirm eines Smartphones

Welchen Nutzen bieten sie?

Mit Manifestdateien von Web-Apps können Sie ändern, wie die Anwendung auf dem Desktop oder Mobilgerät des Nutzers aussieht. Durch Ändern Eigenschaften in der JSON-Datei können Sie eine Reihe von Details in Ihrem -Anwendung, einschließlich der folgenden:

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

MDN-Dokumentation deckt alle Eigenschaften ab, die im Detail geändert werden können.

Standardmanifest ändern

In CRA wird die Standardmanifestdatei /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"
}

So kann jeder die App auf seinem Gerät installieren die Standarddetails der Anwendung. Die HTML-Datei public/index.html enthält ein <link>-Element zum Laden des Manifests.

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

Hier ist ein Beispiel für eine mit CRA erstellte Anwendung mit geändertem Manifest. Datei:

So finden Sie heraus, ob in diesem Beispiel alle Attribute korrekt funktionieren:

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie 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“ der Entwicklertools werden die Properties aus der App-Manifestdatei angezeigt.

Fazit

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