CycleTracker: Manifest und Ikonografie

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 Label neben dem Anwendungssymbol usw.

short_name

Der Name der PWA, der dem Benutzer angezeigt wird, wenn nicht genügend Platz vorhanden ist, um den name anzuzeigen. Es wird als Label für Symbole auf Telefonscreens 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 der Platz begrenzt ist, um den Anwendungsnamen anzuzeigen.

description

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

Schreiben Sie die ersten Zeilen Ihrer Manifest-Datei. Sie können den nachstehenden Text verwenden oder diskretere oder beschreibendere Werte und eine Beschreibung Ihrer Wahl wählen.

Das Erscheinungsbild oder die Präsentation der installierten und Offline-Erfahrungen einer PWA sind im Manifest definiert. Präsentationsmanifest-Mitglieder umfassen start_url und display sowie Mitglieder, mit denen Sie Ihre App-Farben anpassen können, wie z.B. 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, was die PWA als eigenständige Anwendung anzeigt, minimal-ui, ähnlich einem eigenständigen View, aber mit UI-Elementen zur Navigation, und browser, das die App in einer regulären Browseransicht öffnet.

Es gibt auch ein orientation-Mitglied, das die Standardorientierung der PWA als portrait oder landscape definiert. Da unsere App in beiden Orientierungen gut funktioniert, werden wir dieses Mitglied weglassen.

theme_color

Die Standard-Farbe von Betriebssystem- und Browser-UI-Elementen wie z.B. der Statusleiste auf einigen mobilen Erlebnissen und der Anwendungstitelleiste auf Desktop-Betriebssystemen.

background_color

Eine Platzhalterfarbe, die als der Hintergrund der App angezeigt wird, bis das CSS geladen ist. Für einen fließenden Übergang zwischen dem Start der App und dem Laden wird empfohlen, die im App-Design deklarierte <color> als background-color-Farbe der App zu verwenden.

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

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

In unserem CSS ist die background-color: #efe; auf dem body-Element-Selektor eingestellt. Wir verwenden #eeffee, um einen fließenden Übergang vom Platzhalteraussehen zum Laden der App zu gewährleisten.

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

PWA-Symbole helfen Benutzern, Ihre App zu identifizieren, machen sie ansprechender und verbessern die Auffindbarkeit. Das PWA-App-Symbol erscheint auf Startbildschirmen, App-Startern oder in Suchergebnissen von App-Stores. Die Größe des angezeigten Symbols und die Dateianforderungen variieren abhängig von der Anzeige und dem Benutzer. Im Manifest definieren Sie Ihre Bilder.

Im JSON-Objekt des Manifests spezifiziert das icons-Mitglied ein Array aus einem oder mehreren Symbolobjekten für verschiedene Kontexte, jedes mit einem src- und sizes-Mitglied sowie optionalen type- und purpose-Mitgliedern. Jedes Symbolobjekt listet mit src die Quelle einer einzelnen Bilddatei auf. Das sizes-Mitglied liefert eine Liste aus leerzeichen-getrennten Größen, für die dieses spezielle 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 denselben Look and Feel haben, um sicherzustellen, dass Benutzer Ihre PWA sofort erkennen, aber je größer das Symbol, desto mehr Details kann es enthalten. Während alle Bilddateien quadratisch sind, rendern einige Betriebssysteme unterschiedliche Formen, schneiden Abschnitte ab oder "maskieren" das Symbol, um den UI-Vorgaben zu genügen, oder verkleinern und zentrieren das Symbol mit einem Hintergrund, wenn das Symbol nicht maskierbar ist. Die sichere Zone, der Bereich, der in Ordnung gerendert wird, wenn das Symbol als Kreis maskiert ist, ist die innere 80 % der Bilddatei. Symbole werden als sicher markiert, um maskiert zu werden, dank des purpose-Mitglieds, das, wenn auf maskable gesetzt, das Symbol als anpassbar definiert.

In Safari, und daher auf iOS und iPadOS, werden, wenn Sie das nicht-standardisierte apple-touch-icon im HTML-Dokument in den <head> über <link> einfügen, diese den im Manifest deklarierten Symbolen vorgezogen.

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

In Anlehnung an die Wörter "cycle" und "period" im CycleTracker und die gewählte grüne Farbgebung könnten unsere Symbolbilder allesamt hellgrüne Quadrate mit einem grünen Kreis sein. Unser kleinstes Symbol, circle.ico, eine Symboldatei, die nur einen Kreis repräsentiert - das Satzzeichen für Periode und dem App-Thema entsprechend - mit den Zwischenbildern circle.svg, tire.svg und wheel.svg, die immer mehr Details von einem einfachen Kreis zu einem detaillierten Rad mit Speichen und Schatten hinzufügen. Das Entwerfen von Symbolen liegt jedoch außerhalb des Umfangs 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%;
}

Sie haben nun eine voll funktionsfähige Manifestdatei. Es ist an der Zeit, sie zu speichern und in unsere HTML-Datei einzubinden.

Die Dateiendung des Manifests kann die spezierungegemäße Empfehlung .webappmanifest sein. Da es jedoch eine JSON-Datei ist, wird sie am häufigsten mit .json gespeichert, das von Browsern unterstützt wird.

PWAs erfordern, dass eine Manifestdatei mit dem HTML-Dokument der App verlinkt ist. Wir haben eine voll funktionsfähige App, aber sie ist noch keine PWA, da sie noch nicht mit unserer externen Manifest-JSON-Datei verlinkt ist. Um die externe JSON-Ressource einzuschließen, verwenden wir das <link>-Element mit dem rel="manifest"-Attribut 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 Stylesheets zu verknüpfen und bei PWAs die erforderliche Manifestdatei, dient aber daneben auch der Einrichtung von Seiten-Icons (sowohl als "Favicon"-Symbole als auch Symbole für den Home-Bildschirm und Apps auf mobilen Geräten) unter anderem.

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

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

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

Optional können Sie auch zu einem Shortcut-Icon von Ihrem HTML verlinken.

Der <head> von index.html könnte jetzt 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 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 Seite als PWA erkennen und einige werden sie zur Installation auffordern. Um unsere PWA offline funktionsfähig zu machen, müssen wir noch einen Service Worker hinzufügen.

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

Das App-Manifest-Fenster bietet den Namen der Manifestdatei als Link und Abschnitte zur Identität, Präsentation und Ikonografie.

Unterstützte Manifest-Mitglieder werden angezeigt, zusammen mit allen enthaltenen Werten. In diesem Screenshot, obwohl wir die orientation- oder id-Mitglieder nicht aufgenommen haben, sind sie aufgelistet. 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 anzugeben, die der aktuellen Identität entspricht, das id-Feld auf "/" gesetzt werden soll.

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

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

Das Manifest-Panel enthält auch Einblicke in den sicheren Bereich für maskierbare Symbole und einen Link zu einem PWA-Bilderzeuger. 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. Die erzeugten Bilder entsprechen möglicherweise nicht Ihren Anforderungen, aber die Liste der Bildgrößen, die für jedes Betriebssystem erzeugt wurden, zeigt die Vielfalt, wo und wie PWAs bereitgestellt werden können.

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

Um unsere PWA offline arbeitsfähig zu machen, müssen wir einen Service Worker hinzufügen, den wir ohne die Nutzung eines Frameworks umsetzen werden.

• Zurück
• Übersicht: CycleTracker
• Weiter