---
title: Web App Manifest
slug: Web/Manifest
translation_of: Web/Manifest
---
<p>{{SeeCompatTable}}</p>

<p>Das Web-App-Manifest liefert Informationen über eine Anwendung (wie Name, Autor, Icon und Beschreibung) in einer JSON-Textdatei. Der Zweck des Manifests ist es, Web-Anwendungen auf dem Homescreen eines Geräts zu installieren, was den Benutzern einen schnelleren Zugriff und eine umfassendere Erfahrung bietet.</p>

<p>Web-App-Manifeste sind Teil einer Sammlung von Web-Technologien namens <a href="/en-US/docs/Web/Apps/Progressive">progressive Web-Anwendungen</a>, welche wiederum auf dem Homescreen eines Geräts installiert werden können, ohne dass der Benutzer sie über einen App Store installieren muss. Außerdem stellen sie auch andere Technologien wie z.B. die Offline-Fähigkeit und Push-Benachrichtigungen zur Verfügung.</p>

<h2 id="Deploying_a_manifest_with_the_link_tag" name="Deploying_a_manifest_with_the_link_tag">Bereitstellung eines Manifests</h2>

<p>Web-App-Manifeste werden in Ihren HTML-Seiten mit einem Link-Tag im Kopf Ihres Dokuments bereitgestellt:</p>

<div class="highlight">
<pre class="notranslate"><code class="language-html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"manifest"</span> <span class="na">href=</span><span class="s">"/manifest.webmanifest"</span><span class="nt">&gt;</span></code></pre>
</div>

<h2 id="Beispiel_Manifest">Beispiel Manifest</h2>

<pre class="brush: json notranslate">{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
<span class="pl-s"><span class="pl-pds">  "</span>background_color<span class="pl-pds">"</span></span> :<span class="pl-s"><span class="pl-pds"> "</span>#fff<span class="pl-pds">"</span></span> ,
  "description": "Eine einfach lesbare Hacker News App.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "Web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}</pre>

<h2 id="Eigenschaften">Eigenschaften</h2>

<h3 id="background_color"><code>background_color</code></h3>

<p>Definiert die erwartete Hintergrundfarbe für die Webanwendung. Dieser Wert wiederholt, was bereits im Anwendungsstylesheet verfügbar ist, kann aber von Browsern verwendet werden, um die Hintergrundfarbe einer Webanwendung zu zeichnen, wenn das Manifest verfügbar ist, bevor das Stylesheet geladen ist. Dies schafft einen reibungslosen Übergang zwischen dem Starten der Webanwendung und dem Laden des Inhalts der Anwendung.</p>

<pre class="brush: json notranslate">"background_color": "red"</pre>

<div class="note">
<p><strong>Hinweis</strong> : Die  <code>background_color</code> Eigenschaft soll nur die Benutzererfahrung verbessern, während eine Webanwendung geladen wird und sollte nicht vom Browser als Hintergrundfarbe verwendet werden, wenn das Stylesheet der Webanwendung verfügbar ist.</p>
</div>

<h3 id="description"><code>description</code></h3>

<p>Bietet eine allgemeine Beschreibung dessen, was die Web-Anwendung tut.</p>

<pre class="brush: json notranslate">"<code>description</code>": "Die App, die dir hilft, das beste Essen in der Stadt zu finden!"</pre>

<h3 id="dir"><code>dir</code></h3>

<p>Definiert die primäre Textrichtung für die <code>name</code>, <code>short_name</code> und <code>description</code> Eigenschaften. Zusammen mit der  <code>lang</code> Eigenschaft kann es helfen, die korrekte Darstellung von rechts-nach-links-Sprachen zu liefern.</p>

<pre class="brush: json notranslate" dir="rtl">"dir": "rtl",
"lang": "ar",
"short_name": "أنا من التطبيق!"</pre>

<p>Sie kann einer der folgenden Werte sein:</p>

