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 Manifest für Web-Apps. Durch Ändern dieser Datei können Sie ändern, wie Ihre Anwendung angezeigt wird, wenn sie auf dem Gerät des Nutzers installiert ist.
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"
}
So 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 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 finden Sie heraus, ob in diesem Beispiel alle Attribute korrekt funktionieren:
- Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild .
- Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Optionstaste + 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 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. - 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.