CycleTracker: Manifest und Ikonographie

App-Identität

Um Ihre PWA zu identifizieren, muss das JSON ein name- oder short_name-Mitglied oder beides enthalten, um den PWA-Namen zu definieren. Es kann auch eine description enthalten.

name

Der Name der PWA. Dies ist der Name, der vom Betriebssystem verwendet wird, wenn Anwendungen aufgelistet werden, als Bezeichnung neben dem Anwendungssymbol usw.

short_name

Der Name der PWA, der dem Benutzer angezeigt wird, wenn nicht genug Platz vorhanden ist, um den name anzuzeigen. Er wird als Bezeichnung für Icons auf Telefonbildschirmen verwendet, einschließlich im "Zum Home-Bildschirm hinzufügen" Dialog auf iOS.

Wenn sowohl name als auch short_name vorhanden sind, wird name in den meisten Fällen verwendet, während short_name verwendet wird, wenn es nur begrenzten Platz gibt, um den Anwendungsnamen anzuzeigen.

description

Eine Erklärung, was die Anwendung tut. Sie bietet eine zugängliche Beschreibung des Zwecks und der Funktion der Anwendung.

Aufgabe

Schreiben Sie die ersten Zeilen Ihrer Manifest-Datei. Sie können den untenstehenden Text verwenden oder diskretere oder beschreibendere Werte sowie eine Beschreibung Ihrer Wahl.

Beispiel-Lösung

{
  "name": "CycleTracker: Period Tracking app",
  "short_name": "CT",
  "description": "Securely and confidentially track your menstrual cycle. Enter the start and end dates of your periods, saving your private data to your browser on your device, without sharing it with the rest of the world."
}

App-Präsentation

Das Erscheinungsbild oder die Präsentation der installierten und offline Erfahrungen einer PWA wird im Manifest definiert. Präsentations-Manifest-Mitglieder umfassen start_url und display, sowie Mitglieder, die verwendet werden können, um Ihre App-Farben anzupassen, einschließlich theme_color und background_color.

start_url

Die Startseite, wenn ein Benutzer die PWA startet.

display

Kontrolliert den Anzeigemodus der App, einschließlich fullscreen, standalone, was die PWA als eigenständige Anwendung anzeigt, minimal-ui, das einem eigenständigen View ähnelt, aber mit UI-Elementen zur Navigationsteuerung, und browser, das die App in einem regulären Browser-View öffnet.

Es gibt auch ein orientation-Mitglied, das die Standardausrichtung der PWA als portrait oder landscape definiert. Da unsere App in beiden Ausrichtungen gut funktioniert, lassen wir dieses Mitglied weg.

Farben

theme_color

