Ulepszenia

Istnieje wiele ulepszeń, które mogą zwiększyć liczbę konwersji i wykorzystanie Twojej aplikacji PWA.

Skróty do aplikacji

Skróty do aplikacji to statyczna lista precyzyjnych linków do Twojej aplikacji PWA. Są one zapisane w pliku manifestu. Specyfikacja pliku manifestu aplikacji internetowej. Pozwala zdefiniować listę skrótów do różnych części lub funkcji PWA. Przyspieszają one nawigację do często używanych sekcji.

Skróty do aplikacji są dostępne w większości systemów operacyjnych na komputerach oraz w Androidzie z WebAPK. Pojawiają się w menu kontekstowym na ikonie aplikacji na ekranie głównym, w Docku lub na pasku zadań, tak jak na ilustracji:

Aby uzyskać dostęp do tego menu, użytkownicy muszą kliknąć prawym przyciskiem lub przytrzymać ikonę PWA.

Uwaga: skróty do aplikacji są dostępne tylko wtedy, gdy użytkownik zainstaluje Twoją progresywną aplikację internetową.

.

Ostrzeżenie: gdy użytkownik zainstaluje Twoją aplikację PWA, nie możesz dodawać ani usuwać skrótów, dopóki nie zaktualizujesz pliku manifestu na serwerze i nie uruchomi się algorytm aktualizacji.

Skróty są zdefiniowane w elemencie shortcuts pliku manifestu. Pobiera ona tablicę elementów o tych właściwościach:

name

Tekst, który będzie wyświetlany użytkownikowi, zwykle w menu kontekstowym.

url

Adres URL, który powinien wczytać PWA, gdy użytkownik uruchomi go za pomocą tego skrótu. Powinien to być URL w zakresie aplikacji PWA i powinien zawierać precyzyjny link do funkcji opisywanej w name lub short_name.

short_name

(Opcjonalnie) Krótsza nazwa używana, gdy nie ma wystarczająco dużo miejsca na wyświetlenie pełnej wartości pola name.

description

(Opcjonalnie) Opis działania tego skrótu

icons

(Opcjonalnie) Tablica obiektów ikon z polami src, type, sizes i opcjonalnymi purpose opisującymi obrazy, które mają reprezentować skrót

Skróty do aplikacji należy traktować z najwyższą starannością. Oznacza to, że nie możesz polegać na tych skrótach, aby były spójnie wyświetlane, a nawet jeśli się pojawią, nie wiesz, ile skrótów pojawi się w wyszukiwarce, ani czy platforma zignoruje ikony według uznania przeglądarek. Szczegółowe omówienie poszczególnych platform jest poza zakresem, ale poniżej masz już wyobrażenie o tym, jak działa ona na Androidzie i na komputerze. Najlepszym sposobem na poradzenie sobie z tą niepewnością jest uporządkowanie elementów według priorytetu.

Uwaga: Chrome i Edge na komputerze renderują pierwsze 10 elementów, a Chrome na Androidzie renderuje tylko 3 pierwsze skróty z listy pliku manifestu, więc lepiej porządkować je według priorytetu. Chrome na Androidzie zapewnia też dostęp do sekcji „Informacje o aplikacji” i „Ustawienia witryny”, w menu za listą niestandardową.

.

Uwaga: jeśli publikujesz PWA w katalogach i sklepach aplikacji, możesz przekonwertować skróty w pliku manifestu na implementacje platformy za pomocą interfejsów API przeznaczonych dla poszczególnych systemów operacyjnych, takich jak szybkie działania na iOS i skróty na Androidzie. BubbleWrap obsługuje skróty do aplikacji na Androida i ChromeOS oraz narzędzia PWA Builder na Androida, ChromeOS, iOS i iPadOS.

Poniższy przykładowy kod zawiera definicje różnych skrótów do aplikacji, które możesz wypróbować, jeśli zainstalujesz aplikację na urządzeniu z Androidem za pomocą Chrome lub na komputerze z Edge lub Chrome na komputerze.

