Tutorials » Progressive Web Apps: Erstelle das Web App Manifest
Erstelle das Web App Manifest
Stell dir vor, du möchtest eine App entwickeln, die im Web läuft und von Nutzern wie eine normale Anwendung auf ihrem Smartphone oder Computer verwendet werden kann. Genau hier kommt das Web App Manifest ins Spiel. Es ist eine JSON-Datei, die Informationen über deine Web-App enthält und es dem Browser ermöglicht, sie wie eine eigenständige App zu behandeln.
Das Web App Manifest gibt dem Browser Anweisungen, wie er deine Web-App installieren und auf dem Startbildschirm des Geräts ablegen soll. Es stellt eine Verbindung zwischen deiner Web-App und dem Benutzer her, indem es ihm ein einheitliches Erlebnis bietet, unabhängig davon, ob er deine App über den Browser oder den Startbildschirm öffnet.
Jetzt fragst du dich vielleicht, was genau im Web App Manifest steht. Lass mich dir einige der wichtigsten Informationen zeigen:
Name und Beschreibung
Das Manifest enthält den Namen und eine kurze Beschreibung deiner App. Diese Informationen werden dem Benutzer angezeigt, wenn er die App installiert oder auf dem Startbildschirm öffnet. Es ist wichtig, einen aussagekräftigen Namen und eine prägnante Beschreibung zu wählen, um das Interesse der Benutzer zu wecken.
Code anklicken zum kopieren
"name": "Meine tolle Web-App",
"description": "Eine fantastische App, die dir dabei hilft, produktiver zu sein."Code anklicken zum kopieren
Start-URL
Hier gibst du die URL an, von der aus deine App gestartet wird. Dies kann die Hauptseite deiner App oder eine andere relevante Seite sein. Der Browser öffnet diese URL, wenn der Benutzer auf das App-Symbol klickt.
Code anklicken zum kopieren
"start_url": "/app/startseite"Code anklicken zum kopieren
Symbole
Das Web App Manifest ermöglicht es dir, Symbole festzulegen, die auf dem Startbildschirm oder in der App-Übersicht des Geräts angezeigt werden. Du kannst verschiedene Größen und Formate für die Symbole angeben, um sicherzustellen, dass sie auf verschiedenen Geräten korrekt dargestellt werden.
Code anklicken zum kopieren
"icons": [
{
"src": "/icons/icon-64.png",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "/icons/icon-128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/icons/icon-256.png",
"sizes": "256x256",
"type": "image/png"
}
]Code anklicken zum kopieren
Farbschema
Hier kannst du das Farbschema deiner App definieren, das in der Titelleiste des Browsers oder im App-Switcher des Betriebssystems angezeigt wird. Du kannst eine Hintergrundfarbe und eine Theme-Farbe angeben, um das Erscheinungsbild deiner App anzupassen.
Code anklicken zum kopieren
"background_color": "#ffffff",
"theme_color": "#007bff"Code anklicken zum kopieren
Kompletter Code
Code anklicken zum kopieren
{
"name": "Meine tolle Web-App",
"short_name": "Tolle App",
"description": "Eine fantastische App, die dir dabei hilft, produktiver zu sein.",
"start_url": "/app/startseite",
"icons": [
{
"src": "/icons/icon-64.png",
"sizes": "64x64",
"type": "image/png"
},
{
"src": "/icons/icon-128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/icons/icon-256.png",
"sizes": "256x256",
"type": "image/png"
}
],
"background_color": "#ffffff",
"theme_color": "#007bff"
}Code anklicken zum kopieren
In diesem Beispiel haben wir einige der zuvor erwähnten Elemente im Manifest definiert. Wir haben den Namen, die Kurzbezeichnung, eine Beschreibung, die Start-URL, die Symbole in verschiedenen Größen und Formaten sowie das Farbschema angegeben.
Der komplette Code kommt in eine leere Textdatei und wird unter dem Namen manifest.json abgespeichert und auf deinen Webspace geladen.
Du musst als nächstes noch dein Manifest in deiner Webseite einbinden. Folgender Code kommt in den <head>-Teil deines Quellcodes:
Code anklicken zum kopieren
<link rel="manifest" href="/manifest.json">Code anklicken zum kopieren
Kommentare
Möchtest du etwas zu diesem Tutorial sagen?