CycleTracker: Manifest und Ikonographie

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

name

Der Name der PWA. Dies ist der Name, der verwendet wird, wenn das Betriebssystem Anwendungen auflistet, als Bezeichnung neben dem Anwendungs-Symbol usw.

short_name

Der Name der PWA, der dem Benutzer angezeigt wird, wenn nicht genug Platz vorhanden ist, um den name anzuzeigen. Es wird als Bezeichnung für Symbole auf Telefonbildschirmen verwendet, einschließlich im Dialogfeld „Zum Startbildschirm hinzufügen“ auf iOS.

Wenn sowohl name als auch short_name vorhanden sind, wird in den meisten Fällen der name verwendet, während short_name verwendet wird, wenn nur begrenzter Platz zur Verfügung steht, um den Anwendungsnamen anzuzeigen.

description

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

Schreiben Sie die ersten Zeilen Ihrer Manifestdatei. Sie können den untenstehenden Text verwenden oder diskretere oder beschreibendere Werte und eine Beschreibung Ihrer Wahl.

Das Erscheinungsbild oder die Präsentation einer installierten und offline verfügbar gemachten PWA werden im Manifest definiert. Präsentationsmanifest-Mitglieder umfassen start_url und display sowie Mitglieder, mit denen Sie Ihre App-Farben anpassen können, einschließlich theme_color und background_color.

start_url

Die Startseite, wenn ein Benutzer die PWA startet.

display

Steuert den Anzeigemodus der App, einschließlich fullscreen, standalone, das die PWA als eigenständige Anwendung anzeigt, minimal-ui, das einer eigenständigen Ansicht ähnelt, aber mit UI-Elementen zur Steuerung der Navigation, und browser, das die App in einer regulären Browseransicht ö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.

theme_color

Die Standard-Farbe der Betriebssystem- und Browser-Benutzeroberflächenelemente wie die Statusleiste in einigen mobilen Erfahrungen und die Anwendungstitelleiste auf Desktop-Betriebssystemen.

background_color

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

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

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-Benutzeroberfläche anzeigen, indem wir das display auf standalone setzen.

In unserem CSS ist die background-color: #efe; auf dem body-Element-Selektor eingestellt. Wir verwenden #eeffee, um einen nahtlosen Übergang vom Platzhalter-Erscheinungsbild zum Laden der App sicherzustellen.

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

PWA-Symbole helfen Benutzern, Ihre App zu identifizieren, machen sie visuell ansprechender und verbessern die Auffindbarkeit. Das PWA-App-Symbol erscheint auf Startbildschirmen, App-Launchern oder Suchergebnissen in App-Stores. 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 gibt das icons-Mitglied ein Array von einem oder mehreren Symbolobjekten zur Verwendung in verschiedenen Kontexten an, jeweils mit einem src- und sizes-Mitglied sowie optionalen type- und purpose-Mitgliedern. Jede src-Liste eines Symbolobjekts gibt die Quelle einer einzelnen Bilddatei an. Das sizes-Mitglied liefert eine Liste raumgetrennter Größen, für die dieses bestimmte Bild verwendet werden soll, oder das Schlüsselwort any; der Wert ist derselbe wie das sizes-Attribut 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 das gleiche Aussehen und Gefühl haben, um sicherzustellen, dass Benutzer Ihre PWA wiedererkennen, aber je größer das Symbol, desto mehr Details kann es enthalten. Während alle Symboldateien quadratisch sind, rendern einige Betriebssysteme unterschiedliche Formen, indem sie Abschnitte wegschneiden oder das Symbol „maskieren“, um die Benutzeroberfläche zu erfüllen, oder das Symbol verkleinern und zentrieren, sofern es nicht maskierbar ist. Die Sichere Zone, der Bereich, der okay gerendert wird, wenn das Symbol als Kreis maskiert wird, ist der innere 80% des Bildes. Symbole werden als sicher zum Maskieren durch das purpose-Mitglied gekennzeichnet, welches, wenn auf maskable gesetzt, das Symbol als adaptiv 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, werden diese die im Manifest deklarierten Symbole übersteuern.

Fügen Sie die Symbole zur Manifestdatei hinzu, die Sie konstruiert haben.

