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 zapisana w Twoim manifeście. Specyfikacja pliku manifestu aplikacji internetowej. Umożliwia zdefiniowanie listy skrótów do różnych części lub funkcji 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 na komputerach i Androidzie z WebAPK. Pojawiają się w menu kontekstowym na ikonie aplikacji na ekranie głównym, w docku lub na pasku zadań, jak na ilustracji poniżej:
Aby uzyskać dostęp do tego menu, użytkownicy muszą kliknąć prawym przyciskiem lub przytrzymać ikonę aplikacji PWA.
Skróty są zdefiniowane w elemencie shortcuts
pliku manifestu. Wykorzystuje tablicę elementów z następującymi właściwościami:
name
- Tekst, który będzie widoczny dla użytkownika, zwykle w menu kontekstowym.
url
- Adres URL, który ma wczytać PWA, gdy użytkownik uruchomi ją za pomocą tego skrótu. Powinien to być adres URL z Twojego zakresu PWA i powinien zawierać precyzyjny link do funkcji opisanej w komponencie
name
lubshort_name
. short_name
- (Opcjonalnie) Krótsza nazwa jest używana, gdy nie ma wystarczająco dużo miejsca, aby wyświetlić pełną wartość pola
name
. description
- (Opcjonalnie) Opis działania tego skrótu.
icons
- (Opcjonalnie) Tablica obiektów ikon z polami
src
,type
,sizes
i opcjonalnymi polamipurpose
, które opisują, które obrazy powinny reprezentować skrót
Skróty do aplikacji powinny być jak najbardziej przydatne. Oznacza to, że nie możesz polegać na spójności tych skrótów. Nawet jeśli się pojawią, nie wiadomo, ile skrótów się pojawi ani czy platforma zignoruje ikony według własnego uznania przeglądarek. Nie zajmujemy się dyskusjami na temat poszczególnych platform, ale poniżej możesz się zorientować, jak to działa na Androidzie i komputerach. W tym przypadku najlepiej radzić sobie z ustaleniem kolejności produktów.
Poniższy przykładowy kod określa różne skróty do aplikacji, które możesz wypróbować, instalując aplikację na Androidzie za pomocą Chrome lub na komputerze za pomocą Edge lub Chrome.
iOS i iPadOS
Wprowadziliśmy kilka ulepszeń, które mogą poprawić komfort korzystania z Safari na iOS i iPadOS podczas publikowania aplikacji PWA.
Ekrany powitalne
Jak widać w rozdziale pliku manifestu aplikacji internetowych, Android automatycznie tworzy ekrany powitalne na podstawie wartości pliku manifestu. Nie dotyczy to jednak iOS i iPadOS. W przypadku tych urządzeń ekrany powitalne w kodzie HTML należy zdefiniować jako obrazy statyczne za pomocą elementów <link>
.
Na urządzeniach Apple te obrazy są nazywane obrazami początkowymi i korzystają z właściwości rel
z wartością apple-touch-startup-image
, na przykład:
<link rel="apple-touch-startup-image" href="ios-startup.png">
Problem polega na tym, że obraz początkowy musi mieć taki sam rozmiar okna, jaki będzie mieć po otwarciu PWA. W związku z tym różne urządzenia z iOS i iPadOS wymagają różnych obrazów. Na iPadzie trzeba też uwzględnić więcej sytuacji, takich jak otwarcie aplikacji w orientacji poziomej/pionowej czy renderowanie aplikacji PWA w trybie wielozadaniowym (na przykład 1/3, 1/2 lub 2/3 ekranu).
Aktualną listę rozmiarów ekranu dla systemów iOS i iPadOS znajdziesz w wytycznych Apple Human Interface.
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">
Wzorce projektowe obrazów startowych iOS
Definiowanie obrazów początkowych to ciężka praca, mamy więc kilka narzędzi do automatycznego generowania i konfiguracji:
- Generowanie statyczne integruje się z systemem kompilacji, tworzy wszystkie obrazy statyczne w formacie PNG i udostępnia kod HTML z elementami
<link>
, które należy wstawić w dokumencie. Przykładem takiego narzędzia jest PWA Asset Generator. - Generator po stronie klienta – narzędzie JavaScript, które może umieścić jedną lub więcej wersji obrazu startowego w standardzie base64 we wstrzykiwanych elementach
<link>
na podstawie typu urządzenia i rozmiaru ekranu. Możesz użyć kanwy działającej w pamięci, wyrenderować obraz i przekonwertować go na identyfikator URIdata:
w pliku PNG. Biblioteka PWA Compat to łatwa w użyciu biblioteka po stronie klienta, która sklonuje standardowy ekran uruchamiania Androida.
Wykrywanie PWA na platformach mobilnych Apple
Korzystanie z progresywnego ulepszania i wykrywania funkcji w PWA może być konieczne, ale w niektórych przypadkach (np. gdy chcesz udostępnić instrukcje instalacji) lub linki do aplikacji przeznaczonych tylko na iOS, będziemy potrzebować informacji o tym, czy użytkownik korzysta z aplikacji PWA na platformach mobilnych Apple.
Aby nie odczytywać ciągu znaków klienta użytkownika, sprawdź właściwość standalone
obiektu navigator
. To jest usługa niestandardowa, dostępna tylko w systemie WebKit na urządzeniach z iOS i iPadOS.
- Jeśli
navigator.standalone
ma wartośćundefined
, oznacza to, że użytkownik nie korzysta z urządzenia iPadOS ani z iOS. - Jeśli
navigator.standalone
ma wartośćfalse
, oznacza to, że użytkownik otworzył PWA w przeglądarce i jej używa. - Jeśli
navigator.standalone
ma wartośćtrue
, oznacza to, że użytkownik otworzył aplikację PWA z ekranu głównego i korzysta z samodzielnej aplikacji PWA.
Obsługa pełnego ekranu
W Safari na urządzeniach z iOS i iPadami tylko display: standalone
jest obsługiwany jako tryb wyświetlania ikony PWA. Chociaż display: fullscreen
nie jest obsługiwany na urządzeniach z Androidem, można użyć niestandardowego metatagu, aby Twoja aplikacja PWA przeszła w tryb pełnoekranowy.
Na następnym obrazie widać domyślny, samodzielny projekt z motywem w kolorze, a po prawej – pełnoekranowy tryb iOS z trybem pełnoekranowym, który umożliwia renderowanie treści za paskiem stanu.
Jeśli dodasz do kodu HTML poniższy tag, Twoja aplikacja PWA na iOS i iPadOS będzie działać w trybie pełnoekranowym, ale różni się od tego w Androidzie.
<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świetlany nad treścią z przezroczystym tłem.
Gdy korzystasz z tego trybu, zachowaj ostrożność podczas projektowania elementów, ponieważ system operacyjny zawsze renderuje ikony na biało. Dlatego zawsze należy skontrastować tło u góry ekranu z jasną treścią. Ważne jest też, by do renderowania treści w bezpiecznym obszarze używać zmiennych środowiskowych CSS, tak jak to opisano w rozdziałie projektowania aplikacji.
Niezawodność instalacji
Safari na iOS i iPadOS w wersji starszej 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 sprawdzi, czy Twoja witryna to PWA. Może to prowadzić do sytuacji, w których nie można załadować pliku manifestu lub zajmuje to zbyt dużo czasu. Safari je ignoruje.
Jeśli Safari nie może na czas wczytać pliku manifestu, naciśnięcie opcji „Dodaj do ekranu głównego” powoduje wyświetlenie ikony na ekranie głównym, ale nie powoduje to otwarcia aplikacji – jest to tylko skrót do karty Safari.