Tworzenie niestandardowego ekranu powitalnego PWA

Jak wspomniano wcześniej w naszym samouczku dotyczącym manifestu PWA, możesz utworzyć unikalny ekran powitalny dla swojego PWA za pomocą zaledwie kilku wierszy kodu w pliku manifest.json . Proces nie jest zbyt skomplikowany, jak można by się spodziewać, i możesz mieć wszystko zrobione w mgnieniu oka. Przejdźmy od razu, czy powinniśmy:

Przypadek ekranów powitalnych w PWA

W przypadku braku konfiguracji użytkownicy otwierający PWA są domyślnie witani pustym, białym ekranem. Samo to powinno wystarczyć, ponieważ na nowoczesnych urządzeniach czas do otwarcia aplikacji jest prawie natychmiastowy. Jednak na wolniejszych urządzeniach może to stanowić problem, ponieważ rujnuje początkowe postrzeganie Twojej aplikacji przez użytkownika. W połączeniu z faktem, że urządzenia o niższej specyfikacji z 1 GB pamięci RAM są nadal najbardziej popularne, unikalny ekran powitalny, który jest reprezentatywny dla Twojej marki, jest koniecznością.

Jak stworzyć własny ekran powitalny

W systemie Android proces jest tak szybki, jak wpisanie trzech wierszy kodu. Jednak w przypadku iOS jest to inna historia, ponieważ trzeba by tworzyć różne rozmiary obrazu powitalnego dla różnych rozmiarów ekranu.

Dla Android

Robię to ręcznie

W pliku manifest.json upewnij się, że te trzy właściwości: name , background_color i icons są poprawnie skonfigurowane:

• name : nazwa twojego PWA
• background_color : kolor tła ekranu powitalnego. Rozpoznawane są tylko prawidłowe wartości kolorów CSS.
• icons : ikona .png o minimalnym rozmiarze 192×192 px.

Na przykład tak powinien wyglądać prawidłowo skonfigurowany plik manifest.json . Zwróć uwagę, że właściwość icons ma cztery różne rozmiary — te ikony o różnych rozmiarach są dostarczane w celu zapewnienia najlepszej zgodności dla różnych urządzeń.

 {
    "theme_color": "#f69435",
    "background_color": "#ffffff",
    "wyświetlacz": "pełny ekran",
    "zakres": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "short_name": "SimiCart",
    "description": "Rozwiązania e-commerce nowej generacji dla Magento",
    "ikony": [
        {
            "src": "/icon-192x192.png",
            "rozmiary": "192x",
            "typ": "obraz/png"
        },
        {
            "src": "/icon-256x256.png",
            "rozmiary": "256x",
            "typ": "obraz/png"
        },
        {
            "src": "/icon-384x384.png",
            "rozmiary": "384x",
            "typ": "obraz/png"
        },
        {
            "src": "/icon-512x512.png",
            "rozmiary": "512x",
            "typ": "obraz/png"
        }
    ]
}

Po zakończeniu konfigurowania właściwości (i pliku manifest.json ), przeglądarki obsługujące PWA (zwykle Chrome) automatycznie wygenerują różne rozmiary ikon dla ekranu powitalnego i odpowiednio je wyświetlą.

Całkiem bez wysiłku, prawda? Jeśli nas o to zapytasz, uważamy, że tak powinno wyglądać rozwijające się doświadczenie.

 Zalecana literatura: Manifest PWA: Tworzenie aplikacji internetowej Manifestuj w prosty sposób

Korzystanie z generatora manifestów

Możesz bez wysiłku zautomatyzować ten proces, korzystając z naszego Generatora manifestów . Wystarczy wpisać wymagane informacje, a nasz generator wygeneruje dla Ciebie plik .zip , który będzie zawierał wszystkie potrzebne informacje.

Dla iOS

Apple z pewnością nie chce ułatwiać tego procesu programistom. W chwili pisania tego tekstu status obsługi Web App Manifest jest nadal wymieniony jako Częściowo Obsługiwany — niezmieniony dwa lata po jego pierwszym pojawieniu się. Oznacza to, że aplikacje PWA nie obsługują icons , minimal-ui użytkownika , fullscreen , theme-color i orientation .

Na szczęście wciąż można to obejść, używając metatagu <apple-touch-startup-image> . Nie jest to idealne rozwiązanie — ale działa.

 <!-- Ekran powitalny dla iPhone'a 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 -uruchom-1125x2436.png">

Używając metatagu <apple-touch-startup-image> , możesz określić obraz o stałej rozdzielczości dla ekranu powitalnego aplikacji PWA (tj. startup-image ). Ten niestandardowy ekran powitalny jest zgodny tylko z jednym rozmiarem ekranu i będziesz potrzebować znacznie więcej różnych rozmiarów obrazu, aby dostosować się do różnych rozmiarów ekranu produktów Apple dostępnych na rynku.

Oznacza to, że musisz utworzyć dwa ekrany powitalne dla każdego rozmiaru ekranu, po jednym dla każdej orientacji (pozioma i pionowa). Tak powinien wyglądać nasz kod, gdy omówiliśmy niektóre urządzenia z listy:

 <!-- iPhone X (1125 pikseli x 2436 pikseli) -->
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)" href="/apple -uruchom-1125x2436.png">
<!-- iPhone 8, 7, 6s, 6 (750 pikseli x 1334 pikseli) -->
<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 (1242px x 2208px) -->
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3)" href="/apple -uruchom-1242x2208.png">
<!-- iPhone 5 (640 pikseli x 1136 pikseli) -->
<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 pikseli x 2048 pikseli) -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2)" href="/apple -uruchom-1536x2048.png">
<!-- iPad Pro 10,5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2)" href="/apple -uruchom-1668x2224.png">
<!-- iPad Pro 12,9" (2048 pikseli x 2732 pikseli) -->
<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2)" href="/apple -Launch-2048x2732.png">

Połącz ten kod w <head> swojego index.html i nie zapomnij wstawić poniżej tagu <meta> , aby włączyć zachowanie PWA, w przeciwnym razie nasz ekran powitalny w ogóle nie będzie działał.

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

Dzięki temu powinieneś być gotowy. Uruchom swoje PWA na iOS, a zobaczysz swój ekran powitalny.

Korzystanie z generatora ekranu powitalnego iOS

Oczywiście istnieją lepsze sposoby na zautomatyzowanie tego procesu, czyli użycie generatora ekranu powitalnego iOS. Mając obraz jako źródło, generator wygeneruje dla Ciebie obrazy o różnych rozmiarach wraz z niezbędnym kodem HTML, który należy wstawić do pliku index.html .

Wniosek

Ekran powitalny, choć nie jest częścią procesu onboardingowego, nadal odgrywa ważną rolę w tworzeniu pozytywnego postrzegania Twojej marki — jest to nisko wiszący owoc, który może potencjalnie przynieść rezultaty, których nie oczekiwałbyś.

Mamy nadzieję, że ten samouczek rozwiąże Twój dokładny problem. Wdrażanie i dostosowywanie PWA może być problemem, jeśli Ty i Twój zespół nie macie z tym dużego doświadczenia. Profesjonalne rozwiązanie programistyczne PWA, takie jak SimiCart, może to znacznie ułatwić.