<ul>
 <li><code>ltr</code> (links nach rechts)</li>
 <li><code>rtl</code> (rechts nach links)</li>
 <li><code>auto</code> (Weist den Browser an, den Unicode-bidirektionalen Algorithmus zu verwenden, um die Textrichtung zu schätzen.)</li>
</ul>

<div class="note">
<p><strong>Hinweis</strong> : Wenn der Wert weggelassen wird, ist er standardmäßig auf <code>auto</code>.</p>
</div>

<h3 id="display"><code>display</code></h3>

<p>Definiert den vom Entwickler bevorzugten Anzeigemodus für die Webanwendung.</p>

<pre class="brush: json notranslate">"display": "standalone"</pre>

<p>Gültige Werte sind:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Anzeigemodus</th>
   <th scope="col">Beschreibung</th>
   <th scope="col">Fallback-Anzeigemodus</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>fullscreen</code></td>
   <td>Es wird der gesamte verfügbare Anzeigebereich verwendet und kein User agent {{Glossary("Chrome")}} wird angezeigt.</td>
   <td><code>standalone</code></td>
  </tr>
  <tr>
   <td><code>standalone</code></td>
   <td>Die Anwendung wird sich wie eine eigenständige Anwendung darstellen und anfühlen. Dies kann die Anwendung mit einem anderen Fenster, ein eigenes Icon im Anwendungsstarter usw. enthalten. In diesem Modus schließt der Benutzeragent UI-Elemente zum Steuern der Navigation aus, kann aber auch andere UI-Elemente wie eine Statusleiste enthalten.</td>
   <td><code>minimal-ui</code></td>
  </tr>
  <tr>
   <td><code>minimal-ui</code></td>
   <td>Die Anwendung sieht und fühlt sich wie eine eigenständige Anwendung an, wird aber einen minimalen Satz von UI-Elementen zur Steuerung der Navigation haben. Die Elemente variieren je nach Browser.</td>
   <td><code>browser</code></td>
  </tr>
  <tr>
   <td><code>browser</code></td>
   <td>Die Anwendung öffnet sich in einem herkömmlichen Browser-Tab oder einem neuen Fenster, je nach Browser und Plattform. Dies ist die Voreinstellung. </td>
   <td>(Keiner)</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Hinweis</strong> : Sie können das CSS selektiv auf Ihre App basierend auf dem Anzeigemodus über die <a href="/docs/Web/CSS/@media/display-mode">Anzeigemodus-</a> Medienfunktion anwenden . Dies kann verwendet werden, um eine konsistente Benutzererfahrung zwischen dem Starten einer Website aus einer URL und starten Sie es von einem Desktop-Symbol.</p>
</div>

<h3 id="icons"><code>icons</code></h3>

<p>Gibt ein Array von Bildobjekten an, die als Anwendungssymbole in verschiedenen Kontexten dienen können. Zum Beispiel können sie verwendet werden, um die Webanwendung unter einer Liste anderer Anwendungen darzustellen oder die Webanwendung mit einem Task-Switcher und / oder Systemeinstellungen eines <abbr title="Betriebssystem">Betriebssystems</abbr> zu integrieren  .</p>

<pre class="brush: json notranslate">"icons": [
  {
    "src": "icon / lowres.webp",
    "sizes": "48x48",
    "type": "image / webp"
  },
  {
    "src": "icon / lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon / hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon / hd_hi.svg",
    "sizes": "72x72"
  }
]</pre>

<p>Bildobjekte können folgende Werte enthalten:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Mitglied</th>
   <th scope="col">Beschreibung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>sizes</code></td>
   <td>Ein String mit platzgetrennten Bildmaßen. </td>
  </tr>
  <tr>
   <td><code>src</code></td>
   <td>Der Pfad zur Bilddatei. Wenn <code>src</code>eine relative URL ist, ist die Basis-URL die URL des Manifests.</td>
  </tr>
  <tr>
   <td><code>type</code></td>
   <td>Ein Hinweis auf den Medientyp des Bildes. Der Zweck dieses Mitglieds ist es, einem Benutzer-Agenten zu erlauben, schnell Bilder von Medientypen zu ignorieren, die es nicht unterstützt.</td>
  </tr>
 </tbody>
