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 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.

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

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. 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 lub short_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 polami purpose, 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.

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

Uwaga: jeśli publikujesz PWA w katalogach i sklepach z aplikacjami, możesz przekonwertować skróty w pliku manifestu na implementacje odpowiednie dla danej platformy za pomocą interfejsów API odpowiednich dla danego systemu operacyjnego, np. szybkich działań na iOS i skrótów w Androidzie. BubbleWrap obsługuje skróty do aplikacji na Androida i ChromeOS oraz PWA Builder na Androida, ChromeOS, iOS i iPadOS.

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.

Ostrzeżenie: jak wspomnieliśmy w poprzednich rozdziałach, aplikacje PWA na iOS i iPadOS można zainstalować tylko w Safari. Inne przeglądarki nie mogą instalować takich aplikacji na ekranie głównym.

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">

Ostrzeżenie: jeśli chcesz podać wszystkie możliwe opcje, łączące definicje ekranu, orientacje i tryb wielozadaniowości, będziesz mieć ponad 25 różnych obrazów do utworzenia i połączenia w kodzie HTML. Jeśli nie prześlesz obrazu startowego do wyświetlania w kontekście systemu iOS lub iPadOS użytkownika, w animacji otwierającej i w trakcie wczytywania aplikacji PWA pojawi się biały ekran.

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 URI data: 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.

Ostrzeżenie: w tym trybie kolor motywu jest ignorowany, a pasek powiadomień jest renderowany na przezroczystym tle. Piksel [0, 0] aplikacji jest teraz [0, 0] piksel ekranu fizycznego, a nie bezpieczny obszar.

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.

Ostrzeżenie: jeśli Safari nie może wczytać pliku manifestu, wróci do sprawdzenia, czy Twoja aplikacja PWA zawiera wycofane metatagi, takie jak apple-mobile-web-app-capable. Nie należy używać takich metatagów. Udostępniają aplikację na ekran główny bez wymaganych atrybutów PWA, takich jak atrybuty start_url lub scope, co bardzo źle wpływa na wrażenia użytkowników.

Zasoby

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