PWA-Manifest: Einfaches Erstellen Ihres Web-App-Manifests

Ein ordnungsgemäß konfiguriertes Web-App-Manifest ist für den Installationsprozess Ihrer PWA von entscheidender Bedeutung, da der gesamte Prozess ohne es einfach nicht möglich ist. Und überraschenderweise ist es auch nicht so schwer, Ihr Web-App-Manifest richtig zu konfigurieren.

Wofür ist das?

Das Web-App-Manifest ist ein wichtiger Bestandteil Ihrer PWA, da es bestimmt, wie sich Ihre App dem Benutzer auf dem Begrüßungsbildschirm und auf dem Startbildschirm des Benutzers präsentiert. All dies sind wichtige Anfangsphasen, die dazu beitragen, den Eindruck der Benutzer von Ihrer App zu formen, weshalb es für Sie wichtig ist, es richtig zu machen.

Möglichkeiten zum Konfigurieren Ihrer manifest.json

Von Anfang an anfangen

Mit ein wenig Vertrautheit mit dem JSON-Datenformat können Sie ohne großen Aufwand ein eigenes Web-App-Manifest erstellen.

Eine typische manifest.json sollte etwa so aussehen:

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "Anzeige": "Vollbild",
    "Umfang": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "description": "E-Commerce-Lösungen der nächsten Generation für Magento",
    "Symbole": [
        {
            "src": "/icon-192x192.png",
            "Größen": "192x",
            "Typ": "Bild/PNG"
        },
        {
            "src": "/icon-256x256.png",
            "Größen": "256x",
            "Typ": "Bild/PNG"
        },
        {
            "src": "/icon-384x384.png",
            "Größen": "384x",
            "Typ": "Bild/PNG"
        },
        {
            "src": "/icon-512x512.png",
            "Größen": "512x",
            "Typ": "Bild/PNG"
        }
    ]
}

Sie können einige Teile des Codes weglassen, aber es gibt immer noch einige erforderliche Mitglieder, ohne die der Benutzer Ihre PWA nicht installieren kann:

 Name, Kurzname, Symbole, Anzeige, Start-URL

• name : Der Name Ihrer App, der unter dem Symbol Ihrer App auf dem Startbildschirm und an verschiedenen anderen Stellen angezeigt wird. Halten Sie den Wert Ihrer Namenseigenschaft kurz und einfach.

• short-name : Wenn der Wert Ihrer name -Eigenschaft nicht auf den Bildschirm des Benutzers passt, wird der Wert dieser Eigenschaft verwendet. Es wird empfohlen, dass Ihr short-name weniger als 20 Zeichen lang sein sollte. Schießen Sie in der Tat auf 10 Zeichen.

• icons : Die Symbole Ihrer App, die aus mehreren Bildern für verschiedene Betriebssysteme und Geräte bestehen können. Sie können eine Reihe von Symbolen für den Browser definieren, die zum Hinzufügen zum Startbildschirm, Begrüßungsbildschirm usw. verwendet werden.

Zum Beispiel benötigt allein iOS 4 verschiedene Größen für 4 seiner Geräte:

• iPhone: 120 x 120 Pixel & 180 x 180 Pixel
• iPad Pro: 167 x 167 Pixel
• iPad & iPad mini: 152 x 152 Pixel

Selbst Google Chrome benötigt mindestens 2 verschiedene Größen für die volle Nutzbarkeit auf iOS und Android:

• 512 x 512 Pixel
• 192 x 192 Pixel

Damit Ihr Bildsymbol aufgerufen werden kann, wird eine Reihe von Eigenschaften verwendet, nämlich src , type und sizes .

• src : Der Pfad zur Bilddatei des Symbols
• types : der Bilddateityp
• sizes : Breite x Höhe des Bildes in Pixel

 "Symbole" : [ 
    {
       "src": "/imgs/icon152.png",
       "Typ": "Bild/PNG",
       "Größen": "192x192"
    },
    {
       "src": "/imgs/icon215.png",
       "Typ": "Bild/PNG",
       "Größen": "512x512"
    }
]

