Das Web-App-Manifest
Schreiben Sie eine manifest.json mit name, icons, start_url, display und theme_color, damit Browser eine Aufforderung zum Hinzufügen zum Startbildschirm anbieten.
Das Web-App-Manifest ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist eine PWA?
Eine Progressive Web App ist eine Website mit Funktionen einer nativen App: Sie lässt sich auf dem Startbildschirm installieren, funktioniert offline und kann Push-Benachrichtigungen empfangen. Die drei zentralen Bestandteile sind ein Web App Manifest, ein Service Worker und HTTPS.
Die Manifest-Datei
Die Datei manifest.json (oder .webmanifest) ist eine JSON-Datei, die die Metadaten Ihrer App beschreibt. Browser lesen sie ein, um „Zum Startbildschirm hinzufügen“ zu ermöglichen und Ihre App wie eine native App zu starten.
Einfaches Manifest
Ein minimales Manifest enthält name, icons, start_url und den display-Modus.
// public/manifest.webmanifest
{
"name": "Coddy Notes",
"short_name": "Notes",
"description": "Lightweight markdown notes",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}Das Manifest verknüpfen
Verknüpfen Sie es im HTML-Element <head>.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">display-Modi
"display" steuert die Fensterelemente der App: "standalone" (keine Browseroberfläche, app-ähnlich), "fullscreen" (immersiv, blendet die Statusleiste aus), "minimal-ui" (einige Browser-Steuerelemente), "browser" (normaler Tab).
Icons – mehrere Größen
Stellen Sie Icons in mehreren Größen bereit. Modernes Android benötigt 192 und 512; Apple benötigt zusätzliche Größen. Verwenden Sie "purpose": "maskable" für adaptive Android-Icons.
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Apple-spezifische Tags
iOS unterstützt das Manifest nicht vollständig. Fügen Sie für „Zum Startbildschirm hinzufügen“ unter iOS Apple-spezifische Meta-Tags hinzu.
<link rel="apple-touch-icon" href="/icons/apple-180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Notes">Installationsaufforderung
Browser lösen das Ereignis beforeinstallprompt aus, wenn die Voraussetzungen erfüllt sind (Manifest + Service Worker + HTTPS + Nutzerinteraktion). Sie können das Ereignis zurückstellen und über Ihre eigene Benutzeroberfläche auslösen.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
async function onInstallClick() {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('install:', outcome);
deferredPrompt = null;
}Shortcuts (App Shortcuts)
Im Manifest können Shortcuts deklariert werden, die beim langen Drücken auf das Icon der installierten App erscheinen.
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]Kategorien und Screenshots
Fügen Sie categories und screenshots hinzu, um die Installationsoberfläche in Chrome Android und Windows anzureichern.
"categories": ["productivity", "utilities"],
"screenshots": [
{ "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
{ "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]Das Manifest testen
Öffnen Sie DevTools → Application → Manifest. Chrome zeigt die ausgelesenen Manifest-Felder, Icon-Vorschauen und Warnungen an (fehlende Icons, zu geringer Kontrast usw.).
Frameworks machen es einfach
Next.js: Legen Sie manifest.webmanifest in public/ ab. Nuxt: Installieren Sie das Modul @vite-pwa/nuxt. Vite: vite-plugin-pwa generiert Manifest und Service Worker automatisch.
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [VitePWA({
manifest: {
name: 'Coddy Notes',
icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
}
})]
};Schnelltest
Welcher display-Wert in einem Web App Manifest sorgt dafür, dass die installierte PWA ohne Browseroberfläche wie eine native App geöffnet wird?
Rückblick: Web App Manifest
JSON-Datei zur Beschreibung der PWA-Metadaten. Fügen Sie name, short_name, start_url, display, theme_color und Icons hinzu (mehrere Größen + maskable). Verknüpfen Sie die Datei im HTML mit rel=manifest. Für iOS werden Apple-spezifische Meta-Tags benötigt. Das Ereignis beforeinstallprompt ermöglicht eine eigene Installationsoberfläche. shortcuts und screenshots sorgen für eine umfangreichere Installation. Frameworks (Vite PWA, Next, Nuxt PWA) automatisieren die Generierung.
Häufig gestellte Fragen
Ist die Lektion „Das Web-App-Manifest“ kostenlos?
Ja — der vollständige Text von „Das Web-App-Manifest“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Das Web-App-Manifest“?
Schreiben Sie eine manifest.json mit name, icons, start_url, display und theme_color, damit Browser eine Aufforderung zum Hinzufügen zum Startbildschirm anbieten. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Das Web-App-Manifest“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das Web-App-Manifest
- Registrierung und Lebenszyklus von Service Workern
- Offline-Caching-Strategien: CacheFirst und NetworkFirst
- Push-Benachrichtigungen