Web-App-Manifest hinzufügen

François Beaufort

Pete LePage

Thomas Steiner

Alexey Rodionov

Ein Web-App-Manifest ist eine JSON-Datei, die dem Browser mitteilt, Die progressive Web-App (PWA) sollte funktionieren, wenn sie auf dem Desktop oder Mobilgerät. Eine typische Manifestdatei enthält mindestens Folgendes:

• Name der App
• Die Symbole, die in der App verwendet werden sollen
• Die URL, die beim Starten der App geöffnet werden soll

Manifestdatei erstellen

Die Manifestdatei kann einen beliebigen Namen haben, heißt aber in der Regel manifest.json und aus dem Stammverzeichnis (dem obersten Verzeichnis Ihrer Website) bereitgestellt werden. Die Spezifikation schlägt die Erweiterung auf .webmanifest vor. Sie können aber auch JSON verwenden. -Dateien, damit Ihre Manifeste besser lesbar sind.

Ein typisches Manifest sieht so aus:

{
  "short_name": "Weather",
  "name": "Weather: Do I need an umbrella?",
  "icons": [
    {
      "src": "/images/icons-vector.svg",
      "type": "image/svg+xml",
      "sizes": "512x512"
    },
    {
      "src": "/images/icons-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "id": "/?source=pwa",
  "start_url": "/?source=pwa",
  "background_color": "#3367D6",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#3367D6",
  "shortcuts": [
    {
      "name": "How's the weather today?",
      "short_name": "Today",
      "description": "View weather information for today",
      "url": "/today?source=pwa",
      "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
    },
    {
      "name": "How's the weather tomorrow?",
      "short_name": "Tomorrow",
      "description": "View weather information for tomorrow",
      "url": "/tomorrow?source=pwa",
      "icons": [{ "src": "/images/tomorrow.png", "sizes": "192x192" }]
    }
  ],
  "description": "Weather forecast information",
  "screenshots": [
    {
      "src": "/images/screenshot1.png",
      "type": "image/png",
      "sizes": "540x720",
      "form_factor": "narrow"
    },
    {
      "src": "/images/screenshot2.jpg",
      "type": "image/jpg",
      "sizes": "720x540",
      "form_factor": "wide"
    }
  ]
}

Wichtige Manifestattribute

short_name und name

Du musst in deinem Manifest mindestens entweder short_name oder name angeben. Wenn geben Sie beides an: name wird verwendet, wenn die App installiert ist, und short_name ist auf dem Startbildschirm, im Launcher oder an anderen Stellen des Nutzers eingeschränkt.

icons

Wenn ein Nutzer Ihre PWA installiert, können Sie eine Reihe von Symbolen für den Browser definieren zur Verwendung auf dem Startbildschirm, im App Launcher, in der Aufgabenauswahl, auf dem Ladebildschirm anderen Orten.

Das Attribut icons ist ein Array von Bildobjekten. Jedes Objekt muss Fügen Sie src, eine sizes-Eigenschaft und die type des Bildes hinzu. Zur Verwendung maskierbare Symbole, die manchmal auch als adaptive Symbole bezeichnet werden Symbole auf Android-Geräten hinzufügen, füge "purpose": "any maskable" zur icon-Property hinzu.

Für Chromium müssen Sie ein Symbol mit mindestens 192 × 192 Pixeln und ein 512 x 512 Pixel. Wenn nur diese beiden Symbolgrößen verfügbar sind, die Symbole automatisch an das Gerät anpassen. Wenn Sie Ihr Budget besser skalieren möchten, und diese für Pixelperfektion anpassen, stellen Sie Symbole in Schritten bereit von 48 dp.

id

Mit der Eigenschaft id können Sie die für Ihr . Durch Hinzufügen des Attributs id zum Manifest wird die Abhängigkeit von das start_url oder den Speicherort des Manifests und ermöglicht es, in Zukunft nicht mehr ändern. Weitere Informationen finden Sie unter Eine eindeutige Identifizierung von PWAs durch die Property „Manifest-ID der Web-App“.

start_url

start_url ist ein erforderliches Attribut. Damit wird dem Browser mitgeteilt, Die App sollte beim Start gestartet werden und verhindert das Starten der App am Seite, auf der sich der Nutzer befand, als er die App seinem Startbildschirm hinzugefügt hat.

Deine start_url sollte den Nutzer direkt zu deiner App weiterleiten, nicht zu einem Produkt Landingpage. Überlegen Sie, was die Nutzenden sofort tun möchten, nachdem sie öffnen Sie Ihre App und platzieren Sie sie dort.

background_color

Das Attribut background_color wird auf dem Ladebildschirm verwendet, wenn die App-Einführung für Mobilgeräte eingeführt.

display

Sie können anpassen, welche Browser-UI beim Starten Ihrer Anwendung angezeigt wird. Für können Sie die Adressleiste und die Elemente der Browseroberfläche ausblenden. Spiele sogar im Vollbildmodus starten. Das Attribut display verwendet eine der folgenden folgende Werte:

Attribut	Verhalten
fullscreen	Öffnet die Web-App ohne Browser-Benutzeroberfläche und nutzt alle verfügbaren Anzeigebereich.
standalone	Die Web-App wird geöffnet, sodass sie wie eine eigenständige App aussieht. Die App wird ausgeführt in einem eigenen Fenster geöffnet, das vom Browser getrennt ist, und blendet Standard- Browser-UI-Elemente wie die Adressleiste <ph type="x-smartling-placeholder"> </ph>
minimal-ui	Dieser Modus ähnelt dem standalone, bietet jedoch die Möglichkeit, Nutzer mit minimalen UI-Elementen zur Steuerung der Navigation, etwa die Schaltflächen „Zurück“ und „Aktualisieren“. <ph type="x-smartling-placeholder"> </ph>
browser	Ein Standardbrowser.

display_override

Um auszuwählen, wie deine Web-App angezeigt wird, lege im Manifest den Modus display fest als zuvor erklärt. Browser sind nicht erforderlich, um alle Displayanzeigen zu unterstützen Sie sind jedoch erforderlich, um Spezifikationsdefinierte Fallback-Kette ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Wenn nicht einen bestimmten Modus unterstützen, greifen sie auf den nächsten Anzeigemodus in der Kette zurück. In können diese Fallbacks Probleme verursachen. Zum Beispiel können Entwickler "minimal-ui" anfordern, ohne zurück zur "browser"-Anzeige zurückzukehren Modus, wenn "minimal-ui" nicht unterstützt wird. Das aktuelle Verhalten erleichtert es außerdem, neue Anzeigemodi abwärtskompatibel eingeführt werden, weil sie keinen Platz in der Fallback-Kette haben.

Mit dem Attribut display_override können Sie Ihre eigene Fallback-Sequenz festlegen. der vom Browser vor der display-Eigenschaft betrachtet wird. Sein Wert ist ein Reihenfolge von Zeichenfolgen, die in der aufgeführten Reihenfolge berücksichtigt werden, und die erste unterstützter Anzeigemodus angewendet. Werden keine unterstützt, greift der Browser auf das Fallback zurück. zur Auswertung des Felds display. Ist kein display-Feld vorhanden, display_override wird ignoriert.

Das folgende Beispiel zeigt, wie display_override verwendet wird. Die Details der "window-control-overlay" gehören nicht zum Aufgabenbereich für diese Seite.

{
  "display_override": ["window-control-overlay", "minimal-ui"],
  "display": "standalone",
}

Beim Laden dieser App versucht der Browser, "window-control-overlay" zu verwenden . Sollte diese Option nicht verfügbar sein, wird auf "minimal-ui" und dann auf "standalone" aus der Property display. Ist keiner dieser Optionen verfügbar, kehrt zur Standard-Fallback-Kette zurück.

scope

Die scope Ihrer Anwendung ist die Gruppe von URLs, die der Browser als Teil von betrachtet für Ihre App. scope steuert die URL-Struktur, die alle Ein- und Ausstiege umfasst verweist auf die App und der Browser stellt anhand dieser Informationen fest, wann der Nutzer die App in der App.

Weitere Hinweise zu scope:

• Wenn du in deinem Manifest kein scope angibst, wird die standardmäßige implizite scope ist die Start-URL, aber Dateiname, Abfrage und Fragment wurden entfernt.
• Das Attribut scope kann ein relativer Pfad (../) oder eine beliebige höhere Ebene sein Pfad (/), der eine größere Abdeckung der Navigationen ermöglichen würde in Ihrer Webanwendung.
• Die start_url muss im Geltungsbereich liegen.
• start_url ist relativ zum Pfad, der im Attribut scope definiert ist.
• Ein start_url, der mit / beginnt, ist immer der Stamm des Ursprungs.

theme_color

Mit theme_color wird die Farbe der Symbolleiste festgelegt. Dies kann in App-Vorschau in der Aufgabenauswahl. theme_color sollte mit dem Im Dokumentkopf wurde die Designfarbe meta angegeben.

</ph> <ph type="x-smartling-placeholder">

theme_color in Medienabfragen

Sie können theme_color in einer Medienabfrage mithilfe des media-Attributs der Farbelement des Designs „meta“. Sie können beispielsweise eine Farbe für den hellen Modus und einen für den dunklen Modus. Diese können Sie jedoch nicht definieren, in deinem Manifest. Weitere Informationen finden Sie unter GitHub-Problem w3c/manifest#975.

<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)"  content="black">

shortcuts

Das Attribut shortcuts ist ein Array von App-Verknüpfungen. -Objekte, die schnellen Zugriff auf wichtige Aufgaben in deiner App ermöglichen. Jedes Mitglied ist ein Wörterbuch, das mindestens eine name und eine url enthält.

description

Das Attribut description beschreibt den Zweck deiner App.

In Chrome beträgt die maximale Beschreibungslänge auf allen Plattformen 300 Zeichen. Ist die Beschreibung länger, kürzt der Browser sie mit einer Ellipsis-Zeichen. Auf Android-Geräten darf die Beschreibung außerdem höchstens 7 Textzeilen an.

screenshots

Das Attribut screenshots ist ein Array von Bildobjekten, die Ihre App darstellen. in gängigen Nutzungsszenarien. Jedes Objekt muss den src, einen sizes-Wert enthalten und der type des Bildes. Das Attribut form_factor ist optional. Du kannst die Einstellung entweder auf "wide" setzen, um Screenshots für das Breitbildformat zu erhalten oder "narrow" nur für kleine Screenshots.

In Chrome muss das Bild die folgenden Kriterien erfüllen:

• Breite und Höhe müssen mindestens 320 und darf höchstens 3.840 Pixel betragen.
• Die Maximalgröße darf nicht mehr als das 2,3-Fache der Länge der Mindestgröße betragen Dimension.
• Alle Screenshots, die mit dem entsprechenden Formfaktor übereinstimmen, müssen Seitenverhältnis.
  • Ab Chrome 109 werden nur Screenshots angezeigt, bei denen form_factor auf "wide" gesetzt ist die auf Desktops angezeigt werden.
• Ab Chrome 109 werden Screenshots, bei denen form_factor auf "wide" gesetzt ist, wird unter Android ignoriert. Screenshots ohne form_factor werden weiterhin angezeigt für Abwärtskompatibilität.

Chrome für Desktop-Computer zeigt mindestens einen und höchstens acht Screenshots an, die die Kriterien erfüllen. Alle anderen werden ignoriert.

Chrome für Android zeigt mindestens einen und höchstens fünf Screenshots an, die die Kriterien erfüllen. Alle anderen werden ignoriert.

</ph> <ph type="x-smartling-placeholder">

Web-App-Manifest zu Ihren Seiten hinzufügen

Fügen Sie nach dem Erstellen des Manifests ein <link>-Tag zu allen Seiten Ihrer Progressive Web-App Hier einige Beispiele:

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

Manifest testen

Um zu überprüfen, ob Ihr Manifest korrekt eingerichtet ist, verwenden Sie den Bereich Manifest im Bereich Anwendung der Chrome-Entwicklertools.

</ph> <ph type="x-smartling-placeholder">

Dieser Bereich enthält eine visuell lesbare Version vieler Ihres Manifests. Eigenschaften und ermöglicht Ihnen, alle Bilder zu laden, ordnungsgemäß funktioniert.

Startbildschirme auf Mobilgeräten

Beim ersten Start deiner App auf einem Mobilgerät kann es einen Moment dauern, bis der Browser und mit dem ersten Inhalt mit dem Rendern beginnen. Anstelle eines weiß der Nutzer, dass die App nicht funktioniert, bis zum ersten Mal ein Ladebildschirm angezeigt wird.

Chrome erstellt automatisch den Ladebildschirm aus name, background_color und icons wurden in deinem Manifest angegeben. Um eine gleichmäßige Wenn Sie vom Ladebildschirm zur App wechseln, background_color die gleiche Farbe wie die der geladenen Seite hat.

wählt das Symbol aus, das der Geräteauflösung für die Startbildschirmen angezeigt. Symbole mit 192 und 512 Pixeln sind in den meisten Fällen ausreichend. aber Sie können für eine bessere Übereinstimmung weitere Symbole hinzufügen.

Weitere Informationen

Weitere Informationen zu anderen Eigenschaften, die Sie Ihrem Web-App-Manifest hinzufügen können, finden Sie unter Dokumentation zum MDN Web App Manifest