Es gab Skriptfehler auf dieser Seite. Während diese von Website-Redakteuren bearbeitet werden, können Sie im Folgenden Teile des Inhalts ansehen.

Diese Übersetzung ist in Arbeit.

Dies ist eine experimentelle Technologie
Da diese Technologie noch nicht definitiv implementiert wurde, sollte die Browser Kompatibilität beachtet werden. Es ist auch möglich, dass der Syntax in einer späteren Spezifikation noch geändert wird.

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.

Web-App-Manifeste sind Teil einer Sammlung von Web-Technologien namens progressive Web-Anwendungen , die Web-Anwendungen, die auf dem Homescreen eines Geräts installiert werden können, ohne dass der Benutzer durch einen App Store gehen, zusammen mit anderen Fähigkeiten wie zur Verfügung offline verfügbar und Push-Benachrichtigungen erhalten.

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

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

Beispiel manifestieren

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  " background_color " : " #fff " ,
  "Beschreibung": "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"
  }]
}

Mitglieder

background_color

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.

"background_color": "rot"

Hinweis : Das  background_color Mitglied soll nur die Benutzererfahrung verbessern, während eine Webanwendung geladen wird und vom Benutzeragenten nicht als Hintergrundfarbe verwendet werden soll, wenn das Stylesheet der Webanwendung verfügbar ist.

description

Bietet eine allgemeine Beschreibung dessen, was die Web-Anwendung tut.

"Beschreibung": "Die App, die dir hilft, das beste Essen in der Stadt zu finden!"

dir

Gibt die primäre Textrichtung für die name, short_nameund descriptionMitglieder. Zusammen mit dem  lang Mitglied kann es helfen, die korrekte Darstellung von rechts-nach-links-Sprachen zu liefern.

"dir": "rtl",
"lang": "ar",
"short_name": "أنا من التطبيق!"

Es kann einer der folgenden Werte sein:

  • ltr (links nach rechts)
  • rtl (rechts nach links)
  • auto (Hinweise zum Browser, um den Unicode-bidirektionalen Algorithmus zu verwenden, um die Richtigkeit des Textes zu erraten.)

Hinweis : Wenn der Wert weggelassen wird, ist er standardmäßig auf auto.

display

Definiert den bevorzugten Anzeigemodus des Entwicklers für die Webanwendung.

"display": "standalone"

Gültige Werte sind:

Anzeigemodus Beschreibung Fallback-Anzeigemodus
fullscreen Es wird der gesamte verfügbare Anzeigebereich verwendet und kein Benutzeragent {{ Glossar }} wird angezeigt. standalone
standalone Die Anwendung sieht und fühlt sich wie eine eigenständige Anwendung. 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. minimal-ui
minimal-ui 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. browser
browser Die Anwendung öffnet sich in einem herkömmlichen Browser-Tab oder einem neuen Fenster, je nach Browser und Plattform. Dies ist die Voreinstellung.  (Keiner)

Hinweis : Sie können das CSS selektiv auf Ihre App basierend auf dem Anzeigemodus über die Anzeigemodus- 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.

icons

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 Betriebssystems zu integrieren  .

"Icons": [
  {
    "src": "icon / lowres.webp",
    "Größen": "48x48",
    "type": "image / webp"
  },
  {
    "src": "icon / lowres",
    "Größen": "48x48"
  },
  {
    "src": "icon / hd_hi.ico",
    "Größen": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon / hd_hi.svg",
    "Größen": "72x72"
  }
]

Bildobjekte können folgende Werte enthalten:

Mitglied Beschreibung
sizes Ein String mit platzgetrennten Bildmaßen. 
src Der Pfad zur Bilddatei. Wenn srceine relative URL ist, ist die Basis-URL die URL des Manifests.
type 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.

lang

Gibt die Primärsprache für die Werte in den nameund short_nameMitgliedern an. Dieser Wert ist ein String mit einem einzigen Tag.

"lang": "en-US"

name

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.

"name": "Google I / O 2017" 

orientation

Definiert die Standardausrichtung für alle Top-Level der Webanwendung {{ Glossar }}.

​​"orientation": "portrait-primary"

Orientierung kann einer der folgenden Werte sein:

  • any
  • natural
  • landscape
  • landscape-primary
  • landscape-secondary
  • portrait
  • portrait-primary
  • portrait-secondary

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.

"prefer_related_applications": falsch

Hinweis : Wenn weggelassen, gilt der Wert standardmäßig false.

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.

"related_applications": [
  {
    "Plattform": "spielen",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "Plattform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]

Anwendungsobjekte können folgende Werte enthalten:

Mitglied Beschreibung
platform Die Plattform, auf der die Anwendung gefunden werden kann.
url Die URL, bei der die Anwendung gefunden werden kann.
id Die ID, die verwendet wird, um die Anwendung auf der angegebenen Plattform darzustellen.

scope

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.

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

"scope": "/ myapp /"

short_name

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.

"short_name": "I / O 2017"

start_url

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.

"start_url": "./?utm_source=web_app_manifest"

theme_color

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).  

"theme_color": "aliceblue"

Splash-Bildschirme

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: name, background_colorund das Symbol in der iconsAnordnung, die am nächsten zu 128dpi für das Gerät ist.

Mime Typ

Manifestationen sollten mit dem application/manifest+jsonMIME-Typ bedient werden. Allerdings ist es optional, dies zu tun.  

Spezifikation

Spezifikation Status Kommentar
Web App Manifest Arbeitsentwurf Anfangsdefinition

Browser-Kompatibilität

{{ Kompatibilitätstabelle }}
Feature Android Android-Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome für Android
Grundlegende Unterstützung Nicht unterstützt 39.0 ? ? 32.0 ? 39.0
background_color Nicht unterstützt 46.0 [1] ? ? (Ja) ? 46.0 [1]
theme_color Nicht unterstützt 46.0 [1] ? ? Nicht unterstützt ? 46.0 [1]
icons, name, short_name, Und theme_colorfür verwendete In der Home - Bildschirm - Funktion. ? (Ja) 53.0 (53) [2] ? Nicht unterstützt ? (Ja)
display-mode ? (Ja) 47.0 (47) [3] Nicht unterstützt ? ? (Ja)
Feature Chrom Firefox (Gecko) Internet Explorer Oper Safari (WebKit)
Grundlegende Unterstützung Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt Nicht unterstützt

[1] unterstützt nicht langoder scope.

[2] Die icons, name, short_nameund theme_colorFelder der Web App - Manifest (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 manifest.install.enabledin about:config.

[3] Nur die fullscreenund browserWerte display-modewurden in 47. minimal-uiund standalonewurden in Firefox 57 hinzugefügt.

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: tempelgogo, yzanomi
 Zuletzt aktualisiert von: tempelgogo,