Ta strona została przetłumaczona przez Cloud Translation API.

Rejestracja modułu obsługi protokołu URL na potrzeby PWA

Umożliwianie zainstalowanym aplikacjom PWA obsługiwanie linków, które korzystają z konkretnego protokołu, aby zwiększyć integrację.

Thomas Steiner

Informacje o schematach (czyli 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 ujednolicony lokalizator zasobów (URL) odnosi się do podzbioru identyfikatorów URI, które oprócz identyfikacji zasobu umożliwiają jego zlokalizowanie poprzez opis jego głównego mechanizmu dostępu (np. jego lokalizacji w sieci).

Wprowadzenie do metody `registerProtocolHandler()`

Metoda Navigatortylko 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ć tę 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ć zmienną %s jako obiekt zastępczy, który zostanie zastąpiony ujętym w cudzysłowie adresem URL.

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. Po dekodowaniu adres URL ciągu wyszukiwania ma postać ?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 potem 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. Pamiętaj, ż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 obejmują wymagania dotyczące listy schematów, które można zarejestrować, nazwy i formatu parametrów itp.
Różnice w rejestracji na podstawie pliku manifestu są subtelne, 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 torrenta 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ści to ciągi znaków zawierające adres URL modułu obsługi z wymaganym obiektem zastępczym %s dla ujętego w cudzysłów adresu URL.

{
  "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ę w przypadku wielu protokołów, jak 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 udostępnianego 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, powoduje ich odrejestrowanie (oddzielnie od odinstalowania 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.

Moduły obsługi protokołów na karcie Manifest

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 po zainstalowaniu odśwież aplikację. 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 (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ść w aplikacji platformowej, takiej jak Skype na Windows, z linkiem takim jak <a href="web+coffee://americano">Americano</a>, a następnie kliknij ten link. Powinien też otworzyć zainstalowaną PWA.

Demonstracja modułu obsługi protokołu URL z kartą przeglądarki z linkami po lewej stronie i oknem samodzielnej aplikacji PWA po prawej

Zagadnienia związane z bezpieczeństwem

Ponieważ instalacja PWA wymaga bezpiecznego kontekstu, obsługa protokołu 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 nieinicjowane 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 tym oknie wyświetli się nazwa aplikacji i jej źródło oraz pojawi się pytanie, czy aplikacja może obsługiwać linki z 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.

Poinformuj nas 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 o powtarzających się problemach.

Pokaż informacje o pomocy dotyczącej interfejsu API

Czy planujesz użyć rejestracji modułu obsługi protokołu URL na potrzeby PWA? Twoja publiczna pomoc pomaga zespołowi Chromium ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

W wątku na forum Discourse WICG 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

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.