Web-App-Manifest hinzufügen

François Beaufort

Pete LePage

Thomas Steiner

Alexey Rodionov

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 39
• <ph type="x-smartling-placeholder"></ph> 79
• <ph type="x-smartling-placeholder"></ph> x
• <ph type="x-smartling-placeholder"></ph> 17

Quelle

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.

Hinweis :Betriebssysteme müssen normalerweise einen Titel für jedes App-Fenster haben. Dieses Der Titel wird auf verschiedenen Oberflächen zum Wechseln des Fensters angezeigt, z. B. alt + tab, Übersichtsmodus und die Liste der Regalfenster. Bei PWAs, die im eigenständigen Modus ausgeführt werden, Chromium fügt die short_name (oder, falls diese nicht verfügbar ist, die name) zum der <title> des HTML-Dokuments an, um Angriffe zu verhindern, können eigenständige Apps verwechselt werden, beispielsweise Betriebssystem Dialogfeldern angezeigt. Zum Schutz Ihrer App sollten Sie den App-Namen nicht im Feld <title> für den eigenständigen Modus.

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.

Hinweis :Chromium-basierte Browser unterstützen auch SVG-Symbole, die skaliert werden können. ohne verpixelt wirken zu lassen, und die erweiterte Funktionen wie Reaktion auf prefers-color-scheme. Diese Symbole behalten jedoch ihren Status zum Zeitpunkt der Installation, werden live aktualisiert. Um SVG-Symbole sicher zu verwenden, geben Sie immer ein Rastersymbol als Fallback für Browser, die keine SVG-Symbole unterstützen.

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> Die eigenständige Benutzeroberfläche
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> Minimale UI.
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.

Achtung :Wenn der Nutzer in Ihrer App auf einen Link klickt, der zu einer Seite außerhalb des scope wird der Link im vorhandenen PWA-Fenster geöffnet und gerendert. Bei Bedarf Link, der in einem Browsertab geöffnet werden soll, fügen Sie target="_blank" in das <a>-Tag ein. An Android, Links mit target="_blank" in einem benutzerdefinierten Chrome-Tab geöffnet

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 type="x-smartling-placeholder">

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

</ph> Beispiel für ein PWA-Fenster mit benutzerdefiniertem theme_color.

theme_color in Medienabfragen

Unterstützte Browser

• <ph type="x-smartling-placeholder"></ph> 93
• <ph type="x-smartling-placeholder"></ph> 93
• <ph type="x-smartling-placeholder"></ph> 106
• <ph type="x-smartling-placeholder"></ph> 15

Quelle

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 type="x-smartling-placeholder">

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

</ph> Verbesserte Installations-UI für Computer und Mobilgeräte

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">

Die Anforderung des Manifests erfolgt ohne Anmeldedaten zu erstellen, auch wenn sie sich in derselben Domain befinden. Wenn im Manifest Folgendes erforderlich ist: Anmeldedaten verwenden, müssen Sie crossorigin="use-credentials" angeben im Manifest-Tag.

Manifest testen

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

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

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

</ph> Teste dein Manifest in den Entwicklertools.

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