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.
„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](https://web.developers.google.cn/static/articles/add-manifest-react/image/a-progressive-web-app-ico-1aeca055d20a7.png?authuser=6&hl=de)
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
- 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.
Fazit
- 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. - 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.