In Anlehnung an die Worte „Zyklus“ und „Periode“ von CycleTracker und der grünen Theme-Farbe, die wir gewählt haben, könnten unsere Symbolbilder alle hellgrüne Quadrate mit einem grünen Kreis sein. Unser kleinstes Symbol circle.ico, eine Symboldatei, die nur einen Kreis darstellt, welcher das Satzzeichen der Periode und die Themefarbe der App repräsentiert, mit unseren Zwischengrößenbildern circle.svg, tire.svg und wheel.svg, die mehr Details hinzufügen, während sie von einem einfachen Kreis zu einem Reifen werden, je größer sie werden, wobei unsere größten Symbole ein detailliertes Rad mit Speichen und Schatten sind. Dennoch geht das Design von Symbolen über den Umfang dieses Tutorials hinaus.

<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%;
}

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

Die Dateierweiterung der Manifestdatei kann die Spezifikationsvorgabe .webappmanifest sein. Da es sich jedoch um eine JSON-Datei handelt, wird sie meist mit der browsergestützten Erweiterung .json gespeichert.

PWAs erfordern, dass eine Manifestdatei vom HTML-Dokument der App aus 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. Um die externe JSON-Ressource einzubinden, verwenden wir das <link>-Element, mit dem rel="manifest"-Attribut, und setzen das href-Attribut auf den Ort der Ressource.

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

Das <link>-Element wird hauptsächlich verwendet, um auf Stylesheets zu verlinken, und bei PWAs ebenfalls, um die erforderliche Manifestdatei zu verlinken, es wird aber auch verwendet, um Website-Icons zu etablieren (sowohl „Favicon“-ähnliche Icons als auch Icons für den Startbildschirm und Apps auf mobilen Geräten), und weiteres.

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

Wenn Sie die .webmanifest-Erweiterung verwenden und Ihr Server diesen MIME-Typ nicht unterstützt, setzen Sie type="application/manifest+json".

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

Optional, verlinken Sie ebenfalls ein Shortcut-Symbol aus Ihrem HTML.

Das <head> von index.html könnte nun folgendermaßen 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>

Sehen Sie sich die cycletracker.json Datei an und den Projekt-Quellcode auf GitHub.

Mit einer Manifestdatei und beim Laden von einer https://-URL (oder localhost) werden die meisten Browser Ihre Website als PWA erkennen und einige werden vorschlagen, sie zu installieren. Um unsere PWA offline funktionsfähig zu machen, müssen wir aber noch einen Service Worker hinzufügen.

Einige Browser-Entwicklungstools bieten Einblicke in das App-Manifest. In den Entwicklungstools von Edge, Firefox und Chrome sind die Manifest-Mitglieder und ihre Werte im "Anwendung"-Panel sichtbar.

Das Manifest-App-Panel stellt den Namen der Manifestdatei als Link bereit sowie Abschnitte zur Identität, Präsentation und Icons.

Unterstützte Manifest-Mitglieder werden angezeigt, zusammen mit allen enthaltenen Werten. In diesem Screenshot sind, obwohl wir die orientation- oder id-Mitglieder nicht eingeschlossen haben, diese aufgelistet. Das App-Panel kann verwendet werden, um die Manifest-Mitglieder zu sehen und sogar zu lernen: in diesem Beispiel erfahren wir, dass um eine App-ID anzugeben, die mit der aktuellen Identität übereinstimmt, das id-Feld auf "/" gesetzt werden soll.

Chrome und Edge bieten auch Fehler und Warnungen, Protokoll-Handler sowie Informationen, um das Manifest und die Icons zu verbessern.

Unsere Web-App hat keine Protokoll-Handler; ein Thema, das in diesem Tutorial nicht behandelt wird. Hätten wir einige eingeschlossen, würden sie sich unter "Protokoll-Handler" finden. Da dieser Abschnitt leer ist, verlinken die Entwicklertools auf weitere Informationen zum Thema.

Das Manifest-Panel umfasst auch Einblicke in den sicheren Bereich für maskierbare Symbole und einen Link zu einem PWA-Bildgenerator. Dieses Tool erstellt über 100 quadratische PNG-Bilder für Android, Apple OSs und Windows sowie ein JSON-Objekt, das alle Bilder und ihre Größen auflistet. Obwohl die erzeugten Bilder möglicherweise nicht Ihren Anforderungen entsprechen, zeigt die Liste der für jedes Betriebssystem erzeugten Bildgrößen die Vielfalt der Einsatzmöglichkeiten von PWAs.

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

Um unsere PWA offline funktionsfähig zu machen, müssen wir einen Service Worker hinzufügen, was wir ohne die Verwendung eines Frameworks tun werden.

• Zurück
• Übersicht: CycleTracker
• Weiter