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 die Informationen bereitzustellen, die erforderlich sind, um eine Progressive Web App (PWA) auf einem Gerät zu installieren, wie z.B. den Namen und das Icon der App.

Ein Web-App-Manifest enthält ein einzelnes JSON-Objekt, bei dem die Schlüssel auf oberster Ebene 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. Zum Beispiel müssen PWAs bestimmte Manifestmitglieder bereitstellen.

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

Beispielmanifest

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 mithilfe eines <link>-Elements im <head> eines Dokuments bereitgestellt:

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

Die Erweiterung .webmanifest ist in dem Abschnitt Medientypenregistrierung der Spezifikation angegeben (die Antwort der Manifestdatei sollte Content-Type: application/manifest+json zurückgeben). Browser unterstützen im Allgemeinen Manifeste mit anderen geeigneten Erweiterungen wie .json (Content-Type: application/json).

Wenn das Manifest Anmeldeinformationen zum Abrufen benötigt, muss das crossorigin-Attribut auf use-credentials gesetzt werden, auch wenn sich die Manifestdatei im gleichen Ursprung wie die aktuelle Seite befindet.

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

Startbildschirme

In einigen Browsern und Betriebssystemen wird ein Startbildschirm angezeigt, wenn eine installierte PWA gestartet wird. Dieser Startbildschirm wird automatisch generiert und sein Erscheinungsbild wird durch Mitglieder im Web-App-Manifest definiert, insbesondere:

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