Entfesseln Sie das volle Potenzial Ihrer Progressive Web App (PWA) durch ein umfassendes Verständnis des Web App Manifests. Lernen Sie, wie Sie Ihre PWA für eine optimale Benutzererfahrung und Auffindbarkeit konfigurieren.
Web App Manifest: Ihr Leitfaden zur Konfiguration von Progressive Web Apps
Das Web App Manifest ist eine JSON-Datei, die Browsern und Betriebssystemen Informationen über Ihre Webanwendung bereitstellt. Diese Informationen werden verwendet, wenn die App auf dem Gerät eines Benutzers installiert wird, und definieren, wie sie als Progressive Web App (PWA) erscheint und sich verhält. Stellen Sie es sich als den Bauplan vor, der Ihre Website in ein installierbares, App-ähnliches Erlebnis verwandelt. Ein gut konfiguriertes Manifest ist entscheidend für die Benutzerbindung und Auffindbarkeit.
Was ist eine Progressive Web App (PWA)?
Bevor wir uns mit dem Web App Manifest befassen, lassen Sie uns kurz zusammenfassen, was eine PWA ist. PWAs sind Webanwendungen, die Benutzern ein App-ähnliches Erlebnis bieten. Sie sind:
- Zuverlässig: Laden sofort und funktionieren dank Service Workern auch offline oder in Netzwerken mit geringer Qualität.
- Schnell: Reagieren schnell auf Benutzerinteraktionen mit flüssigen Animationen und ohne ruckeliges Scrollen.
- Ansprechend: Bieten ein immersives Benutzererlebnis mit Funktionen wie Push-Benachrichtigungen und der Möglichkeit, auf dem Startbildschirm installiert zu werden.
Die Rolle des Web App Manifests
Das Web App Manifest ist der Eckpfeiler einer PWA. Es liefert die notwendigen Informationen, damit Browser:
- Die PWA installieren können: Es ermöglicht Benutzern, die Web-App auf ihren Geräten zu installieren und sie ihrem Startbildschirm oder App-Launcher hinzuzufügen.
- Die PWA korrekt anzeigen können: Es definiert den Namen, die Symbole, die Themenfarbe und andere visuelle Aspekte der App.
- Das Verhalten der PWA steuern können: Es legt fest, wie die App gestartet werden soll (z. B. im Vollbildmodus oder als eigenständiges Fenster) und wie sie in das Betriebssystem integriert werden soll.
Erstellen Ihrer `manifest.json`-Datei
Das Web App Manifest ist eine JSON-Datei, die normalerweise `manifest.json` genannt wird. Sie sollte im Stammverzeichnis Ihrer Webanwendung platziert werden. Hier ist ein grundlegendes Beispiel:
{
"name": "Meine tolle PWA",
"short_name": "Tolle PWA",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
Lassen Sie uns jede dieser Eigenschaften aufschlüsseln:
`name`
Der vollständige Name Ihrer Webanwendung. Dieser Name wird den Benutzern angezeigt, wenn sie aufgefordert werden, die App zu installieren, und im App-Launcher.
Beispiel:
"name": "Globale Nachrichten App"
`short_name`
Eine kürzere Version des Namens Ihrer App, die verwendet wird, wenn nur begrenzter Platz zur Verfügung steht, wie auf dem Startbildschirm oder im App-Launcher. Halten Sie ihn kurz.
Beispiel:
"short_name": "Globale News"
`start_url`
Die URL, die die App beim Start laden soll. Normalerweise ist dies die Startseite Ihrer Webanwendung, es kann aber auch eine spezielle Landing-Page sein.
Beispiel:
"start_url": "/"
Sie können auch eine URL mit Query-Parametern verwenden, um zu verfolgen, wie Benutzer Ihre PWA starten:
"start_url": "/?utm_source=homescreen"
`display`
Definiert, wie die App beim Start angezeigt werden soll. Es gibt mehrere Optionen:
- `standalone`: Die App wird in einem eigenen Top-Level-Fenster geöffnet, ohne Browser-UI-Elemente wie die Adressleiste.
- `fullscreen`: Die App nimmt den gesamten Bildschirm ein und verbirgt sogar die Statusleiste.
- `minimal-ui`: Ähnlich wie `standalone`, bietet aber eine minimale Browser-UI, wie z. B. einen Zurück-Button und einen Aktualisieren-Button.
- `browser`: Die App wird in einem normalen Browser-Tab oder -Fenster geöffnet.
Empfehlung: `standalone` ist im Allgemeinen die bevorzugte Option für PWAs.
Beispiel:
"display": "standalone"
`background_color`
Die Hintergrundfarbe des Startbildschirms der App, wenn sie gestartet wird. Dies ist wichtig, um einen nahtlosen Übergang zwischen dem App-Symbol und dem Inhalt der App zu gewährleisten.
Beispiel:
"background_color": "#ffffff"
`theme_color`
Die Themenfarbe, die zum Stylen der Benutzeroberfläche der App verwendet wird, wie z. B. die Statusleiste bei Android. Diese Farbe sollte zum Branding Ihrer App passen.
Beispiel:
"theme_color": "#000000"
`icons`
Ein Array von Objekten, von denen jedes ein Symbol für die App darstellt. Sie sollten mehrere Symbole in verschiedenen Größen bereitstellen, um sicherzustellen, dass die App auf verschiedenen Geräten und Auflösungen gut aussieht.
Eigenschaften für jedes Symbol:
- `src`: Die URL des Symbolbildes.
- `sizes`: Die Abmessungen des Symbols in Pixeln (z. B. "192x192").
- `type`: Der MIME-Typ des Symbolbildes (z. B. "image/png").
Empfohlene Symbolgrößen:
- 48x48
- 72x72
- 96x96
- 144x144
- 192x192
- 512x512
Beispiel:
"icons": [
{
"src": "/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
Zusätzliche Manifest-Eigenschaften
Obwohl die oben genannten Eigenschaften die häufigsten sind, unterstützt das Web App Manifest viele weitere Optionen zur Konfiguration Ihrer PWA:
`id`
Ein eindeutiger Bezeichner für Ihre PWA. Dies ist wichtig, um Konflikte zu vermeiden, wenn Sie mehrere PWAs mit demselben Namen haben.
Beispiel:
"id": "com.example.myapp"
`scope`
Definiert den Navigationsbereich (Scope) der App. Dies bestimmt, welche URLs innerhalb Ihrer Website als Teil der PWA betrachtet werden. Wenn der Benutzer außerhalb des Bereichs navigiert, wird die App in einem normalen Browser-Tab geöffnet.
Beispiel:
"scope": "/app/"
In diesem Beispiel werden nur URLs, die mit `/app/` beginnen, als Teil der PWA betrachtet.
`orientation`
Gibt die bevorzugte Bildschirmausrichtung für die App an. Optionen umfassen `portrait`, `landscape`, `any` und mehr.
Beispiel:
"orientation": "portrait"
`related_applications`
Ein Array von Objekten, die verwandte native Anwendungen definieren. Dies ermöglicht es Ihnen, Ihre nativen Apps bei Benutzern zu bewerben, die Ihre PWA bereits installiert haben.
Beispiel:
"related_applications": [
{
"platform": "play",
"id": "com.example.myapp"
}
]
Dieses Beispiel zeigt an, dass es eine verwandte native App im Google Play Store mit der ID `com.example.myapp` gibt.
`prefer_related_applications`
Ein boolescher Wert, der angibt, ob der Benutzer aufgefordert werden soll, die verwandte native Anwendung anstelle der PWA zu installieren.
Beispiel:
"prefer_related_applications": true
`categories`
Ein Array von Zeichenketten, die die Kategorien der App repräsentieren. Dies kann Benutzern helfen, Ihre App in App-Stores oder Suchergebnissen zu finden.
Beispiel:
"categories": ["news", "information"]
`shortcuts`
Definiert eine Liste von Verknüpfungen, auf die Benutzer über das App-Symbol auf ihrem Startbildschirm zugreifen können. Dies ermöglicht es Benutzern, häufige Aufgaben innerhalb der App schnell auszuführen.
Beispiel:
"shortcuts": [
{
"name": "Neueste Nachrichten",
"short_name": "Nachrichten",
"description": "Lesen Sie die neuesten Nachrichtenartikel",
"url": "/news",
"icons": [{
"src": "/icons/news.png",
"sizes": "192x192",
"type": "image/png"
}]
}
]
Verknüpfen des Manifests mit Ihrer Web-App
Sobald Sie Ihre `manifest.json`-Datei erstellt haben, müssen Sie sie mit Ihrer Webanwendung verknüpfen, indem Sie ein ``-Tag zum `
`-Abschnitt Ihres HTML hinzufügen:
<link rel="manifest" href="/manifest.json">
Validierung Ihres Manifests
Es ist wichtig, Ihre `manifest.json`-Datei zu validieren, um sicherzustellen, dass sie korrekt formatiert ist und alle erforderlichen Eigenschaften enthält. Sie können Online-Tools wie JSONLint oder die Chrome DevTools verwenden, um Ihr Manifest zu validieren.
Testen Ihrer PWA
Nachdem Sie Ihr Manifest erstellt und verknüpft haben, sollten Sie Ihre PWA in verschiedenen Browsern und auf verschiedenen Geräten testen, um sicherzustellen, dass sie wie erwartet funktioniert. Verwenden Sie die Chrome DevTools (Application -> Manifest), um Ihr Manifest zu überprüfen und eventuelle Probleme zu diagnostizieren.
Best Practices für die Konfiguration des Web App Manifests
Hier sind einige Best Practices, die Sie bei der Konfiguration Ihres Web App Manifests beachten sollten:
- Stellen Sie alle erforderlichen Eigenschaften bereit: Stellen Sie sicher, dass Sie alle wesentlichen Eigenschaften wie `name`, `short_name`, `start_url`, `display`, `background_color`, `theme_color` und `icons` eingefügt haben.
- Verwenden Sie passende Symbolgrößen: Stellen Sie mehrere Symbole in verschiedenen Größen bereit, um verschiedene Geräte und Auflösungen zu unterstützen.
- Wählen Sie den richtigen Anzeigemodus: Wählen Sie den `display`-Modus, der am besten zur Benutzererfahrung Ihrer App passt. `standalone` ist im Allgemeinen die bevorzugte Option.
- Validieren Sie Ihr Manifest: Validieren Sie Ihre `manifest.json`-Datei immer, um sicherzustellen, dass sie korrekt formatiert ist.
- Testen Sie Ihre PWA: Testen Sie Ihre PWA in verschiedenen Browsern und auf verschiedenen Geräten, um sicherzustellen, dass sie wie erwartet funktioniert.
- Optimieren Sie für SEO: Verwenden Sie relevante Schlüsselwörter in `name`, `short_name` und `description`, um die Auffindbarkeit Ihrer App zu verbessern.
- Berücksichtigen Sie die Lokalisierung: Wenn Ihre App auf ein globales Publikum abzielt, sollten Sie lokalisierte Versionen Ihres Manifests mit unterschiedlichen Namen, Beschreibungen und Symbolen für verschiedene Sprachen bereitstellen.
Beispiele für gut konfigurierte Web App Manifests
Hier sind einige Beispiele für gut konfigurierte Web App Manifests von beliebten PWAs:
Twitter Lite
{
"name": "Twitter Lite",
"short_name": "Twitter",
"icons": [
{
"src": "/static/icons/mstile-150x150.png",
"sizes": "150x150",
"type": "image/png"
},
{
"src": "/static/icons/twitter-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/static/icons/twitter-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#1da1f2",
"description": "Twitter Lite ist eine schnellere, datenfreundliche Möglichkeit, zu sehen, was in der Welt passiert.",
"orientation": "portrait"
}
Starbucks
{
"name": "Starbucks",
"short_name": "Starbucks",
"icons": [
{
"src": "/static/icons/starbucks-icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/static/icons/starbucks-icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#f2f0eb",
"theme_color": "#00704a",
"description": "Bestellen Sie Ihre Lieblingsgetränke und -speisen von Starbucks mit der App.",
"orientation": "portrait",
"shortcuts": [
{
"name": "Jetzt bestellen",
"short_name": "Bestellen",
"description": "Eine neue Bestellung starten",
"url": "/order",
"icons": [{
"src": "/static/icons/order-icon.png",
"sizes": "192x192",
"type": "image/png"
}]
}
]
}
Die Zukunft des Web App Manifests
Das Web App Manifest ist ein sich entwickelnder Standard, zu dem im Laufe der Zeit neue Funktionen und Möglichkeiten hinzugefügt werden. Behalten Sie die neuesten Updates und Empfehlungen des W3C im Auge, um sicherzustellen, dass Ihre PWAs die neuesten Technologien voll ausschöpfen.
Fazit
Das Web App Manifest ist ein wesentlicher Bestandteil jeder PWA. Durch die richtige Konfiguration Ihres Manifests können Sie eine nahtlose und ansprechende Benutzererfahrung bieten, die Ihre Web-App wie eine native Anwendung wirken lässt. Dieser Leitfaden hat einen umfassenden Überblick über das Web App Manifest gegeben, einschließlich seiner Eigenschaften, Best Practices und Beispiele. Indem Sie diesen Richtlinien folgen, können Sie das volle Potenzial Ihrer PWAs ausschöpfen und Ihren Benutzern auf der ganzen Welt eine überlegene Benutzererfahrung bieten.
Nutzen Sie die Kraft des Web App Manifests und verwandeln Sie Ihre Websites in installierbare, App-ähnliche Erlebnisse, die Benutzer begeistern und die Interaktion fördern.