Określ, jak objęte raportowaniem linki mają otwierać Twoją PWA w ramach deklaratywnej rejestracji linków

Thomas Steiner

Co to jest deklaratywny mechanizm przechwytywania linków?

Klikanie linków w internecie może czasami przynieść miłe zaskoczenie. Na przykład kliknięcie linku do YouTube na stronie internetowej na urządzeniu mobilnym powoduje otwarcie aplikacji YouTube na iOS lub Androida (jeśli jest zainstalowana). Gdy jednak zainstalujesz aplikację internetową YouTube na komputerze stacjonarnym i klikniesz link, otworzy się ona w karcie przeglądarki.

Ale to się komplikuje. Co zrobić, jeśli link znajduje się nie w witrynie, ale w wiadomości czatu, którą otrzymasz w jednej z aplikacji do czatu Google? W systemach operacyjnych na komputery, które mają pojęcie o oddzielnych oknach aplikacji, jeśli aplikacja jest już otwarta, czy po kliknięciu linku powinno się tworzyć nowe okno lub nowa karta? Linki i przekierowania mogą być rejestrowane na wiele sposobów, między innymi:

Declarative Link Capturing to propozycja właściwości pliku manifestu aplikacji internetowej o nazwie "capture_links", która pozwala deweloperom deklaratywnie określić, co powinno się stać, gdy przeglądarka otrzyma prośbę o przejście do adresu URL, który znajduje się w zakresie nawigacji aplikacji, z kontekstu spoza zakresu nawigacji. Ta propozycja nie dotyczy sytuacji, gdy użytkownik znajduje się już w zakresie nawigacji (np. gdy ma otwartą kartę przeglądarki, która mieści się w zakresie, i klika wewnętrzny link).

Niektóre warunki specjalne, takie jak kliknięcie linku środkowym przyciskiem myszy (lub kliknięcie prawym przyciskiem myszy i wybranie opcji „Otwórz w nowej karcie”), zazwyczaj nie powodują przechwytywania linku. Nie ma znaczenia, czy link jest target=_self czy target=_blank, więc linki kliknięte w oknie przeglądarki (lub oknie innej aplikacji PWA) będą otwierane w aplikacji PWA, nawet jeśli normalnie powodowałyby przejście na tej samej karcie.

Sugerowane zastosowania

Przykłady witryn, które mogą używać tego interfejsu API:

  • PWAs, które po kliknięciu przez użytkownika linku do nich otwierają okno, a nie kartę przeglądarki. W środowisku komputerów stacjonarnych często warto otworzyć kilka okien aplikacji naraz.
  • PWA z jednym oknem, w których deweloper preferuje, aby w dowolnym momencie była otwarta tylko jedna instancja aplikacji, a nowe nawigacje były kierowane do istniejącej instancji. Przykłady zastosowań:
    • Aplikacje, w których przypadku sensowne jest uruchamianie tylko 1 kopii (np. odtwarzacz muzyczny, gra).
    • aplikacje, które umożliwiają zarządzanie wieloma dokumentami w ramach pojedynczej instancji (np. pasek kart implementowany w HTML);

Włączanie za pomocą about://flags

Aby eksperymentować z deklaratywnym przechwytywaniem linków lokalnie bez tokena próbnego pochodzenia, włącz flagę #enable-desktop-pwas-link-capturing w pliku about://flags.

Jak korzystać z deklaratywnego przechwytywania linków?

Deweloperzy mogą deklaratywnie określić, jak mają być przechwytywane linki, korzystając z dodatkowego pola pliku manifestu aplikacji internetowej "capture_links". Jako wartość przyjmuje ciąg znaków lub tablicę ciągów znaków. Jeśli podano tablicę ciągów znaków, klient użytkownika wybiera pierwszy obsługiwany element na liście, domyślnie "none". Obsługiwane są następujące wartości:

  • "none" (wartość domyślna): brak przechwytywania linków; kliknięcie linku prowadzącego do zakresu tej aplikacji PWA powoduje normalne przejście bez otwierania okna aplikacji PWA.
  • "new-client": każdy kliknięty link otwiera nowe okno PWA z tym adresem URL.
  • "existing-client-navigate": kliknięty link otwiera się w oknie istniejącej aplikacji PWA, jeśli jest ona dostępna, lub w nowym oknie, jeśli nie. Jeśli istnieje więcej niż 1 okno PWA, przeglądarka może wybrać je dowolnie. Działa ono jak "new-client", jeśli żadne okno nie jest obecnie otwarte. 🚨Uwaga! Ta opcja może prowadzić do utraty danych, ponieważ strony mogą być dowolnie przełączane. Witryny powinny mieć świadomość, że wybierając tę opcję, akceptują takie działanie. Ta opcja najlepiej sprawdza się w przypadku stron „tylko do odczytu”, które nie przechowują danych użytkownika w pamięci, np. odtwarzaczy muzycznych. Jeśli strona, z której użytkownik przechodzi na inną, zawiera zdarzenie beforeunload, użytkownik zobaczy prompt przed zakończeniem nawigacji.

Prezentacja

Demonstracja deklaratywnego przechwytywania linków składa się z 2 demo, które ze sobą współdziałają:

  1. https://continuous-harvest-tomato.glitch.me/
  2. https://hill-glitter-tree.glitch.me/

Poniżej znajdziesz nagranie pokazujące, jak te 2 funkcje ze sobą współpracują. Wykazują 2 różne zachowania: "new-client"i "existing-client-navigate". Aby sprawdzić różnice w działaniu aplikacji, przetestuj je w różnych stanach – uruchamiając je w karcie lub jako zainstalowaną progresywną aplikację internetową.

Zabezpieczenia i uprawnienia