</table>

<h3 id="lang"><code>lang</code></h3>

<p>Gibt die Primärsprache für die Werte in den <code>name</code>und <code>short_name</code>Mitgliedern an. Dieser Wert ist ein String mit einem einzigen Tag.</p>

<pre class="brush: json notranslate">"lang": "en-US"</pre>

<h3 id="name"><code>name</code></h3>

<p>Stellt einen menschlich lesbaren Namen für die Anwendung bereit, wie sie dem Benutzer angezeigt werden soll, zum Beispiel unter einer Liste anderer Anwendungen oder als Label für ein Symbol.</p>

<pre class="brush: json notranslate">"name": "Google I / O 2017" </pre>

<h3 id="orientation"><code>orientation</code></h3>

<p>Definiert die Standardausrichtung für alle Top-Level der Webanwendung {{Glossary("Browsing-Kontext", "Browsing-Kontexte")}}.</p>

<pre class="brush: json notranslate"><code>​​"orientation": "portrait-primary"</code></pre>

<p>Orientierung kann einer der folgenden Werte sein:</p>

<ul>
 <li><code>any</code></li>
 <li><code>natural</code></li>
 <li><code>landscape</code></li>
 <li><code>landscape-primary</code></li>
 <li><code>landscape-secondary</code></li>
 <li><code>portrait</code></li>
 <li><code>portrait-primary</code></li>
 <li><code>portrait-secondary</code></li>
</ul>

<h3 id="prefer_related_applications"><code>prefer_related_applications</code></h3>

<p>Gibt einen booleschen Wert an, der darauf hinweist, dass der Benutzeragent dem Benutzer mitteilt, dass die angegebenen verwandten Anwendungen (siehe unten) verfügbar sind und über die Webanwendung empfohlen werden. Dies sollte nur verwendet werden, wenn die verwandten nativen Apps wirklich etwas bieten, das die Webanwendung nicht machen kann.</p>

<pre class="brush: json notranslate">"prefer_related_applications": false</pre>

<div class="note">
<p><strong>Hinweis</strong> : Wenn weggelassen, gilt der Wert standardmäßig <code>false</code>.</p>
</div>

<h3 id="related_applications"><code>related_applications</code></h3>

<p>Gibt ein Array von "Anwendungsobjekten" an, die native Anwendungen repräsentieren, die von der zugrunde liegenden Plattform installiert oder zugänglich sind - zum Beispiel eine native Android-Anwendung, die über den Google Play Store erhältlich ist. Solche Anwendungen sollen Alternativen zur Webanwendung sein, die ähnliche oder gleichwertige Funktionalität bieten - wie die native App-Version der Web-App.</p>

<pre class="brush: json notranslate">"related_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]</pre>

<p>Anwendungsobjekte können folgende Werte enthalten:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Mitglied</th>
   <th scope="col">Beschreibung</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>platform</code></td>
   <td>Die Plattform, auf der die Anwendung gefunden werden kann.</td>
  </tr>
  <tr>
   <td><code>url</code></td>
   <td>Die URL, bei der die Anwendung gefunden werden kann.</td>
  </tr>
  <tr>
   <td><code>id</code></td>
   <td>Die ID, die verwendet wird, um die Anwendung auf der angegebenen Plattform darzustellen.</td>
  </tr>
 </tbody>
</table>

<h3 id="scope"><code>scope</code></h3>

<p>Definiert den Navigationsbereich des Anwendungskontextes dieser Webanwendung. Dies beschränkt grundsätzlich, welche Webseiten angezeigt werden können, während das Manifest angewendet wird. Wenn der Benutzer die Anwendung außerhalb des Gültigkeitsbereichs navigiert, kehrt er zu einer normalen Webseite zurück.</p>

<p>Wenn der Bereich eine relative URL ist, wird die Basis-URL die URL des Manifests sein.</p>

