Erstellen eines benutzerdefinierten PWA-Begrüßungsbildschirms

Wie bereits in unserem PWA-Manifest-Tutorial erwähnt, können Sie mit nur wenigen Codezeilen in Ihrer manifest.json einen einzigartigen Begrüßungsbildschirm für Ihre PWA erstellen. Der Prozess ist nicht übermäßig kompliziert, wie man erwarten würde, und Sie können tatsächlich alles in kürzester Zeit erledigen. Fangen wir gleich an, sollen wir:

Der Fall für Splash-Screens in PWAs

Wenn es nicht konfiguriert ist, werden Benutzer, die Ihre PWA öffnen, standardmäßig mit einem leeren, weißen Bildschirm begrüßt. Dies sollte für sich genommen in Ordnung sein, da auf modernen Geräten die Zeit zum Öffnen von Apps fast augenblicklich ist. Auf langsameren Geräten kann dies jedoch ein Problem sein, da es die anfängliche Wahrnehmung Ihrer App durch den Benutzer ruiniert. In Verbindung mit der Tatsache, dass Geräte mit niedrigeren Spezifikationen und 1 GB RAM immer noch am weitesten verbreitet sind, ist ein einzigartiger Begrüßungsbildschirm, der für Ihre Marke repräsentativ ist, ein Muss.

So erstellen Sie Ihren eigenen Begrüßungsbildschirm

Unter Android ist der Vorgang so schnell wie das Einfügen von drei Codezeilen. Für iOS ist es jedoch eine andere Geschichte, da Sie unterschiedliche Splash-Bildgrößen für unterschiedliche Bildschirmgrößen erstellen müssten.

Für Android

Mach es manuell

Stellen Sie in Ihrer manifest.json -Datei sicher, dass diese drei Eigenschaften: name , background_color und icons richtig konfiguriert sind:

• name : Der Name Ihrer PWA
• background_color : Die Hintergrundfarbe Ihres Begrüßungsbildschirms. Es werden nur gültige CSS-Farbwerte erkannt.
• icons : Ein .png Icon mit einer Mindestgröße von 192×192 px.

So sollte beispielsweise eine richtig konfigurierte manifest.json aussehen. Beachten Sie, dass die icons -Eigenschaft vier verschiedene Größen hat – diese unterschiedlich großen Icons werden bereitgestellt, um die beste Kompatibilität für verschiedene Geräte zu bieten.

 {
    "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"
        }
    ]
}

Nachdem Sie die Eigenschaften (und Ihre manifest.json -Datei) eingerichtet haben, generieren die Browser, die PWA unterstützen (normalerweise Chrome), automatisch unterschiedliche Symbolgrößen für Ihren Begrüßungsbildschirm und zeigen sie entsprechend an.

Ziemlich mühelos, nicht wahr? Wenn Sie uns fragen, denken wir, dass sich die Entwicklungserfahrung so anfühlen sollte.

 Empfohlene Lektüre: PWA-Manifest: Einfaches Erstellen Ihres Web-App-Manifests

Verwenden eines Manifest-Generators

Sie können diesen Prozess mühelos automatisieren, indem Sie unseren Manifest-Generator verwenden. Geben Sie einfach die erforderlichen Informationen ein und unser Generator generiert für Sie eine .zip -Datei, die alle erforderlichen Informationen enthält.

Für iOS

Apple will es den Entwicklern sicherlich nicht leicht machen. Zum Zeitpunkt der Erstellung dieses Artikels wird der Status für die Unterstützung von Web-App-Manifesten immer noch als Teilweise unterstützt aufgeführt – unverändert zwei Jahre nach seinem ersten Erscheinen. Das bedeutet, dass PWAs keine Unterstützung für icons , minimal-ui , fullscreen , theme-color und orientation erhalten.

Glücklicherweise gibt es immer noch einen Ausweg, der darin besteht, das Meta-Tag <apple-touch-startup-image> zu verwenden. Keine ideale Lösung – aber es funktioniert.

 <!-- Splash Screen für iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png">

Mithilfe des Meta-Tags <apple-touch-startup-image> können Sie ein Bild mit fester Auflösung für den Begrüßungsbildschirm Ihrer PWA angeben (z. B. startup-image ). Dieser benutzerdefinierte Begrüßungsbildschirm ist nur mit einer Bildschirmgröße kompatibel, und Sie benötigen viel mehr unterschiedliche Bildgrößen, um die unterschiedlichen Bildschirmgrößen von Apple-Produkten auf dem Markt zu berücksichtigen.

Das bedeutet, dass Sie zwei Startbildschirme für jede Bildschirmgröße erstellen müssen, einen für jede Ausrichtung (Querformat und Hochformat). So sollte unser Code aussehen, wenn wir einige der Geräte auf der Liste abgedeckt haben:

 <!-- iPhone X (1125 Pixel x 2436 Pixel) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1125x2436.png">
<!-- iPhone 8, 7, 6s, 6 (750 x 1334 Pixel) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-750x1334.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242 Pixel x 2208 Pixel) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple -launch-1242x2208.png">
<!-- iPhone 5 (640 x 1136 Pixel) -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-640x1136.png">
<!-- iPad Mini, Air (1536 x 2048 Pixel) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1536x2048.png">
<!-- iPad Pro 10,5" (1668 x 2224 Pixel) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple -launch-1668x2224.png">
<!-- iPad Pro 12,9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(Gerätebreite: 1024px) und (Gerätehöhe: 1366px) und (-webkit-device-pixel-ratio: 2)" href="/apple -launch-2048x2732.png">

Verknüpfen Sie diesen Code im <head> Ihrer index.html , und vergessen Sie nicht, das <meta> -Tag unten einzufügen, um das PWA-Verhalten zu aktivieren, da unser Begrüßungsbildschirm sonst überhaupt nicht funktioniert.

 <meta name="apple-mobile-web-app-fähig" content="ja">

Damit sollten Sie fertig sein. Starten Sie Ihre iOS PWA und Sie können Ihren Begrüßungsbildschirm sehen.

Verwenden eines iOS-Begrüßungsbildschirm-Generators

Natürlich gibt es bessere Möglichkeiten, diesen Prozess zu automatisieren, nämlich die Verwendung von iOS Splash Screen Generator. Mit Ihrem Bild als Quelle generiert der Generator für Sie Bilder unterschiedlicher Größe zusammen mit dem erforderlichen HTML-Code, der in Ihre index.html eingefügt wird.

Fazit

Der Begrüßungsbildschirm ist zwar nicht gerade ein Teil des Onboarding-Erlebnisses, spielt aber dennoch eine wichtige Rolle bei der Schaffung einer positiven Wahrnehmung Ihrer Marke – es ist die niedrig hängende Frucht, die potenziell zu Ergebnissen führen kann, die Sie nicht erwarten würden.

Wir hoffen, dass dieses Tutorial genau Ihr Problem löst. Die Implementierung und Anpassung von PWA kann Kopfschmerzen bereiten, wenn Sie und Ihr Team nicht viel Erfahrung damit haben. Eine professionelle PWA-Entwicklungslösung wie SimiCart kann dabei helfen, es viel einfacher zu machen.