Umożliwianie zainstalowanym aplikacjom PWA obsługiwanie linków, które korzystają z konkretnego protokołu, aby zwiększyć integrację.
Informacje o schematach (inaczej protokołach)
Identyfikator URI to zwarta sekwencja znaków identyfikująca zasób abstrakcyjny lub fizyczny. Każdy identyfikator URI zaczyna się od nazwy schematu, która odnosi się do specyfikacji przypisywania identyfikatorów w ramach tego schematu. Dlatego składnia URI to federacyjny i rozszerzalny system nazewnictwa, w którym specyfikacja każdego schematu może dodatkowo ograniczać składnię i semantykę identyfikatorów używanych w tym schemacie. Schematy są też nazywane protokołami. Poniżej znajdziesz kilka przykładów schematów.
tel:+1-816-555-1212
mailto:Jane.Doe@example.com
news:comp.infosystems.www.servers.unix
https://web.dev/
Termin jednolity lokalizator zasobów (ang.Uniform Resource Locator, URL) odnosi się do podzbioru identyfikatorów URI, które oprócz identyfikacji zasobu udostępniają sposób jego lokalizowania przez opisanie jego głównego mechanizmu dostępu (np. lokalizacji sieciowej).
Informacje o metodzie registerProtocolHandler()
Metoda Navigator
tylko bezpiecznych treści Navigator
registerProtocolHandler()
umożliwia witrynom rejestrowanie możliwości otwierania lub obsługi określonych schematów adresów URL. Dlatego witryny muszą wywoływać metodę w ten sposób: navigator.registerProtocolHandler(scheme, url)
. Te 2 parametry są zdefiniowane w ten sposób:
scheme
: ciąg znaków zawierający protokół, który ma obsługiwać witryna.url
: ciąg znaków zawierający adres URL modułu obsługi. Ten adres URL musi zawierać element%s
jako obiekt zastępczy, który zostanie zastąpiony obsługiwanym adresem URL ze zmianą znaczenia.
Schemat musi być jednym z schematów z listy bezpiecznych schematów (np. mailto
, bitcoin
lub magnet
) albo zaczynać się od web+
, a po tym prefiksie web+
musi być co najmniej 1 znak ASCII małej litery, np. web+coffee
.
Aby to wyjaśnić, podajemy konkretny przykład:
- Użytkownik odwiedza witrynę
https://coffeeshop.example.com/
, która wysyła to wywołanie:navigator.registerProtocolHandler('web+coffee', 'coffee?type=%s')
. - Później, podczas wizyty w witrynie
https://randomsite.example.com/
, użytkownik klika link, np.<a href="web+coffee:latte-macchiato">All about latte macchiato</a>
. - Spowoduje to przejście do adresu URL:
https://coffeeshop.example.com/coffee?type=web%2Bcoffee%3A%2F%2Flatte-macchiato
. Ciąg wyszukiwania jest zdekodowany za pomocą adresu URL, a następnie ma treść?type=web+coffee://latte-macchiato
.
Omówienie obsługi protokołów
Obecny mechanizm rejestracji modułu obsługi protokołu URL na potrzeby PWA polega na oferowaniu rejestracji modułu obsługi protokołu w ramach instalacji PWA za pomocą pliku manifestu. Gdy użytkownik zarejestruje progresywną aplikację internetową jako moduł obsługi protokołu, a on kliknie hiperlink z określonym schematem, np. mailto
,
bitcoin
lub web+music
w przeglądarce lub aplikacji na daną platformę, zarejestrowana progresywna aplikacja internetowa otworzy się i otrzyma adres URL. Należy pamiętać, że zarówno proponowany rejestr na podstawie pliku manifestu, jak i tradycyjny registerProtocolHandler()
pełnią w praktyce bardzo podobne funkcje, a jednak umożliwiają uzupełniające się wrażenia użytkowników:
- Podobieństwa to m.in. wymagania dotyczące listy schematów, które można zarejestrować, oraz nazwy i formatu parametrów.
- Różnice w rejestracji na podstawie pliku manifestu są niewielkie, ale mogą być przydatne do zwiększenia wygody użytkowników aplikacji PWA. Na przykład rejestracja PWA na podstawie pliku manifestu może nie wymagać dodatkowych działań użytkownika poza zainicjowaniem instalacji PWA.
Przypadki użycia
- W PWA edytora tekstu użytkownik w dokumencie widzi link do prezentacji, np.
web+presentations://deck2378465
. Gdy użytkownik kliknie link, PWA prezentacji otworzy się automatycznie w odpowiednim zakresie i wyświetli prezentację slajdów. - W aplikacji do czatu na danej platformie użytkownik otrzymuje w wiadomości link do adresu URL
magnet
. Po kliknięciu linku uruchomi się zainstalowana aplikacja PWA z torrentami i rozpocznie się pobieranie. - Użytkownik ma zainstalowaną aplikację PWA do strumieniowego odtwarzania muzyki. Gdy znajomy udostępni link do utworu, np.
web+music://songid=1234&time=0:13
, a użytkownik kliknie go, aplikacja PWA do strumieniowego przesyłania muzyki uruchomi się automatycznie w osobnym oknie.
Jak używać rejestracji modułu obsługi protokołu URL na potrzeby PWA
Interfejs API do rejestracji modułu obsługi protokołu URL jest wzorowany na interfejsie navigator.registerProtocolHandler()
. Tym razem informacje są przekazywane deklaratywnie za pomocą pliku manifestu aplikacji internetowej w nowej właściwości o nazwie "protocol_handlers"
, która przyjmuje tablicę obiektów z 2 wymaganymi kluczami: "protocol"
i "url"
. Fragment kodu poniżej pokazuje, jak zarejestrować web+tea
i web+coffee
. Wartościami są ciągi tekstowe zawierające adres URL modułu obsługi oraz wymaganą zmienną %s
dla adresu URL ze zmianą znaczenia.
{
"protocol_handlers": [
{
"protocol": "web+tea",
"url": "/tea?type=%s"
},
{
"protocol": "web+coffee",
"url": "/coffee?type=%s"
}
]
}
Wiele aplikacji rejestrujących się w ramach tego samego protokołu
Jeśli wiele aplikacji zarejestruje się jako moduł obsługi tego samego schematu, na przykład protokołu mailto
, system operacyjny wyświetli użytkownikowi selektor i pozwoli mu wybrać, którego zarejestrowanego modułu obsługi użyć.
Ta sama aplikacja rejestruje się w przypadku wielu protokołów
Ta sama aplikacja może zarejestrować się dla wielu protokołów, co widać w przykładowym kodzie powyżej.
Aktualizacje aplikacji i rejestracja modułu obsługi
Rejestracje obsługi są synchronizowane z najnowszą wersją pliku manifestu dostarczonego przez aplikację. Występują 2 przypadki:
- Aktualizacja, która dodaje nowych modułów obsługi, powoduje rejestrację modułów obsługi (oddzielnie od instalacji aplikacji).
- Aktualizacja, która usuwa moduły obsługi, aktywuje wyrejestrowanie modułu obsługi (niezależnie od odinstalowywania aplikacji).
Debugowanie modułu obsługi protokołu w Narzędziach deweloperskich
W panelu Aplikacja > Plik manifestu otwórz sekcję Obsługa protokołów. Tutaj możesz wyświetlić i przetestować wszystkie dostępne protokoły.
Na przykład zainstaluj demo PWA. W sekcji Procesory protokołów wpisz „americano” i kliknij Testuj protokół, aby otworzyć stronę z kawą w PWA.
Prezentacja
Demo rejestracji modułu obsługi protokołu URL na potrzeby PWA znajdziesz na Glitch.
- Otwórz stronę https://protocol-handler.glitch.me/, zainstaluj PWA i ponownie załaduj ją po zakończeniu instalacji. Przeglądarka zarejestrowała PWA jako moduł obsługi protokołu
web+coffee
w systemie operacyjnym. - W oknie zainstalowanej aplikacji internetowej kliknij link https://protocol-handler-link.glitch.me/. Otworzy się nowa karta przeglądarki z 3 linkami. Kliknij pierwszy lub drugi etap (latte macchiato lub americano). Przeglądarka wyświetli monit z pytaniem, czy zgadzasz się, aby aplikacja była modułem obsługi protokołu
web+coffee
. Jeśli się zgodzisz, aplikacja PWA otworzy się i wyświetli wybraną kawę. - Aby porównać tradycyjny proces, który używa
navigator.registerProtocolHandler()
, kliknij w PWA przycisk Zarejestruj moduł obsługi protokołu. Następnie na karcie przeglądarki kliknij trzeci link (chai). W tym przypadku również wyświetli się komunikat, ale aplikacja PWA otworzy się na karcie, a nie w oknie przeglądarki. - Wyślij do siebie wiadomość z aplikacji określonej platformy, na przykład Skype w systemie Windows, z linkiem w rodzaju
<a href="web+coffee://americano">Americano</a>
, a następnie kliknij go. Powinien też otworzyć zainstalowaną PWA.
Zagadnienia związane z bezpieczeństwem
Ponieważ instalacja PWA wymaga bezpiecznego kontekstu, obsługa protokołów dziedziczy to ograniczenie. Lista zarejestrowanych modułów obsługi protokołów nie jest w żaden sposób udostępniana w internecie, więc nie może być używana jako wektor do tworzenia odcisków palców.
Próby nawigacji niezainicjowane przez użytkownika
Próby nawigacji, które nie zostały zainicjowane przez użytkownika, ale są programowe, mogą nie otwierać aplikacji. Niestandardowy URL protokołu może być używany tylko w kontekstach przeglądania najwyższego poziomu, ale nie może być np. adresem URL elementu iframe.
Lista dozwolonych protokołów
Podobnie jak w przypadku registerProtocolHandler()
, istnieje lista dozwolonych protokołów, które aplikacje mogą zarejestrować do obsługi.
Prośba o zgodę
Po pierwszym uruchomieniu PWA z powodu wywołanego protokołu użytkownik zobaczy okno z prośbą o uprawnienia. W oknie wyświetli się nazwa i pochodzenie aplikacji oraz pytanie użytkownika, czy aplikacja może obsługiwać linki z tego protokołu. Jeśli użytkownik odrzuci okno z prośbą o uprawnienia, zarejestrowany moduł obsługi protokołu zostanie zignorowany przez system operacyjny. Aby wyrejestrować moduł obsługi protokołów, użytkownik musi odinstalować PWA, który go zarejestrował. Przeglądarka usunie też moduł obsługi protokołu, jeśli użytkownik wybierze „Zapamiętaj mój wybór” i „Nie zezwalaj”.
Prześlij opinię
Zespół Chromium chce poznać Twoje wrażenia związane z rejestracją modułu obsługi protokołu URL na potrzeby PWA.
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łoś problem z implementacją
Czy wystąpił błąd związany z implementacją Chromium? Czy 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. Usługa Glitch świetnie nadaje się do szybkiego i łatwego udostępniania poprawek.
Pokaż informacje o pomocy dotyczącej interfejsu API
Czy planujesz użyć rejestracji modułu obsługi protokołu URL na potrzeby PWA? Twoje publiczne wsparcie pomaga zespołowi Chromium w ustalaniu priorytetów funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest, aby ich obsługa była kluczowa.
W wątku na forum Discourse dotyczącej WGICh opisz, jak zamierzasz go używać. Wyślij tweeta do @ChromiumDev, używając hashtaga #ProtocolHandler
, i podaj, gdzie i jak go używasz.
Przydatne linki
- Wyjaśnienie
- Specyfikacja w wersji roboczej
- GitHub
- ChromeStatus
- Błąd w Chromium
- Sprawdzanie tagów
- Discourse
Podziękowania
Rejestrację modułu obsługi protokołu URL na potrzeby PWA wdrożył i określił zespół Microsoft Edge w skład którego wchodzą: Fabio Rocha, Diego González, Connor Moody i Samuel Tang. Ten artykuł został sprawdzony przez Joe Medley i Fabio Rocha. Baner powitalny autorstwa JJ Ying z Unsplash.