Web-App-Manifest

Was diese Prüfung macht

Sucht im Document-Head nach <link rel="manifest" href="...">, holt die referenzierte JSON-Datei und validiert, dass sie parst und die Felder enthält, die Browser für einen Installations-Prompt verlangen: name (oder short_name), start_url, icons mit mindestens einem 192×192 und einem 512×512, und display.

Warum es zählt

Das Manifest steuert, wie das Betriebssystem deine Seite behandelt, sobald jemand sie zum Home-Screen hinzufügt.

• Android (Chrome, Samsung Internet, Edge): Mit gültigem Manifest plus Service Worker zeigt der Browser den “Zum Home-Bildschirm hinzufügen”-Prompt. Ohne Manifest kein Installations-Banner — Nutzer:innen müssen die versteckte Menüoption finden.
• Chromebook / Desktop-Chrome / Edge: Als eigenständige App über das Omnibox-Icon der Adressleiste installierbar.
• iOS Safari: Liest name, theme_color und apple-touch-icon (immer noch ein separater Link). Ehrt display: standalone aus dem Manifest nicht — du brauchst zusätzlich <meta name="apple-mobile-web-app-capable" content="yes">.
• Tab-Strip: Chrome nutzt theme_color aus dem Manifest (und dem passenden Meta-Tag) für die Hintergrundfarbe der Adressleiste.

Auch wenn du keinen PWA-Installations-Prompt willst, speist das Manifest immer noch das Favicon, das Android verwendet, wenn Nutzer:innen ein Lesezeichen anlegen, und das Icon, das Chrome im Tab-Overflow-Menü auf Mobile zeigt.

So behebst du es

1. Verlinke das Manifest von jeder Seite:

<link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content="#0b0b0b" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Die Dateiendung ist konventionell .webmanifest, aber .json funktioniert auch, solange die Antwort mit Content-Type: application/manifest+json (oder application/json) ausgeliefert wird.

2. Schreib ein minimales gültiges Manifest:

{
  "name": "MetricSpot",
  "short_name": "MetricSpot",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0b0b0b",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/icons/maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Das maskable-Icon ist das, was Android für das Home-Screen-Badge nutzt. Ohne es croppt Android dein Icon und du bekommst einen weißen Kreis um ein Logo. Teste mit maskable.app.

3. Liefere den richtigen Content-Type aus:

location = /manifest.webmanifest {
  default_type application/manifest+json;
  add_header Cache-Control "public, max-age=3600";
}

Liefert dein Host es als text/plain oder text/html aus, ignoriert Chrome die Datei stillschweigend.

Astro: Leg manifest.webmanifest in public/ — Astro kopiert es unverändert ins Site-Root. Füge das <link> in dein Basis-Layout.

Next.js (App Router): Exportiere ein typisiertes Manifest aus app/manifest.ts, und Next emittiert das JSON zur Build-Zeit:

// app/manifest.ts
import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "MetricSpot",
    short_name: "MetricSpot",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#0b0b0b",
    icons: [
      { src: "/icons/icon-192.png", sizes: "192x192", type: "image/png" },
      { src: "/icons/icon-512.png", sizes: "512x512", type: "image/png" },
    ],
  };
}

Das <link rel="manifest"> wird von Next automatisch injiziert, wenn diese Datei existiert.

WordPress: Der einfachste Weg ist ein PWA-Plugin (PWA by 10up oder Super Progressive Web Apps). Oder schreib das Manifest selbst, leg es ins Theme-Root und füge das <link>-Tag via wp_head hinzu:

add_action('wp_head', function () {
  echo '<link rel="manifest" href="' . esc_url(get_template_directory_uri() . '/manifest.webmanifest') . '">';
});

4. Kombiniere mit den richtigen Meta-Tags. Das Manifest erledigt den Großteil, aber iOS Safari und ältere Crawler wollen weiterhin die separaten Tags:

<meta name="theme-color" content="#0b0b0b" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

Siehe auch Apple Touch Icon und Favicon für den Rest des Icon-Sets.

Häufig gestellte Fragen

Brauche ich einen Service Worker, um diese Prüfung zu bestehen?

Nein. Die Manifest-Prüfung verifiziert nur das <link> und die JSON-Datei. Einen Service Worker brauchst du, um auf Android als PWA installierbar zu sein — ohne ihn erscheint der Installations-Prompt auch bei perfektem Manifest nicht. Das Manifest allein gibt dir trotzdem ein besseres Home-Screen-Icon und Tab-Strip-Metadaten.

Warum erscheint mein Installations-Prompt auf Android nicht?

Drei Dinge sind nötig: ein gültiges Manifest mit 192×192- und 512×512-Icons, ein Service Worker, der fetch-Events handhabt, und die Seite muss über HTTPS ausgeliefert werden. Prüfe chrome://inspect → “Devices” → dein Tab → Application → Manifest in den DevTools — Chrome listet exakt, welche Installations-Kriterien fehlen.

Was ist der Unterschied zwischen display: standalone und display: fullscreen?

standalone blendet das Browser-Chrome aus, behält aber die OS-Statusleiste (Benachrichtigungen, Uhrzeit, Akku) — was die meisten Apps wollen. fullscreen blendet alles aus und passt meist nur zu Spielen. minimal-ui behält eine dünne Browser-Leiste mit Zurück/Vorwärts; selten genutzt. Die meisten installierbaren Apps wollen standalone.