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.
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.
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.
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.
Anklicken zum Kopieren

Kompletter 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:
Anklicken zum Kopieren


Kommentare

Möchtest du etwas zu diesem Tutorial sagen?

2000 Zeichen übrig
Werbung

Du suchst einen günstigen Anbieter für Webhosting? Netcup hat alles, was du suchst!

Sichere dir jetzt einen 5€-Gutschein für Neukunden!

Mehr lesen