Zespół Chromium opracował i wdrożył deklaratywną funkcję przechwytywania linków, korzystając z podstawowych zasad określonych w artykule Kontrolowanie dostępu do zaawansowanych funkcji platformy internetowej, w tym kontroli użytkownika, przejrzystości i ergonomiki. Ten interfejs API udostępnia witrynom dodatkowe opcje kontroli. Po pierwsze, możliwość automatycznego otwierania zainstalowanych aplikacji w oknie. Korzysta on z dotychczasowego interfejsu, ale umożliwia automatyczne wywoływanie go przez stronę. Po drugie, możliwość skupienia istniejącego okna na własnej domenie i uruchomienia zdarzenia zawierającego kliknięty adres URL. Ma to umożliwić witrynie przejście z dotychczasowego okna do nowej strony, zastępując domyślny przepływ nawigacji HTML.

Migracja na interfejs Launch Handler API

Testowanie origin interfejsu Declarative Link Capturing API wygasło 30 marca 2022 r. w przypadku przeglądarki Chromium 97 i starszych. Zostanie on zastąpiony przez zestaw nowych funkcji i interfejsów API w wersji Chromium 98 i wyższych, który obejmuje przechwytywanie linków włączone przez użytkownika oraz interfejs Launch Handler API.

W Chromium 98 automatyczne przechwytywanie linków jest teraz opcjonalne, a nie przyznawane w czasie instalacji aplikacji internetowej. Aby włączyć przechwytywanie linków, użytkownik musi uruchomić zainstalowaną aplikację z przeglądarki, korzystając z opcji Otwórz za pomocą i wybierając Zapamiętaj mój wybór.

Przykład ustawienia „Otwórz za pomocą” zainstalowanej aplikacji z włączoną opcją „Zapamiętaj wybór”.

Użytkownicy mogą też włączyć lub wyłączyć przechwytywanie linków w przypadku konkretnej aplikacji internetowej na stronie ustawień zarządzania aplikacjami.

Przykład strony ustawień zainstalowanej aplikacji

Przechwytywanie linków jest obecnie dostępne tylko w ChromeOS. Pracujemy nad jego wdrożeniem w systemach Windows, macOS i Linux.

Interfejs Launch Handler API

Kontrola nad przychodzącą nawigacją została przeniesiona do interfejsu Launch Handler API, który umożliwia aplikacjom internetowym podejmowanie decyzji dotyczących uruchamiania aplikacji w różnych sytuacjach, takich jak przechwytywanie linków, udostępnianie docelów lub obsługa plików. Aby przejść z deklaratywnego interfejsu API do przechwytywania linków na interfejs Launch Handler API:

  1. Zarejestruj swoją witrynę w testach wersji próbnej pochodzenia modułu obsługi uruchomienia i umieścić klucz wersji próbnej pochodzenia w aplikacji internetowej.

  2. Dodaj do pliku manifestu witryny wpis "launch_handler".

    • Aby użyć właściwości "capture_links": "new-client", dodaj:"launch_handler": { "route_to": "new-client" }.
    • Aby użyć właściwości "capture_links": "existing-client-navigate", dodaj: "launch_handler": { "route_to": "existing-client-navigate" }.
    • Aby używać "capture_links": "existing-client-event" (które nigdy nie zostało zaimplementowane w wersji próbnej deklaratywnego pochodzenia linku), dodaj:"launch_handler": { "route_to": "existing-client-retain" }. W przypadku tej opcji strony w zakresie aplikacji nie będą się już automatycznie przełączać po wykryciu nawigacji przez link. Aby umożliwić nawigację, musisz obsłużyć zdarzenie LaunchParams w JavaScript, wywołując funkcję window.launchQueue.setConsumer().

Rejestracja próbnego konta origin z polem capture_links i deklaratywnym linkiem przechwytywania jest ważna do 30 marca 2022 r. Dzięki temu użytkownicy korzystający z Chromium 97 lub starszych wersji nadal będą mogli uruchamiać aplikację internetową po kliknięciu linku.

Więcej informacji znajdziesz w artykule Kontrolowanie sposobu uruchamiania aplikacji.

Prześlij opinię

Zespół Chromium chce poznać Twoje wrażenia związane z deklaratywnym przechwytywaniem linków.

Prześlij informacje o projektowaniu interfejsu API

Czy coś w interfejsie API nie działa zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, których potrzebujesz do wdrożenia swojego pomysłu? Masz pytania lub uwagi dotyczące modelu bezpieczeństwa? Zgłoś problem ze specyfikacją w odpowiednim repozytorium GitHub lub dodaj swoje uwagi do istniejącego problemu.

Zgłaszanie problemów z implementacją

Czy znalazłeś błąd w implementacji Chromium? A może implementacja różni się od specyfikacji? Zgłoś błąd na stronie new.crbug.com. Podaj jak najwięcej szczegółów, proste instrukcje odtwarzania błędu i wpisz UI>Browser>WebAppInstalls w polu Składniki. Glitch to świetne narzędzie do szybkiego i łatwego udostępniania informacji.

Pokaż pomoc dotyczącą interfejsu API

Czy planujesz używać deklaratywnego przechwytywania linków? Twoja publiczna pomoc pomaga zespołowi Chromium ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Wyślij tweeta do @ChromiumDev, używając hashtaga #DeclarativeLinkCapturing i podaj, gdzie i jak go używasz.

Przydatne linki

Podziękowania

Funkcja deklaratywnego przechwytywania linków została określona przez Matta Giucę z udziałem Alana Cuttera i Dominicka Nga. Interfejs API został wdrożony przez Alana Cuttera. Ten artykuł został sprawdzony przez Joe Medley, Matta Giuca, Alana Cuttera i Shunya Shishido. Baner powitalny autorstwa Zulmaury Saavedra na Unsplash.