• display : Gibt an, wie die App angezeigt werden soll. Für ein immersives und App-ähnliches Erlebnis wird empfohlen, dass Sie es auf fullscreen (keine Benutzeroberfläche) einstellen. Es sind jedoch auch Optionen wie standalone , minimal-ui verfügbar, die in Bezug auf die Leistung weniger kostspielig sind, aber auf Kosten des Verlusts der immersiven Erfahrung gehen (Statusleiste wird möglicherweise weiterhin angezeigt).

• start_url : Gibt den Pfad an, von dem aus Ihre Anwendung gestartet wird. Ihr start_url Wert könnte ein einfaches / sein, wenn Ihre Anwendung aus demselben .root-Verzeichnis startet, in dem Ihre manifest.json gespeichert ist.

Optionale Mitglieder

Sich an das Buch zu halten ist eine Sache, aber es gibt immer Raum für Sie, um zu versuchen, besser zu werden. Nachfolgend finden Sie unsere empfohlenen Schlüssel für ein besseres und detaillierteres Web-App-Manifest:

• scope : Beschränkt den Umfang, in dem ein Benutzer gehen kann. Wenn der Benutzer außerhalb des Bereichs navigiert, kehrt er zu einer normalen Webseite in einem Browser-Tab oder -Fenster zurück. Um Ihre Website einzugrenzen, geben Sie einfach ein / oder die vollständige URL Ihrer Website ein.

Hinweise :
– Das Standardverhalten des scope ist das Verzeichnis, aus dem Ihre manifest.json wird.
– Jeder in der Web-App geöffnete Link wird im vorhandenen PWA-Fenster gerendert. Um einen beliebigen Link in einem Browser-Tab zu öffnen, müssen Sie target="_blank" zum <a> -Tag hinzufügen.
– start_url muss im Geltungsbereich liegen.

• background_color : Gibt die Hintergrundfarbe in bestimmten App-Kontexten an. Genauer gesagt kann dieses Feld verwendet werden, um die Hintergrundfarbe für den Begrüßungsbildschirm festzulegen.

• theme_color : Gibt die Designfarbe der UI-Elemente der Web-App an, z. B. der Adressleiste. Die Änderung wird auf die gesamte Website angewendet und tritt erst in Kraft, wenn die Website vom Startbildschirm aus gestartet wird.

Hinweise : Ihre Konfigurationen auf Seitenebene – z. B. das Meta-Tag „theme-color“: <meta name="theme-color" content="#3367D6"> – überschreiben den Wert Ihrer theme_color im Web-App-Manifest.

• description : Dies sollte selbsterklärend sein.

• shortcuts : Definiert Shortcuts zu Seiten innerhalb der Web-App. Auf die App-Verknüpfungen kann zugegriffen werden, indem Sie lange auf das Startsymbol der App auf Android drücken oder mit der rechten Maustaste auf das App-Symbol in der Taskleiste (Windows)/im Dock (macOS) klicken.

 "Abkürzungen": [
  {
    "name": "Benachrichtigungen",
    "url": "/Benutzer/Benachrichtigungen/",
    "description": "News, die Sie verpasst haben"
  },
  {
    "name": "Neue Bestellung erstellen",
    "url": "/erstellen/bestellen"
  },
  {
    "name": "Meine Wunschliste",
    "url": "/Benutzer/Wunschliste"
  }
]

Verwenden eines Web-App-Manifestgenerators

Eine einfachere und mühelosere Möglichkeit, dies zu tun, wäre die Verwendung eines Web-App-Manifest-Generators. Der Generator nimmt Ihre Eingaben auf und generiert auf dieser Grundlage ein voll funktionsfähiges Web-App-Manifest, das unverändert verwendet werden kann.

Verknüpfen Sie Ihre manifest.json

Wenn alles richtig konfiguriert ist, besteht der nächste Schritt darin, in Ihrem HTML-Header auf das Web-App-Manifest zu verweisen.

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

Nach dem Verweis auf das Web-App-Manifest sollten alle unterstützten Browser Ihre manifest.json nun ordnungsgemäß erkennen. Eine vollständige Liste der derzeit unterstützten Browser finden Sie unter CanIUse.

Fazit

Und das war's für ein einfaches Web-App-Manifest. Es sollte keine Zeit in Anspruch nehmen, eine voll funktionsfähige manifest.json zu erstellen. Und nur mit ein paar zusätzlichen Optimierungen kann Ihre Web-App wie jede andere PWA installierbar gemacht werden.