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 PWA, które są 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 myszy lub nacisnąć i przytrzymać ikonę PWA.
Skróty są definiowane w elemencie shortcuts w pliku manifestu. Przyjmuje tablicę elementów z tymi właściwościami:
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ć adres URL w zakresie aplikacji PWA i powinien prowadzić do funkcji opisanej w elementach
namelubshort_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 ikony z polami
src,type,sizesi opcjonalniepurpose, opisująca, które obrazy powinny 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 poświęconym plikowi manifestu aplikacji internetowej, Android automatycznie tworzy ekrany powitalne na podstawie wartości w pliku manifestu. Nie dotyczy to 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. W przypadku iPada trzeba uwzględnić więcej sytuacji, np. otwieranie aplikacji w orientacji poziomej lub pionowej oraz renderowanie PWA w trybie wielozadaniowym (np. na 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: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 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 komponentów PWA to przykład takiego narzędzia. - Generator po stronie klienta, narzędzie JavaScript, które może osadzić co najmniej 1 wersję obrazu startowego w formacie base64 w elementach
<link>wstrzykiwanych 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 klonuje typowy ekran uruchamiania Androida.
Wykrywanie PWA na platformach mobilnych Apple
W swojej aplikacji PWA powinieneś używać funkcji ulepszania progresy i wykrywania funkcji, 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 niestandardowa właściwość, która jest dostępna tylko w silniku WebKit na iOS i iPadOS.
- Jeśli
navigator.standalonetoundefined, oznacza to, że użytkownik nie korzysta z urządzenia z systemem iPadOS ani iOS. - Jeśli
navigator.standalonetofalse, oznacza to, że użytkownik otworzył aplikację PWA w przeglądarce i z niej korzysta. - Jeśli
navigator.standalonetotrue, oznacza to, że użytkownik otworzył PWA na ekranie głównym i korzysta z niezależnej aplikacji PWA.
Obsługa trybu pełnoekranowego
W Safari na urządzeniach z iOS i iPadach jako tryb wyświetlania PWAs obsługiwany jest tylko 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 należy zachować ostrożność w przypadku projektu, ponieważ system operacyjny zawsze renderuje ikony w kolorze białym. Dlatego należy zawsze kontrastować tło u góry ekranu z jasną zawartością. 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 systemie iOS i iPadOS w wersji wcześniejszej niż 15.4 plik manifestu jest wczytywany z sieci tylko wtedy, gdy użytkownik otworzy kartę udostępniania (klikając ikonę udostępniania w przeglądarce), a nie podczas wczytywania strony. Do tego momentu przeglądarka nie sprawdza, czy Twoja witryna jest PWĄ, co może prowadzić do sytuacji, w której manifest nie może zostać wczytany lub zajmuje zbyt dużo czasu, przez co przeglądarka go ignoruje.
Jeśli przeglądarka nie może wczytać pliku manifestu na czas, naciśnięcie opcji „Dodaj do ekranu głównego” spowoduje wyświetlenie ikony na ekranie głównym, ale nie będzie to aplikacja. Będzie to tylko skrót do karty przeglądarki.