Crearea unui ecran personalizat PWA Splash

După cum sa menționat anterior în tutorialul nostru de manifest PWA, puteți crea un ecran de introducere unic pentru PWA cu doar câteva linii de cod în interiorul manifest.json . Procesul nu este prea complicat așa cum te-ai aștepta și, de fapt, poți avea totul făcut în cel mai scurt timp. Să intrăm direct în asta, să:

Cazul pentru ecranele de splash în PWA

Când sunt neconfigurați, utilizatorii care vă deschid PWA sunt implicit întâmpinați cu un ecran gol, alb. Acest lucru ar trebui să fie bine singur, deoarece pe dispozitivele moderne, timpul până la deschiderea aplicațiilor este aproape instantaneu. Cu toate acestea, pe dispozitivele mai lente, aceasta poate fi o problemă, deoarece distruge percepția inițială a utilizatorului asupra aplicației dvs. Împreună cu faptul că dispozitivele cu specificații inferioare cu 1 GB de RAM sunt încă cele mai comune, un ecran de splash unic care este reprezentativ pentru marca dvs. este o necesitate.

Cum să-ți creezi propriul ecran de splash

Pe Android, procesul este la fel de rapid ca introducerea a trei linii de cod. Pentru iOS, totuși, este o poveste diferită, deoarece ar trebui să faceți diferite dimensiuni de imagine splash pentru diferite dimensiuni de ecran.

Pentru Android

Făcând-o manual

În fișierul manifest.json , asigurați-vă că aceste trei proprietăți: name , background_color și icons sunt configurate corect:

• name : numele PWA
• background_color : culoarea de fundal a ecranului dvs. de întâmpinare. Sunt recunoscute doar valorile de culoare CSS valide.
• icons : o pictogramă .png cu o dimensiune minimă de 192×192 px.

De exemplu, iată cum ar trebui să arate un manifest.json configurat corespunzător. Rețineți că proprietatea icons are patru dimensiuni diferite - aceste pictograme de dimensiuni diferite sunt furnizate pentru a oferi cea mai bună compatibilitate pentru diferite dispozitive.

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "display": "ecran complet",
    "domeniu": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "description": "Soluții de comerț electronic de generație următoare pentru Magento",
    „icoane”: [
        {
            "src": "/icon-192x192.png",
            "dimensiuni": "192x",
            "type": "imagine/png"
        },
        {
            "src": "/icon-256x256.png",
            "dimensiuni": "256x",
            "type": "imagine/png"
        },
        {
            "src": "/icon-384x384.png",
            "dimensiuni": "384x",
            "type": "imagine/png"
        },
        {
            "src": "/icon-512x512.png",
            "dimensiuni": "512x",
            "type": "imagine/png"
        }
    ]
}

După ce ați terminat de configurat proprietățile (și fișierul manifest.json ), browserele care acceptă PWA (de obicei Chrome) vor genera automat diferite dimensiuni de pictogramă pentru ecranul dvs. de introducere și le vor afișa în consecință.

Destul de fără efort, nu-i așa? Dacă ne întrebați, credem că așa ar trebui să se simtă experiența în dezvoltare.

 Lectură recomandată: PWA Manifest: Crearea aplicației dvs. web Manifest the Easy Way

Utilizarea unui generator de manifeste

Puteți automatiza fără efort acest proces utilizând Generatorul nostru de manifeste . Pur și simplu introduceți informațiile necesare și generatorul nostru va genera pentru dvs. un .zip care va conține toate informațiile de care aveți nevoie.

Pentru iOS

Apple cu siguranță nu vrea să faciliteze acest proces pentru dezvoltatori. La momentul scrierii acestui articol, starea suportului pentru Web App Manifest este încă listată ca Parțial acceptată - neschimbată la doi ani de la prima apariție. Aceasta înseamnă că PWA-urile nu primesc suport pentru icons , interfață de utilizare minimal-ui , fullscreen , theme-color și orientation .

Din fericire, există încă o modalitate de a evita acest lucru, care este utilizarea metaetichetei <apple-touch-startup-image> . Nu este o soluție ideală, dar funcționează.

 <!-- Ecran Splash pentru iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) și (device-height: 812px) și (-webkit-device-pixel-ratio: 3)" href="/apple -lansare-1125x2436.png">

Folosind metaeticheta <apple-touch-startup-image> , puteți specifica o imagine cu rezoluție fixă ​​pentru ecranul de deschidere al PWA (adică startup-image ). Acest ecran de splash personalizat este compatibil doar cu o singură dimensiune a ecranului și veți avea nevoie de mult mai multe dimensiuni de imagini diferite pentru a putea acomoda diferitele dimensiuni de ecran ale produselor Apple de pe piață.

Acest lucru înseamnă că va trebui să creați două ecrane pentru fiecare dimensiune de ecran, câte unul pentru fiecare orientare (peisaj și portret). Iată cum ar trebui să arate codul nostru când am acoperit unele dintre dispozitivele de pe listă:

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

Conectați acest cod în <head> index.html și nu uitați să inserați eticheta <meta> de mai jos pentru a activa comportamentul PWA, altfel ecranul nostru de deschidere nu va funcționa deloc.

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

Cu asta, ar trebui să fii gata. Lansați PWA iOS și veți putea să vă vedeți ecranul de deschidere.

Utilizarea unui generator de ecran de splash iOS

Desigur, există modalități mai bune de a automatiza acest proces, care este prin utilizarea iOS Splash Screen Generator. Având imaginea dvs. ca sursă, generatorul va genera pentru dvs. imagini de diferite dimensiuni, împreună cu codul HTML necesar pentru a fi inserat în index.html .

Concluzie

Deși nu face parte exact din experiența de integrare, ecranul de splash joacă totuși un rol important în crearea unei percepții pozitive asupra mărcii dvs. - este fructul care poate aduce rezultate la care nu v-ați aștepta.

Sperăm că acest tutorial vă rezolvă problema exactă. Implementarea și personalizarea PWA poate fi o bătaie de cap dacă tu și echipa ta nu aveți prea multă experiență cu el. O soluție profesională de dezvoltare PWA precum SimiCart vă poate ajuta să o faceți mult mai ușoară.