Ulepszenia

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:

skróty do aplikacji na Androidzie i w systemie macOS.

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 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ć 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 URI data: 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 to true, 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.

Samodzielne działanie domyślne (po lewej) i ekran na pełnym ekranie w iOS (po prawej).

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.

Górne 0 pikseli widocznego obszaru są domyślnie poniżej paska stanu. Jeśli dodasz przezroczysty czarny metatag, górne 0 pikseli widocznego obszaru będą odpowiadać fizycznej górnej części ekranu.

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.

Zasoby