Creazione di una schermata iniziale PWA personalizzata

Come affermato in precedenza nel nostro tutorial sul manifest PWA, puoi creare una schermata iniziale univoca per la tua PWA con poche righe di codice all'interno del tuo manifest.json . Il processo non è eccessivamente complicato come ci si aspetterebbe e puoi effettivamente fare tutto in un attimo. Entriamo subito, dovremmo:

Il caso delle schermate iniziali nelle PWA

Quando non sono configurati, gli utenti che aprono la tua PWA vengono accolti per impostazione predefinita con uno schermo bianco vuoto. Questo dovrebbe andare bene da solo, poiché sui dispositivi moderni, il tempo per aprire le app è quasi istantaneo. Tuttavia, sui dispositivi più lenti, questo può essere un problema poiché rovina la percezione iniziale della tua app da parte dell'utente. Insieme al fatto che i dispositivi con specifiche inferiori con 1 GB di RAM sono ancora i più comuni, è d'obbligo una schermata iniziale unica che sia rappresentativa del tuo marchio.

Come creare la tua schermata iniziale

Su Android, il processo è veloce come inserire tre righe di codice. Per iOS, tuttavia, è una storia diversa in quanto dovresti creare diverse dimensioni dell'immagine splash per diverse dimensioni dello schermo.

Per Android

Facendolo manualmente

Nel tuo file manifest.json , assicurati che queste tre proprietà: name , background_color e icons siano configurate correttamente:

• name : il nome della tua PWA
• background_color : il colore di sfondo della schermata iniziale. Vengono riconosciuti solo valori di colore CSS validi.
• icons : un'icona .png con una dimensione minima di 192×192 px.

Ad esempio, ecco come dovrebbe apparire un manifest.json correttamente configurato. Nota come la proprietà delle icons ha quattro dimensioni diverse: queste icone di dimensioni diverse vengono fornite per fornire la migliore compatibilità per dispositivi diversi.

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "display": "schermo intero",
    "scopo": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "description": "Soluzioni eCommerce di nuova generazione per Magento",
    "icone": [
        {
            "src": "/icon-192x192.png",
            "taglie": "192x",
            "tipo": "immagine/png"
        },
        {
            "src": "/icon-256x256.png",
            "taglie": "256x",
            "tipo": "immagine/png"
        },
        {
            "src": "/icon-384x384.png",
            "dimensioni": "384x",
            "tipo": "immagine/png"
        },
        {
            "src": "/icon-512x512.png",
            "taglie": "512x",
            "tipo": "immagine/png"
        }
    ]
}

Dopo aver terminato la configurazione delle proprietà (e del file manifest.json ), i browser che supportano PWA (in genere Chrome) genereranno automaticamente icone di dimensioni diverse per la schermata iniziale e le visualizzeranno di conseguenza.

Abbastanza facile, vero? Se ce lo chiedi, pensiamo che sia così che dovrebbe essere l'esperienza di sviluppo.

 Letture consigliate: Manifesto PWA: Creare la tua app Web in modo semplice

Utilizzo di un generatore di manifesti

Puoi automatizzare facilmente questo processo utilizzando il nostro generatore di manifesti . Inserisci semplicemente le informazioni richieste e il nostro generatore genererà per te un .zip che conterrà tutte le informazioni di cui avresti bisogno.

Per iOS

Apple sicuramente non vuole rendere questo processo facile per gli sviluppatori. Al momento della stesura di questo, lo stato del supporto per il manifesto dell'app Web è ancora elencato come parzialmente supportato , invariato due anni dopo la sua prima apparizione. Ciò significa che le PWA non ricevono supporto per icons , minimal-ui , fullscreen , theme-color e orientation .

Fortunatamente, c'è ancora un modo per aggirare questo problema che consiste nell'usare il meta tag <apple-touch-startup-image> . Non è una soluzione ideale, ma funziona.

 <!-- Schermata iniziale per iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) e (device-height: 812px) e (-webkit-device-pixel-ratio: 3)" href="/apple -lancio-1125x2436.png">

Utilizzando il meta tag <apple-touch-startup-image> , puoi specificare un'immagine a risoluzione fissa per la schermata iniziale della tua PWA (es. startup-image ). Questa schermata iniziale personalizzata è compatibile con una sola dimensione dello schermo e avrai bisogno di molte più dimensioni dell'immagine diverse per adattarsi alle diverse dimensioni dello schermo dei prodotti Apple sul mercato.

Ciò significa che dovrai creare due schermate iniziali per ogni dimensione dello schermo, una per ogni orientamento (orizzontale e verticale). Ecco come dovrebbe apparire il nostro codice dopo aver coperto alcuni dei dispositivi nell'elenco:

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

Collega questo codice nel tuo index.html 's <head> e non dimenticare di inserire il tag <meta> di seguito per abilitare il comportamento PWA, altrimenti la nostra schermata iniziale non funzionerà affatto.

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

Con questo, dovresti essere tutto pronto. Avvia la tua PWA iOS e sarai in grado di vedere la tua schermata iniziale.

Utilizzo di un generatore di splash screen per iOS

Naturalmente, ci sono modi migliori per automatizzare questo processo, ovvero utilizzando iOS Splash Screen Generator. Con la tua immagine come fonte, il generatore genererà per te immagini di dimensioni diverse insieme al codice HTML necessario da inserire nel tuo index.html .

Conclusione

Sebbene non faccia esattamente parte dell'esperienza di onboarding, la schermata iniziale gioca ancora un ruolo importante nella creazione di una percezione positiva del tuo marchio: è il frutto a basso impatto che può potenzialmente portare a risultati che non ti aspetteresti.

Ci auguriamo che questo tutorial risolva il tuo problema esatto. L'implementazione e la personalizzazione di PWA può essere un mal di testa se tu e il tuo team non avete molta esperienza con esso. Una soluzione di sviluppo PWA professionale come SimiCart può aiutare a renderlo molto più semplice.