Istnieje wiele ulepszeń, które mogą zwiększyć liczbę konwersji i użytkowników aplikacji internetowej.
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. Umożliwia zdefiniowanie listy skrótów do różnych części lub funkcji w PWA, które przyspieszają nawigację do często używanych sekcji.
Skróty do aplikacji są dostępne w większości systemów operacyjnych dla komputerów i na Androidzie z WebAPK. Pojawiają się w menu kontekstowym ikony aplikacji na ekranie głównym, docku lub pasku aplikacji, jak na poniższym obrazku:
Aby uzyskać dostęp do tego menu, użytkownicy muszą kliknąć prawym przyciskiem lub przytrzymać ikonę PWA.
Skróty są definiowane w elemencie shortcuts
w pliku manifestu. Funkcja ta przyjmuje 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 być ładowany przez PWA, gdy użytkownik uruchomi aplikację z poziomu tego skrótu. Powinien to być URL w zakresie aplikacji PWA i powinien zawierać precyzyjny link do funkcji opisywanej w
name
lubshort_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 opcjonalnymipurpose
opisującymi obrazy, które mają reprezentować skrót
Skróty do aplikacji należy traktować jako funkcję, która działa w miarę możliwości. Oznacza to, że nie możesz polegać na tym, że te skróty będą się wyświetlać konsekwentnie. Nawet jeśli się pojawią, nie wiesz, ile ich będzie ani czy platforma nie zignoruje ikon, ponieważ to zależy od przeglądarek. Pełna dyskusja na temat każdej platformy wykracza poza zakres tego artykułu, ale poniżej znajdziesz informacje o tym, jak to działa na Androidzie i na komputerze. Najlepszym sposobem na radzenie sobie z niepewnością jest uporządkowanie elementów według priorytetów.
Poniższy przykład kodu definiuje różne skróty aplikacji, które możesz wypróbować, jeśli zainstalujesz aplikację w Chrome na Androida lub w Edge lub Chrome na komputerze.
iOS i iPadOS
Podczas publikowania Progressive Web Apps możesz wprowadzić pewne ulepszenia, które poprawią wrażenia użytkowników korzystających z Safari na iOS/iPadOS.
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. W przypadku tych urządzeń ekrany powitalne należy zdefiniować w HTML jako obrazy statyczne za pomocą elementów <link>
.
Te obrazy są nazywane obrazami uruchamiania na urządzeniach Apple 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">
Problem polega na tym, że obraz wczytywania musi mieć dokładnie taki rozmiar okna, jaki będzie mieć PWA po otwarciu. Dlatego na różnych urządzeniach z iOS i iPadOS będą potrzebne różne obrazy. 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 ekranów iOS i iPadOS znajdziesz w Wytycznych Apple dotyczących interfejsu użytkownika.
Za pomocą zapytania o multimedia można ustawić różne wersje obrazu uruchamiania:
<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">
Wzorce projektowe dotyczące obrazów uruchamiania iOS
Definiowanie obrazów uruchamiania to trudne zadanie, dlatego udostępniamy kilka narzędzi do automatycznego generowania i konfigurowania:
- Generowanie statyczne integruje się z systemem kompilacji, tworzy wszystkie obrazy statyczne PNG i generuje kod HTML z elementami
<link>
, które można wstawić do dokumentu. Generator zasobów PWA to przykład takiego narzędzia. - Generator po stronie klienta, narzędzie JavaScript, które może osadzić co najmniej 1 wersję base64 obrazu uruchamiania w elementach
<link>
wstrzykniętych na podstawie typu i rozmiaru ekranu bieżącego urządzenia. Możesz użyć płótna w pamięci, wyrenderować obraz i przekształcić go w identyfikator URIdata:
z plikiem 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
W swojej aplikacji PWA powinieneś korzystać z ulepszeń progresywnych i funkcja wykrywania, ale mogą wystąpić przypadki, w których musimy wiedzieć, czy użytkownik jest w aplikacji PWA na platformach mobilnych Apple, np. gdy chcesz podać instrukcje instalacji lub dodać linki do aplikacji przeznaczonych tylko na iOS.
Aby uniknąć odczytywania ciągu identyfikatora 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
totrue
, oznacza to, że użytkownik otworzył PWA na ekranie głównym i korzysta z niezależnej aplikacji PWA.
Obsługa pełnego ekranu
W Safari na urządzeniach z iOS i iPadach jako tryb wyświetlania PWA jest obsługiwany tylko tryb display: standalone
.
Na kolejnym obrazku po lewej stronie widać domyślny samodzielny projekt z kolorem motywu, a po prawej – PWA z trybem pełnoekranowym na iOS, który umożliwia renderowanie treści za paskiem stanu.
Jeśli dodasz ten tag do kodu HTML, PWA na iOS i iPadOS przejdzie w tryb pełnoekranowy, ale będzie to inny tryb niż na Androidzie.
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
W tym trybie pasek stanu urządzenia (górna część ekranu, na której widać zegar, poziom naładowania baterii i ikony powiadomień) jest nadal widoczny, ale renderowany na wierzchu treści z przezroczystym tłem.
Podczas korzystania z tego trybu zachowaj ostrożność podczas projektowania, ponieważ system operacyjny zawsze wyświetla ikony na biało, dlatego do tła ekranu należy zawsze kontrastować z jasnym obrazem. Pamiętaj też, że do renderowania treści w strefie bezpiecznej należy używać zmiennych środowiska CSS, jak opisano w rozdziale poświęconym projektowaniu aplikacji.
Niezawodność instalacji
W systemach iOS i iPadOS w wersjach starszych niż 15.4 plik manifestu jest ładowany 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 przeglądarka 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. Przeglądarka go zignoruje.
Jeśli przeglądarka nie może wczytać pliku manifestu na czas, naciśnięcie opcji „Dodaj do ekranu głównego” powoduje umieszczenie ikony na ekranie głównym, ale nie umożliwia działania aplikacji. Po prostu otwiera się jako skrót do karty przeglądarki.