Web-App-Manifeste

Ein Web-App-Manifest, definiert in der Web Application Manifest-Spezifikation, ist eine JSON-Textdatei, die Informationen über eine Webanwendung bereitstellt.

Die häufigste Verwendung eines Web-App-Manifests besteht darin, dem Browser Informationen bereitzustellen, die er benötigt, um eine Progressive Web App (PWA) auf einem Gerät zu installieren, wie z. B. den Namen und das Symbol der App.

Ein Web-App-Manifest enthält ein einzelnes JSON-Objekt, bei dem die obersten Schlüssel als Mitglieder bezeichnet werden.

Mitglieder

Dieser Abschnitt listet die Mitglieder auf, die im Manifest erscheinen können.

Alle Mitglieder sind in der Spezifikation optional, aber einige Anwendungen erfordern, dass bestimmte Mitglieder vorhanden sind. Beispielsweise müssen PWAs bestimmte Manifest-Mitglieder bereitstellen.

Hinweis: Die dir, lang und iarc_rating_id Mitglieder sind nicht implementiert.

Beispiel für ein Manifest

json
{
  "short_name": "MDN",
  "name": "MDN Web Docs",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Bereitstellung eines Manifests

Web-App-Manifeste werden in Ihren HTML-Seiten mit einem <link>-Element im <head> eines Dokuments bereitgestellt:

html
<link rel="manifest" href="manifest.json" />

Die .webmanifest-Erweiterung ist im Abschnitt Medientyp-Registrierung der Spezifikation angegeben (die Antwort der Manifest-Datei sollte Content-Type: application/manifest+json zurückgeben). Browser unterstützen in der Regel auch Manifeste mit anderen geeigneten Erweiterungen wie .json (Content-Type: application/json).

Falls das Manifest Anmeldeinformationen erfordert, um es abzurufen, muss das crossorigin-Attribut auf use-credentials gesetzt werden, selbst wenn die Manifest-Datei im gleichen Ursprung wie die aktuelle Seite ist.

html
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />

Startbildschirme

In einigen Browsern und Betriebssystemen wird beim Starten einer installierten PWA ein Startbildschirm angezeigt. Dieser Startbildschirm wird automatisch generiert und sein Erscheinungsbild wird durch Mitglieder im Web-App-Manifest definiert, speziell:

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background_color
description
display
display.browser
display.fullscreen
display.minimal-ui
display.standalone
display_override
Experimental
tabbed display mode
Experimental
window-controls-overlay display mode
Experimental
file_handlers
Experimental
icons
id
launch_handler
Experimental
launch_handler.client_mode
Experimental
name
note_taking
Experimental
note_taking.new_note_url
Experimental
orientation
prefer_related_applications
Experimental
protocol_handlers
Experimental
protocol_handlers.protocol
Experimental
protocol_handlers.url
Experimental
related_applications
Experimental
scope
serviceworker
ExperimentalNon-standard
serviceworker.scope
ExperimentalNon-standard
serviceworker.src
ExperimentalNon-standard
serviceworker.use_cache
ExperimentalNon-standard
share_target
Experimental
short_name
shortcuts
start_url
theme_color

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
See implementation notes.
Has more compatibility info.

Siehe auch