Die Standardfarbe von Betriebssystem- und Browser-UI-Elementen](/de/docs/Web/Progressive_web_apps/How_to/Customize_your_app_colors#define_a_theme_color) wie der Statusleiste in einigen mobilen Erfahrungen und der Anwendungs-Titelleiste auf Desktop-Betriebssystemen.

background_color

Eine Platzhalterfarbe, die als Hintergrund der App angezeigt wird, bis das CSS geladen ist. Um einen reibungslosen Übergang zwischen App-Start und Laden zu schaffen, wird empfohlen, das <color> zu verwenden, das als background-color der App deklariert ist.

Aufgabe

Fügen Sie Präsentationsdefinitionen zur Manifestdatei hinzu, die Sie in der vorherigen Aufgabe begonnen haben zu erstellen.

Beispiel-Lösung

Da die Beispielanwendung eine einzelne Seite ist, können wir "/" als start_url verwenden oder das Mitglied ganz weglassen. Aus demselben Grund können wir die App ohne die Browser-UI anzeigen, indem wir display auf standalone setzen.

In unserem CSS ist background-color: #eeffee; auf dem body-Element-Selektor gesetzt. Wir verwenden #eeffee, um einen reibungslosen Übergang vom Platzhalterschein zum App-Laden zu gewährleisten.

{
  "name": "...",
  "short_name": "...",
  "description": "...",
  "start_url": "/",
  "theme_color": "#eeffee",
  "background_color": "#eeffee",
  "display": "standalone"
}

App-Ikonographie

PWA-Icons helfen Benutzern, Ihre App zu erkennen, machen sie visuell ansprechender und verbessern die Entdeckbarkeit. Das PWA-App Symbol erscheint auf Startbildschirmen, App-Launchern oder App-Store-Suchergebnissen. Die Größe des gerenderten Symbols und die Dateianforderungen variieren je nachdem, wo es angezeigt wird und von wem. Im Manifest definieren Sie Ihre Bilder.

Innerhalb des Manifest-JSON-Objekts spezifiziert das icons-Mitglied ein Array von einem oder mehreren Icon-Objekten zur Verwendung in verschiedenen Kontexten, wobei jedes ein src- und sizes-Mitglied und optionale type- und purpose-Mitglieder hat. Jedes Icon-Objekt listet unter src die Quelle einer einzelnen Bilddatei auf. Das sizes-Mitglied liefert eine durch Leerzeichen getrennte Liste von Größen, für die dieses bestimmte Bild verwendet werden soll, oder das Schlüsselwort any; der Wert ist derselbe wie das Attribut sizes des <link> Elements. Das type-Mitglied listet den MIME-Typ des Bildes auf.

{
  "name": "MyApp",
  "icons": [
    {
      "src": "icons/tiny.webp",
      "sizes": "48x48"
    },
    {
      "src": "icons/small.png",
      "sizes": "72x72 96x96 128x128 256x256",
      "purpose": "maskable"
    },
    {
      "src": "icons/large.png",
      "sizes": "512x512"
    },
    {
      "src": "icons/scalable.svg",
      "sizes": "any"
    }
  ]
}

Alle Symbole sollten denselben Look und das gleiche Feeling haben, um sicherzustellen, dass Benutzer Ihre PWA erkennen, aber je größer das Symbol, desto mehr Details kann es enthalten. Während alle Symboldateien Quadrate sind, rendert einige Betriebssysteme unterschiedliche Formen, schneiden Abschnitte ab oder "maskieren" das Symbol, um der UI zu entsprechen, oder schrumpfen und zentrieren das Symbol mit einem Hintergrund, wenn das Symbol nicht maskierbar ist. Die sichere Zone, der Bereich, der okay gerendert wird, wenn das Symbol als Kreis maskiert ist, ist das innere 80% des Bildes. Icons sind sicher maskierbar gekennzeichnet durch das purpose-Mitglied, welches, wenn auf maskable gesetzt, das Symbol als anpassungsfähig definiert.

In Safari, und daher für iOS und iPadOS, wenn Sie das nicht standardmäßige apple-touch-icon im <head> des HTML-Dokuments über <link> einfügen, wird es Vorrang vor manifest-deklarierten Icons haben.

Aufgabe

Fügen Sie die Icons zur Manifestdatei hinzu, die Sie erstellt haben.

Mit den Wörtern "Zyklus" und "Periode" von CycleTracker und der gewählten grünen Themenfarbe spielend, könnten unsere Symbolbilder alle hellgrüne Quadrate mit einem grünen Kreis sein. Unser kleinste Größe circle.ico, eine Icon-Datei, die einfach ein Kreis ist, der das Punktzeichen und die Themenfarbe der App darstellt, wobei unsere Zwischenbilder, circle.svg, tire.svg und wheel.svg, mehr Details hinzufügen, vom einfachen Kreis zu einem Reifen, je größer sie werden, wobei unsere größten Symbole ein detailliertes Rad mit Speichen und Schatten sind. Das Entwerfen von Icons ist jedoch nicht Teil dieses Tutorials.

<div>
  <img alt="a green circle" src="circle.svg" role="img" />
  <img alt="a simple wheel" src="tire.svg" role="img" />
  <img alt="a detailed wheel" src="wheel.svg" role="img" />
</div>

div {
  display: flex;
  gap: 5px;
}
img {
  width: 33%;
}

Beispiel-Lösung

{
  "name": "...",
  "short_name": "...",
  "description": "...",
  "start_url": "...",
  "theme_color": "...",
  "background_color": "...",
  "display": "...",
  "icons": [
    {
      "src": "circle.ico",
      "sizes": "48x48"
    },
    {
      "src": "icons/circle.svg",
      "sizes": "72x72 96x96",
      "purpose": "maskable"
    },
    {
      "src": "icons/tire.svg",
      "sizes": "128x128 256x256"
    },
    {
      "src": "icons/wheel.svg",
      "sizes": "512x512"
    }
  ]
}

Das Manifest zur App hinzufügen

Sie haben jetzt eine voll funktionsfähige Manifestdatei. Zeit, sie zu speichern und von unserer HTML-Datei zu verlinken.

Die Manifest-Dateierweiterung kann die von der Spezifikation vorgeschlagene .webappmanifest sein. Da sie jedoch eine JSON-Datei ist, wird sie am häufigsten mit der browserunterstützten .json-Erweiterung gespeichert.

PWAs erfordern ein Manifest, das von dem HTML-Dokument der App verlinkt wird. Wir haben eine voll funktionsfähige App, aber sie ist noch keine PWA, weil sie noch nicht mit unserer externen Manifest-JSON-Datei verlinkt ist. Um die externe JSON-Ressource einzubinden, verwenden wir das <link>-Element mit dem Attribut rel="manifest" und setzen das href-Attribut auf den Speicherort der Ressource.

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

Das <link>-Element wird am häufigsten verwendet, um auf Stylesheets zu verlinken und bei PWAs die erforderliche Manifest-Datei, wird aber auch verwendet, um Website-Icons festzulegen (sowohl "Favicon"-Artikons als auch Icons für den Startbildschirm und Apps auf mobilen Geräten) sowie andere Dinge.

<link rel="icon" href="icons/circle.svg" />

Beim Verwenden der .webmanifest-Erweiterung, setzen Sie type="application/manifest+json", wenn Ihr Server diesen MIME-Typ nicht unterstützt.

Aufgabe

Speichern Sie die Manifestdatei, die Sie in den obigen Schritten erstellt haben, und verlinken Sie dann darauf von der index.html-Datei.

Optionen Sie können auch ein Shortcut-Icon aus Ihrem HTML verlinken.

Beispiel-Lösung

Der <head> von index.html könnte nun so aussehen:

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Cycle Tracker</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="manifest" href="cycletracker.json" />
  <link rel="icon" href="icons/circle.svg" />
</head>

Siehe die cycletracker.json Datei und sehen Sie sich den Projektquellcode auf GitHub an.

Mit einer Manifestdatei und wenn sie von einer https:// URL (oder localhost) geladen wird, werden die meisten Browser Ihre Website als PWA erkennen und einige werden vorschlagen, sie zu installieren. Um unsere PWA offline arbeiten zu lassen, müssen wir noch einen Service Worker hinzufügen.

Debuggen von Manifeste-Dateien

Einige Browser-Entwicklungstools bieten Einblick in das App-Manifest. In den Developer Tools von Edge, Firefox und Chrome sind die Manifest-Mitglieder und ihre Werte unter dem "Application"-Panel sichtbar.

Das Manifest-App-Paneel bietet den Namen der Manifestdatei als Link und Identitäts-, Darstellungs- und Ikonensektionen.

Unterstützte Manifestmitglieder werden angezeigt, zusammen mit allen enthaltenen Werten. In diesem Screenshot, obwohl wir die Mitglieder orientation oder id nicht eingeschlossen haben, werden sie aufgeführt. Das App-Panel kann verwendet werden, um die Manifest-Mitglieder zu sehen und sogar zu lernen: in diesem Beispiel lernen wir, dass um eine App-ID zu spezifizieren, die mit der aktuellen Identität übereinstimmt, das id-Feld auf "/" setzen muss.

Chrome und Edge bieten auch Fehler und Warnungen, Protokollhandler und Informationen, um das Manifest und die Icons zu verbessern.

Unsere Web-App hat keine Protokollhandler; ein Thema, das in diesem Tutorial nicht behandelt wird. Hätten wir welche hinzugefügt, wären sie unter "Protocol Handlers" zu finden. Da dieser Abschnitt leer ist, bieten die Entwicklertools Links zu weiteren Informationen zu diesem Thema.

Das Manifest-Panel enthält auch Einblicke in den sicheren Bereich für maskierbare Icons und einen Link zu einem PWA Bildergenerator. Dieses Tool erstellt über 100 quadratische PNG-Bilder für Android, Apple OSs und Windows sowie ein JSON-Objekt, das alle Bilder und deren Größen auflistet. Die erzeugten Bilder mögen Ihren Bedürfnissen nicht entsprechen, aber die Liste der Bildgrößen, die für jedes Betriebssystem erzeugt werden, demonstriert die Vielfalt, wo und wie PWAs bereitgestellt werden können.

Die Entwicklertools sind nützlich, um zu identifizieren, welche Manifestmitglieder unterstützt werden. Beachten Sie, dass die Firefox-Entwicklungstools Einträge für dir, lang, orientation, scope und id haben, auch wenn unser Manifest diese Mitglieder nicht enthielt. Firefox zeigt auch den Wert des purpose-Mitglieds für jedes Icon an und zeigt any an, wenn der Zweck nicht explizit gesetzt ist.

Als Nächstes

Damit unsere PWA offline funktioniert, müssen wir einen Service Worker hinzufügen, was wir ohne ein Framework tun werden.

• Zurück
• Übersicht: CycleTracker PWA-Tutorial
• Weiter