<pre class="brush: json notranslate">"scope": "/ myapp /"</pre>

<h3 id="short_name"><code>short_name</code></h3>

<p>Bietet einen kurzen menschlich lesbaren Namen für die Anwendung. Dies ist für den Einsatz vorgesehen, wo nicht genügend Platz vorhanden ist, um den vollständigen Namen der Webanwendung anzuzeigen.</p>

<pre class="brush: json notranslate">"short_name": "I / O 2017"
</pre>

<h3 id="start_url"><code>start_url</code></h3>

<p>Gibt die URL an, die geladen wird, wenn ein Benutzer die Anwendung von einem Gerät startet. Wenn als relative URL angegeben, ist die Basis-URL die URL des Manifests.</p>

<pre class="brush: json notranslate">"start_url": "./?utm_source=web_app_manifest"</pre>

<h3 id="theme_color"><code>theme_color</code></h3>

<p>Definiert die Standardthemafarbe für eine Anwendung. Dies beeinflusst manchmal, wie die Anwendung vom Betriebssystem angezeigt wird (z. B. auf Android-Task-Switcher, die Themenfarbe umgibt die Anwendung).  </p>

<pre class="brush: json notranslate">"theme_color": "aliceblue"</pre>

<h2 id="Splash-Bildschirme">Splash-Bildschirme</h2>

<p>In Chrome 47 und später wird ein Splash-Screen für eine Web-Anwendung angezeigt, die von einem Startbildschirm gestartet wird. Dieser Begrüßungsbildschirm ist automatisch generierten Objekte im Web - App - Manifest verwenden, insbesondere: <code>name</code>, <code>background_color</code>und das Symbol in der <code>icons</code>Anordnung, die am nächsten zu 128dpi für das Gerät ist.</p>

<h2 id="Mime_Typ">Mime Typ</h2>

<p>Manifestationen sollten mit dem <code>application/manifest+json</code>MIME-Typ bedient werden. Allerdings ist es optional, dies zu tun.  </p>

<h2 id="Spezifikation">Spezifikation</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName ('Manifest')}}</td>
   <td>{{Spec2('Manifest')}}</td>
   <td>Anfangsdefinition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android-Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome für Android</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome (39.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>32.0</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome (39.0)}}</td>
  </tr>
  <tr>
   <td><code>background_color</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome (46.0)}} <sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome (46.0)}} [1]</td>
  </tr>
  <tr>
   <td><code>theme_color</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome (46.0)}} <sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome (46.0)}} [1]</td>
  </tr>
  <tr>
   <td><code>icons</code>, <code>name</code>, <code>short_name</code>, Und <code>theme_color</code>für verwendete <a href="https://support.mozilla.org/t5/Other/How-to-add-a-shortcut-to-a-website-on-Android/ta-p/21992">In der Home - Bildschirm</a> - Funktion.</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile (53)}} <sup>[2]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>display-mode</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile (47)}} <sup>[3]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Grundlegende Unterstützung</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] unterstützt nicht <code>lang</code>oder <code>scope</code>.</p>

<p>[2] Die <code>icons</code>, <code>name</code>, <code>short_name</code>und <code>theme_color</code>Felder der <a href="/en-US/docs/Web/Manifest">Web App - Manifest</a> (falls vorhanden) kann nun als Quelle der Homescreen / apps Fenstersymbole sein, apps Fenstertitel, Homescreen Symboltitel und Apps Fensterfarbe (jeweils) für „hinzufügen zum Heimbildschirm "(nur Firefox Mobile, siehe {{Bug (" 1234558 ")}}). Experimentelle Unterstützung für diese Funktion steht hinter der booleschen Flagge <code>manifest.install.enabled</code>in <code>about:config</code>.</p>

<p>[3] Nur die <code>fullscreen</code>und <code>browser</code>Werte <code>display-mode</code>wurden in 47. <code>minimal-ui</code>und <code>standalone</code>wurden in Firefox 57 hinzugefügt.</p>