Opublikowano: 19 sierpnia 2025 r.
Zarządzanie nawigacją obejmuje metody kontrolowania sposobu, w jaki progresywna aplikacja internetowa (PWA) obsługuje nawigację użytkownika. Kluczowym elementem tego procesu jest przechwytywanie nawigacji, czyli proces przeglądarki, który określa, czy kliknięcie linku powinno uruchomić zainstalowaną aplikację PWA, czy otworzyć nową kartę przeglądarki.
Ten przewodnik dotyczy nowej wersji przechwytywania nawigacji, która jest dostępna od Chrome 139. Domyślne działanie przeglądarki jest odpowiednie w większości przypadków, ale jeśli chcesz zapewnić użytkownikom jak najlepsze wrażenia, musisz lepiej poznać te techniki zarządzania i powiązane z nimi interfejsy API.
W sekcji Ustawienia dewelopera znajdziesz informacje o tym, jak dostosować nawigację, aby zapewnić użytkownikom jak najlepsze wrażenia podczas uruchamiania PWA.
Nowe działanie domyślne
Aby dostosować się do preferencji użytkowników i zmniejszyć liczbę problemów, Chrome ujednolica sposób obsługi linków. Wcześniej działanie tej funkcji było niespójne na różnych platformach. Na urządzeniach mobilnych zwykle priorytetem było uruchamianie zainstalowanych aplikacji, a przeglądarki na komputerach stacjonarnych najpierw otwierały link na karcie, a potem sygnalizowały, że aplikacja może go obsłużyć.
Nowe, ujednolicone podejście do przechwytywania nawigacji automatycznie otwiera linki w odpowiednich zainstalowanych aplikacjach PWA. Linki będą przekierowywane na kartę przeglądarki tylko wtedy, gdy aplikacja PWA nie jest zainstalowana lub użytkownik zrezygnuje z tej funkcji. Nowe działanie jest dostępne od Chrome 139 w systemach Windows, macOS i Linux. Obsługa ChromeOS zostanie dodana w przyszłej wersji.
Proces zarządzania nawigacją
Przechwytywanie nawigacji jest częścią procesu zarządzania nawigacją. Ten proces obejmuje cały przebieg od początkowej czynności użytkownika po decyzje przeglądarki i wynikające z nich zachowania skonfigurowane przez dewelopera:
- Działania użytkowników: obejmują interakcje, takie jak kliknięcie linków.
- Decyzje przeglądarki: obejmują zadania i decyzje zarządzane przez przeglądarkę, takie jak domyślne zachowania, np. przechwytywanie nawigacji.
- Elementy sterujące dla programistów: obejmują interfejsy API, które umożliwiają programistom przekazywanie przeglądarce instrukcji dotyczących wykonywania określonych zadań.
Współdziałanie tych elementów decyduje o tym, czy aplikacja PWA otworzy się w osobnym oknie czy na karcie przeglądarki.
Podstawowy przypadek użycia zarządzania nawigacją to sytuacja, w której użytkownik klika lub wybiera link do zainstalowanej aplikacji PWA z innej strony w przeglądarce. Poniższy przykład pokazuje, co się dzieje, gdy użytkownik, który ma zainstalowaną aplikację PWA Google Chat, kliknie link do niej w zaproszeniu z Kalendarza Google.
calendar.google.com.Działania użytkownika
Każde działanie użytkownika składa się z 3 kluczowych elementów: zdarzenia (np. kliknięcia lub dotknięcia), powierzchni, na której ma miejsce (np. strony internetowej lub skrótu na komputerze), oraz typu linku, który jest aktywowany (np. adresu URL HTTPS). Na przykład użytkownik może kliknąć link do https://chat.google.com/meeting_room_id w zakresie aplikacji internetowej Google Chat ze strony internetowej calendar.google.com.
Decyzje przeglądarki
Gdy użytkownik wykona działanie, np. kliknie w poprzednim kroku, przeglądarka uruchomi proces przechwytywania nawigacji, aby zdecydować, czy linki mają być otwierane w karcie przeglądarki, czy w zainstalowanej aplikacji PWA. Składa się ona z tych kroków:
- Sprawdź, czy nawigacja jest możliwa do przechwycenia: ogólnie rzecz biorąc, nawigacja jest możliwa do przechwycenia, jeśli tworzy nową ramkę i nie otwiera się w pomocniczym kontekście przeglądania.
- Określanie kontrolującej PWA: jeśli nawigacja jest przechwytywalna, przeglądarka próbuje znaleźć PWA, która „kontroluje” adres URL (mieści się w zakresie zdefiniowanym w pliku manifestu aplikacji internetowej).
- Weryfikacja preferencji użytkownika: jeśli zostanie znaleziona kontrolująca aplikacja PWA, przeglądarka sprawdza preferencje użytkownika. Jeśli użytkownik nie zrezygnował z tej funkcji w ustawieniach aplikacji, uruchomi się aplikacja PWA. W przeciwnym razie link otworzy się w nowej karcie przeglądarki.
- Uruchomienie PWA: przeglądarka uruchamia PWA za pomocą algorytmu obsługi uruchamiania. Możesz na to wpłynąć za pomocą interfejsu Launch Handler API, o którym piszemy w dalszej części.
Ten diagram podsumowuje ten proces:
Kontrola deweloperów
Proces nawigacji opiera się głównie na ustawieniach domyślnych przeglądarki i ustawieniach użytkownika, ale możesz używać różnych interfejsów API do zarządzania jego konkretnymi aspektami. Po wprowadzeniu niedawnej aktualizacji dotyczącej przechwytywania nawigacji niektóre starsze interfejsy API stały się bardziej istotne.
Launch Handler API
Ten interfejs API jest używany, gdy przeglądarka decyduje się uruchomić PWA. Umożliwia on kontrolowanie sposobu uruchamiania aplikacji, np. w nowym lub istniejącym oknie.
Określ sposób uruchamiania PWA za pomocą elementu launch_handler w pliku manifestu aplikacji internetowej, który zawiera pole podrzędne o nazwie client_mode. To pole podrzędne określa, czy należy użyć nowego czy istniejącego okna i czy ma ono nawigować. Dozwolone wartości parametru client_mode to:
focus-existing: aby obsłużyć link w istniejącym oknie aplikacji, np. w progresywnej aplikacji internetowej, która jest już uruchomiona w trybie samodzielnym.navigate-existing: w tej opcji ostatnio używany kontekst przeglądania w oknie aplikacji internetowej jest przekierowywany na docelowy adres URL uruchomienia.navigate-new: w tym przypadku w oknie aplikacji internetowej tworzony jest nowy kontekst przeglądania, w którym wczytywany jest docelowy adres URL.
Użyj atrybutu launchQueue API, aby podać dodatkowe parametry i obsłużyć specjalne przypadki.
Interfejs Launch Handler API jest dostępny od Chrome 110, ale staje się znacznie bardziej przydatny po aktualizacji przechwytywania nawigacji. Więcej informacji znajdziesz w dokumentacji interfejsu Launch Handler API.
Inne powiązane interfejsy API
Oprócz obsługi uruchamiania w tym procesie mogą odgrywać rolę inne interfejsy API, w zależności od konkretnych potrzeb aplikacji. Obejmują one moduły obsługi protokołów URL, które umożliwiają aplikacji internetowej zarejestrowanie możliwości obsługi schematów URL innych niż standardowe http i https (np. standardowych protokołów, takich jak mailto:, lub niestandardowych, takich jak web+music). Ponadto interfejs Web App Scope Extensions API (obecnie w fazie rozwoju) umożliwia rozszerzenie zakresu PWA w celu przechwytywania linków z innych domen, w tym subdomen, dzięki czemu po kliknięciu linku z powiązanej domeny można uruchomić PWA. Szczegółowe omówienie tych kwestii wykracza poza zakres tego artykułu, ale więcej informacji znajdziesz w odpowiednich linkach.
Przypadek użycia: przechwytywanie linków do Google Chat w aplikacji PWA Chat
Na koniec dowiedz się, jak poszczególne elementy współpracują ze sobą na przykładzie kliknięcia linku do pokoju w Google Chat w Kalendarzu Google przez użytkownika, który ma już zainstalowaną aplikację PWA Google Chat.
Przed rozpoczęciem rejestrowania nawigacji
Na poniższym filmie użytkownik tworzy spotkanie w Kalendarzu Google i zaprasza 3 gości. Aplikacja Kalendarz automatycznie generuje link do Google Chat, który zawiera wszystkich uczestników. Gdy użytkownik kliknie ten link, pokój czatu otworzy się w nowej karcie przeglądarki. Ikona na pasku adresu sygnalizuje, że zainstalowana jest odpowiednia aplikacja PWA, ale użytkownik musi ją uruchomić ręcznie. Przed aktualizacją przechwytywania nawigacji wyglądało to tak:
Po zarejestrowaniu nawigacji
Poniższy film pokazuje ten sam proces, ale z nowym sposobem rejestrowania nawigacji. W tej wersji kliknięcie linku do Google Chat w Kalendarzu Google powoduje otwarcie odpowiedniego pokoju czatu bezpośrednio w zainstalowanej progresywnej aplikacji internetowej. Zespół Google Chat wdrożył też obsługę uruchamiania, dodając atrybut launch_handler do pliku manifestu aplikacji internetowej. Ustawiając wartość client_mode na focus-existing, zapewniają, że link otworzy się w istniejącej instancji aplikacji PWA, jeśli jest ona już uruchomiona. Dzięki wyeliminowaniu opóźnienia związanego z otwieraniem nowej karty przeglądarki i wywoływaniem wczytywania strony efektywny „czas do interakcji użytkownika” może być z założenia krótszy. Google Chat znacznie skrócił czas oczekiwania na nawigację, eliminując konieczność uruchamiania nowej aplikacji.
Podsumowanie i dalsze kroki
W tym artykule omówiliśmy nowe domyślne zachowanie związane z przechwytywaniem nawigacji, które jest dostępne w Chrome 139. Skupiliśmy się na typowym przypadku użycia, w którym użytkownik klika link HTTPS w zakresie zainstalowanej aplikacji PWA. Więcej informacji i przypadków użycia znajdziesz w artykule Navigation Management into Installed PWAs (Zarządzanie nawigacją w zainstalowanych aplikacjach PWA). Poniższy diagram przedstawia pełny podział przypadków użycia, w tym zdarzeń użytkownika, platform i protokołów, wraz z odpowiednimi wynikami:
Zarządzanie nawigacją jest kluczowym, ale często pomijanym aspektem UX aplikacji, ponieważ kontroluje punkt wejścia. Funkcje i linki omówione w tym artykule pomogą Ci zapewnić najlepsze możliwe wrażenia z korzystania z aplikacji PWA.