iOS i iPadOS

Podczas publikowania PWA możesz skorzystać z pewnych ulepszeń, które mogą poprawić wygodę użytkowników Safari na urządzeniach z iOS/iPadOS.

Ostrzeżenie: jak wspominaliśmy w poprzednich rozdziałach, aplikacje PWA na iOS i iPadOS można instalować tylko w Safari. w innych przeglądarkach nie może jej zainstalować na ekranie głównym.

Ekrany powitalne

Jak widać w rozdziale dotyczącym pliku manifestu aplikacji internetowej, Android automatycznie tworzy ekrany powitalne na podstawie wartości w pliku manifestu. Inaczej jest w przypadku systemów iOS i iPadOS. Na takich urządzeniach ekrany powitalne w kodzie HTML należy zdefiniować jako obrazy statyczne przy użyciu elementów <link>.

Na urządzeniach Apple obrazy te są nazywane obrazami startowymi i korzystają z właściwości rel z wartością apple-touch-startup-image, jak w tym przykładzie:

<link rel="apple-touch-startup-image" href="ios-startup.png">

Wyzwanie polega na tym, że obraz startowy musi mieć dokładnie ten rozmiar okna, jaki będzie miała Twoja aplikacja PWA po otwarciu. W związku z tym poszczególne urządzenia z iOS i iPadOS wymagają różnych obrazów. Należy uwzględnić inne sytuacje, takie jak otwarcie aplikacji w orientacji poziomej lub pionowej oraz renderowanie PWA w trybie wielozadaniowym (na przykład 1/3, 1/2 lub 2/3 ekranu).

Aktualną listę rozmiarów ekranu z systemami iOS i iPadOS znajdziesz w wytycznych dotyczących interfejsu ludzkiego firmy Apple.

Różne wersje obrazu startowego można ustawić za pomocą zapytania o media w atrybucie media:

<link rel="apple-touch-startup-image" href="ios-startup.png"
      media="orientation: portrait">
<link rel="apple-touch-startup-image" href="ios-startup-landscape.png"
      media="orientation: landscape">

Ostrzeżenie: jeśli zechcesz udostępnić wszystkie możliwe opcje łączące definicje ekranu, orientacje i tryb wielozadaniowy, otrzymasz ponad 25 różnych obrazów do utworzenia i połączenia w kodzie HTML. Jeśli nie udostępnisz obrazu startowego w kontekście systemu iOS lub iPadOS, w animacji początkowej i podczas wczytywania aplikacji PWA będzie wyświetlany biały ekran.

Wzorce projektowe dla obrazów startowych iOS

Definiowanie obrazów startowych to ciężka praca, dlatego mamy kilka narzędzi do automatycznego ich generowania i konfigurowania:

• Generacja statyczna integruje się z systemem kompilacji, tworzy wszystkie statyczne obrazy w formacie PNG i przekazuje kod HTML z elementami <link> do wstawienia w dokumencie. Przykładem może być Generator zasobów PWA.
• Generator po stronie klienta, narzędzie JavaScript, które może umieścić jedną lub więcej wersji obrazu startowego w formacie base64 we wstrzykniętych elementach <link> w zależności od typu bieżącego urządzenia i rozmiaru ekranu. Możesz użyć obszaru roboczego w pamięci, wyrenderować obraz i przekonwertować go na identyfikator URI data: za pomocą pliku PNG. Biblioteka PWA Compat to łatwa w użyciu biblioteka po stronie klienta, która pozwala skopiować typowy ekran uruchamiania Androida.

Wykrywanie PWA na platformach mobilnych Apple

Mimo że zalecamy stosowanie progresywnego ulepszania i wykrywania funkcji w swojej aplikacji PWA, w niektórych przypadkach może być konieczne sprawdzenie, czy użytkownik korzysta z tej aplikacji na platformach mobilnych Apple. Jest tak na przykład wtedy, gdy chcesz udostępnić instrukcje instalacji lub dodać linki do aplikacji działających na określonych platformach, które są dostępne tylko na iOS.

