Création d'un écran de démarrage PWA personnalisé

Comme indiqué précédemment dans notre didacticiel sur le manifeste PWA, vous pouvez créer un écran de démarrage unique pour votre PWA avec seulement quelques lignes de code dans votre manifest.json . Le processus n'est pas trop compliqué comme on pourrait s'y attendre, et vous pouvez en fait tout faire en un rien de temps. Allons droit au but, allons-nous :

Le cas des écrans de démarrage dans les PWA

Lorsqu'ils ne sont pas configurés, les utilisateurs qui ouvrent votre PWA sont accueillis par défaut avec un écran blanc vierge. Cela devrait suffire en soi, car sur les appareils modernes, le temps d'ouverture des applications est presque instantané. Cependant, sur les appareils plus lents, cela peut être un problème car cela ruine la perception initiale de l'utilisateur de votre application. Couplé au fait que les appareils moins performants avec 1 Go de RAM sont toujours les plus courants, un écran de démarrage unique représentatif de votre marque est indispensable.

Comment créer votre propre écran de démarrage

Sur Android, le processus est aussi rapide que l'insertion de trois lignes de code. Pour iOS, cependant, c'est une autre histoire car vous devrez créer différentes tailles d'image de démarrage pour différentes tailles d'écran.

Pour Android

Le faire manuellement

Dans votre fichier manifest.json , assurez-vous que ces trois propriétés : name , background_color et icons sont correctement configurées :

• name : Le nom de votre PWA
• background_color : La couleur de fond de votre écran de démarrage. Seules les valeurs de couleur CSS valides sont reconnues.
• icons : Une icône .png d'une taille minimale de 192×192 px.

Par exemple, voici à quoi devrait ressembler un manifest.json correctement configuré. Notez que la propriété des icons a quatre tailles différentes - ces icônes de tailles différentes sont fournies afin de fournir la meilleure compatibilité pour différents appareils.

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "affichage": "plein écran",
    "portée": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "description": "Solutions de commerce électronique de nouvelle génération pour Magento",
    "Icônes": [
        {
            "src": "/icon-192x192.png",
            "tailles": "192x",
            "type": "image/png"
        },
        {
            "src": "/icon-256x256.png",
            "tailles": "256x",
            "type": "image/png"
        },
        {
            "src": "/icon-384x384.png",
            "tailles": "384x",
            "type": "image/png"
        },
        {
            "src": "/icon-512x512.png",
            "tailles": "512x",
            "type": "image/png"
        }
    ]
}

Après avoir terminé la configuration des propriétés (et de votre fichier manifest.json ), les navigateurs prenant en charge PWA (généralement Chrome) généreront automatiquement différentes tailles d'icônes pour votre écran de démarrage et les afficheront en conséquence.

Assez sans effort, n'est-ce pas? Si vous nous demandez, nous pensons que c'est ainsi que l'expérience de développement devrait ressembler.

 Lecture recommandée : Manifeste PWA : Créer votre manifeste d'application Web en toute simplicité

Utilisation d'un générateur de manifeste

Vous pouvez facilement automatiser ce processus en utilisant notre générateur de manifestes . Entrez simplement les informations requises et notre générateur générera pour vous un .zip qui contiendra toutes les informations dont vous auriez besoin.

Pour iOS

Apple ne veut sûrement pas faciliter ce processus pour les développeurs. Au moment d'écrire ces lignes, le statut de la prise en charge du manifeste d'application Web est toujours répertorié comme partiellement pris en charge , inchangé deux ans après sa première apparition. Cela signifie que les PWA ne reçoivent aucun support pour les icons , minimal-ui , fullscreen , theme-color et orientation .

Heureusement, il existe toujours un moyen de contourner cela qui consiste à utiliser la balise méta <apple-touch-startup-image> . Ce n'est pas une solution idéale, mais ça marche.

 <!-- Écran de démarrage pour iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width : 375px) et (device-height : 812px) et (-webkit-device-pixel-ratio : 3)" href="/apple -lancer-1125x2436.png">

En utilisant la balise méta <apple-touch-startup-image> , vous pouvez spécifier une image à résolution fixe pour l'écran de démarrage de votre PWA (c'est-à-dire startup-image ). Cet écran de démarrage personnalisé est compatible avec une seule taille d'écran, et vous aurez besoin de beaucoup plus de tailles d'image différentes pour s'adapter aux différentes tailles d'écran des produits Apple sur le marché.

Cela signifie que vous devrez créer deux écrans de démarrage pour chaque taille d'écran, un pour chaque orientation (paysage et portrait). Voici à quoi devrait ressembler notre code lorsque nous aurons couvert certains des appareils de la liste :

 <!-- iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width : 375px) et (device-height : 812px) et (-webkit-device-pixel-ratio : 3)" href="/apple -lancer-1125x2436.png">
<!-- iPhone 8, 7, 6s, 6 (750px x 1334px) -->
<link rel="apple-touch-startup-image" media="(device-width : 375px) et (device-height : 667px) et (-webkit-device-pixel-ratio : 2)" href="/apple -lancement-750x1334.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width : 414px) et (device-height : 736px) et (-webkit-device-pixel-ratio : 3)" href="/apple -lancer-1242x2208.png">
<!-- iPhone 5 (640px x 1136px) -->
<link rel="apple-touch-startup-image" media="(device-width : 320px) et (device-height : 568px) et (-webkit-device-pixel-ratio : 2)" href="/apple -lancer-640x1136.png">
<!-- iPad Mini, Air (1 536 x 2 048 px) -->
<link rel="apple-touch-startup-image" media="(device-width : 768px) et (device-height : 1024px) et (-webkit-device-pixel-ratio : 2)" href="/apple -lancer-1536x2048.png">
<!-- iPad Pro 10,5" (1 668 pixels x 2 224 pixels) -->
<link rel="apple-touch-startup-image" media="(device-width : 834px) et (device-height : 1112px) et (-webkit-device-pixel-ratio : 2)" href="/apple -lancer-1668x2224.png">
<!-- iPad Pro 12.9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(device-width : 1024px) et (device-height : 1366px) et (-webkit-device-pixel-ratio : 2)" href="/apple -lancer-2048x2732.png">

Liez ce code dans le <head> de votre index.html , et n'oubliez pas d'insérer la <meta> ci-dessous afin d'activer le comportement PWA, sinon notre écran de démarrage ne fonctionnera pas du tout.

 <meta name="apple-mobile-web-app-capable" content="yes">

Avec cela, vous devriez être prêt. Lancez votre PWA iOS et vous pourrez voir votre écran de démarrage.

Utilisation d'un générateur d'écran de démarrage iOS

Bien sûr, il existe de meilleures façons d'automatiser ce processus, qui consiste à utiliser iOS Splash Screen Generator. Avec votre image comme source, le générateur générera pour vous des images de différentes tailles ainsi que le code HTML nécessaire à insérer dans votre index.html .

Conclusion

Bien qu'il ne fasse pas exactement partie de l'expérience d'intégration, l'écran de démarrage joue toujours un rôle important dans la création d'une perception positive de votre marque - c'est le fruit à portée de main qui peut potentiellement apporter des résultats auxquels vous ne vous attendriez pas.

Nous espérons que ce tutoriel résoudra votre problème exact. La mise en œuvre et la personnalisation de PWA peuvent être un casse-tête si vous et votre équipe n'avez pas beaucoup d'expérience avec cela. Une solution de développement PWA professionnelle comme SimiCart peut vous faciliter la tâche.