Aby uniknąć odczytywania ciągu znaków klienta użytkownika, sprawdź właściwość standalone obiektu navigator. Jest to właściwość niestandardowa, z której można korzystać tylko w mechanizmie WebKit w systemach iOS i iPadOS.

• Jeśli navigator.standalone ma wartość undefined, oznacza to, że użytkownik nie korzysta z urządzenia z iOS ani iPadOS.
• Jeśli navigator.standalone ma wartość false, oznacza to, że użytkownik otworzył PWA w przeglądarce i z niej korzysta.
• Jeśli navigator.standalone ma wartość true, oznacza to, że użytkownik otworzył progresywną aplikację internetową na ekranie głównym i pobiera ją samodzielną aplikację.

Obsługa pełnego ekranu

W przeglądarce Safari na urządzeniach z iOS i iPadach tryb wyświetlania ikony PWA jest obsługiwany tylko przez display: standalone. Mimo że protokół display: fullscreen nie jest obsługiwany na urządzeniach z Androidem, można użyć niestandardowego metatagu, aby aplikacja PWA przechodziła w tryb pełnoekranowy.

Na następnym obrazie po lewej widać domyślny, samodzielny projekt z kolorem motywu, a po prawej – progresywna aplikacja internetowa z pełnoekranowym trybem iOS, który umożliwia renderowanie treści za paskiem stanu.

Jeśli dodasz poniższy tag do kodu HTML, Twoja aplikacja PWA na iOS i iPadOS przejdzie w tryb pełnoekranowy, ale będzie się różnił od Androida.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

W tym trybie pasek stanu urządzenia (u góry, na którym widać zegar, poziom baterii i ikony powiadomień) jest nadal widoczny, ale wyświetla się na przezroczystym tle.

Ostrzeżenie: w tym trybie kolor motywu jest ignorowany, a pasek powiadomień jest renderowany na przezroczystym tle. Poza tym piksel aplikacji ([0, 0]) to teraz [0, 0] piksel ekranu fizycznego, a nie obszar za bezpiecznym obszarem.

Podczas korzystania z tego trybu zachowaj ostrożność podczas projektowania, ponieważ system operacyjny zawsze renderuje ikony na biało, dlatego do tła ekranu należy zawsze kontrastować z jasnym obrazem. Pamiętaj też, by używać zmiennych środowiskowych CSS do renderowania treści w bezpiecznym obszarze, jak widać w rozdziale na temat projektowania aplikacji.

Niezawodność instalacji

Safari w systemach iOS i iPadOS w wersjach starszych niż 15.4 wczytuje plik manifestu z sieci tylko wtedy, gdy użytkownik otworzy arkusz udostępniania (za pomocą ikony udostępniania w przeglądarce), a nie podczas wczytywania strony. Dlatego do tego momentu Safari nie sprawdza, czy Twoja witryna jest PWA. Może to spowodować, że nie uda się wczytać pliku manifestu lub zajmie to zbyt dużo czasu. Safari go zignoruje.

Gdy Safari nie może wczytać pliku manifestu na czas, naciskając „Add to Home Screen” (Dodaj do ekranu głównego). umieszcza ikonę na ekranie głównym, ale nie zapewnia działania aplikacji; to tylko skrót do karty Safari.

Ostrzeżenie: jeśli Safari nie będzie w stanie wczytać pliku manifestu, przeglądarka sprawdzi, czy aplikacja PWA nie zawiera wycofanych metatagów, takich jak apple-mobile-web-app-capable. Nie należy używać tych metatagów. Umożliwiają korzystanie z aplikacji na ekranie głównym bez niezbędnych atrybutów, takich jak zgodność z atrybutami start_url lub scope, co pogarsza działanie aplikacji.

Zasoby

• Generator zasobów PWA
• Szybkie wykonywanie zadań dzięki skrótom do aplikacji
• Biblioteka PWA Compat
• Definiowanie skrótów do aplikacji