PWA jako moduły obsługi adresów URL

Zezwalaj zainstalowanym aplikacjom PWA na obsługę adresów URL, aby zapewnić bardziej zintegrowane środowisko.

Thomas Steiner

Ostrzeżenie: obsługa adresów URL przez aplikacje PWA była częścią projektu dotyczącego możliwości, a obsługa eksperymentalnego elementu manifestu url_handlers jest wycofywana. Element manifestu url_handlers jest zastępowany nowym elementem manifestu handle_links, który jest standaryzowany i wdrażany. Zapoznaj się z wyjaśnieniem dotyczącym handle_links.

Czym są aplikacje PWA jako moduły obsługi adresów URL?

Wyobraź sobie, że rozmawiasz ze znajomym za pomocą komunikatora, np. Wiadomości na macOS, i tematem rozmowy jest muzyka. Załóżmy też, że oboje macie zainstalowaną aplikację PWA music.example.com na swoich urządzeniach. Jeśli chcesz udostępnić znajomemu ulubiony utwór, możesz wysłać mu precyzyjny link, np. https://music.example.com/rick-astley/never-gonna-give-you-up. Ponieważ ten link jest dość długi, deweloperzy aplikacji music.example.com mogli zdecydować się na dodanie do każdego utworu dodatkowego krótkiego linku, np. https://🎵.example.com/r-a/n-g-g-y-u.

Aplikacja PWA jako moduł obsługi adresów URL umożliwia aplikacjom takim jak music.example.com rejestrowanie się jako moduły obsługi adresów URL, które pasują do wzorców takich jak https://music.example.com, https://*.music.example.com lub https://🎵.example.com. Dzięki temu linki spoza aplikacji PWA, np. z komunikatora lub klienta poczty e-mail, otwierają się w zainstalowanej aplikacji PWA, a nie na karcie przeglądarki.

PWA jako moduły obsługi adresów URL składają się z 2 dodatków:

1. Element pliku manifestu aplikacji internetowej "url_handlers".
2. Format pliku web-app-origin-association do sprawdzania powiązań adresów URL objętych i nieobjętych zakresem.

Sugerowane przypadki użycia aplikacji PWA jako modułów obsługi adresów URL

Przykłady witryn, które mogą korzystać z tego interfejsu API:

• witryny streamingowe z muzyką lub filmami, aby linki do utworów lub playlist otwierały się w odtwarzaczu aplikacji;
• czytniki wiadomości lub RSS, dzięki którym obserwowane lub subskrybowane witryny otwierają się w trybie czytnika aplikacji;

Jak używać aplikacji PWA jako modułów obsługi adresów URL

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

Aby eksperymentować z PWA jako modułami obsługi adresów URL lokalnie, bez tokena testowania origin, włącz flagę #enable-desktop-pwas-url-handling w about://flags.

Uwaga: obsługa funkcji PWA jako modułów obsługi adresów URL jest ograniczona do domyślnej przeglądarki zgodnie z ustawieniami systemu operacyjnego. Na przykład Chrome można ustawić jako przeglądarkę domyślną, postępując zgodnie z tymi instrukcjami.

Element manifestu aplikacji internetowej "url_handlers"

Aby powiązać zainstalowaną aplikację PWA ze wzorcami adresów URL, musisz określić te wzorce w pliku manifestu aplikacji internetowej. Dzieje się tak za pomocą elementu "url_handlers". Akceptuje tablicę obiektów z właściwością origin, która jest wymaganym obiektem string będącym wzorcem dopasowywania źródeł. Te wzorce mogą mieć prefiks z symbolem wieloznacznym (*), aby uwzględnić wiele subdomen (np. https://*.example.com). Adresy URL pasujące do tych źródeł mogą być obsługiwane przez tę aplikację internetową. Schemat jest zawsze traktowany jako https://, ale musi być wyraźnie określony.

Poniższy fragment manifestu aplikacji internetowej pokazuje, jak można skonfigurować przykładową aplikację PWA do odtwarzania muzyki z akapitu wprowadzającego. Drugi wpis z symbolem wieloznacznym ("https://*.music.example.com") zapewnia, że aplikacja zostanie aktywowana również w przypadku https://www.music.example.com lub innych potencjalnych przykładów, takich jak https://marketing-activity.music.example.com.

{
  "url_handlers": [
    {
      "origin": "https://music.example.com"
    },
    {
      "origin": "https://*.music.example.com"
    },
    {
      "origin": "https://🎵.example.com"
    }
  ]
}

Uwaga: w przypadku połączenia z internetem krótkie linki z https://🎵.example.com są zwykle przekierowywane do https://music.example.com. Takie przekierowanie nawigacji nie jest dobrym rozwiązaniem w przypadku scenariuszy offline. Dlatego aplikacja musi zarejestrować się w obu miejscach pochodzenia.

Plik web-app-origin-association

Ponieważ aplikacja PWA znajduje się w innym źródle (music.example.com) niż niektóre adresy URL, które musi obsługiwać (np. https://🎵.example.com), musi zweryfikować własność tych innych źródeł. Dzieje się tak w pliku web-app-origin-association hostowanym w innych domenach.

Uwaga: aplikacje, które chcą obsługiwać adresy URL znajdujące się w tym samym źródle co aplikacja PWA, muszą również określić reguły obsługi w pliku web-app-origin-association hostowanym w tym źródle.

Ten plik musi zawierać prawidłowy kod JSON. Struktura najwyższego poziomu to obiekt z elementem o nazwie "web_apps". Ten element jest tablicą obiektów, a każdy obiekt reprezentuje wpis dotyczący unikalnej aplikacji internetowej. Każdy obiekt zawiera:

Pole	Opis	Typ	Domyślny
"manifest"	(Wymagany) Ciąg znaków adresu URL pliku manifestu aplikacji internetowej powiązanej z PWA.	string	Nie dotyczy
"details"	(Opcjonalnie) Obiekt zawierający tablice uwzględnionych i wykluczonych wzorców adresów URL.	object	Nie dotyczy

Każdy obiekt "details" zawiera:

Pole	Opis	Typ	Domyślny
"paths"	(Opcjonalnie) Tablica dozwolonych ciągów znaków ścieżki	string[]	[]
"exclude_paths"	(Opcjonalnie) Tablica ciągów znaków niedozwolonych ścieżek	string[]	[]

Poniżej znajduje się przykładowy plik web-app-origin-association dla podanego wyżej przykładu aplikacji PWA z muzyką. Będzie on hostowany w źródle 🎵.example.com i ustanowi powiązanie z aplikacją PWA music.example.com, identyfikowaną przez adres URL pliku manifestu aplikacji internetowej.

{
  "web_apps": [
    {
      "manifest": "https://music.example.com/manifest.json",
      "details": {
        "paths": ["/*"],
        "exclude_paths": ["/internal/*"]
      }
    }
  ]
}

Uwaga: plik web-app-origin-association jest podobny do pliku powiązanej domeny Apple, pliku assetlinks.json na Androidzie i pliku windows-app-web-link w systemie Windows. Różnica polega na tym, że plik web-app-origin-association nie odwołuje się do aplikacji PWA za pomocą identyfikatora aplikacji na konkretną platformę, ale za pomocą adresu URL pliku manifestu aplikacji internetowej.

Kiedy adres URL jest dopasowany?

PWA pasuje do adresu URL, jeśli spełnione są oba te warunki:

• Adres URL pasuje do jednego z ciągów znaków źródła w zasadzie "url_handlers".
• Przeglądarka może sprawdzić za pomocą odpowiedniego pliku web-app-origin-association, czy każde źródło zgadza się, aby ta aplikacja obsługiwała taki adres URL.

Wykrywanie plików web-app-origin-association

Aby przeglądarka mogła wykryć plik web-app-origin-association, deweloperzy muszą umieścić web-app-origin-associationgo w folderze /.well-known/ w katalogu głównym aplikacji. Aby to zadziałało, plik musi mieć nazwę web-app-origin-association.

Prezentacja

Aby przetestować aplikacje PWA jako moduły obsługi adresów URL, ustaw flagę przeglądarki zgodnie z opisem, a następnie zainstaluj aplikację PWA na stronie https://mandymsft.github.io/pwa/. W pliku manifestu aplikacji internetowej widać, że obsługuje ona adresy URL o następujących wzorcach adresów URL: https://mandymsft.github.io i https://luhuangmsft.github.io. Ponieważ ta druga aplikacja pochodzi z innego źródła (luhuangmsft.github.io) niż aplikacja PWA, aplikacja PWA na stronie mandymsft.github.io musi udowodnić, że jest jej właścicielem. Odbywa się to za pomocą pliku web-app-origin-association hostowanego na stronie https://luhuangmsft.github.io/.well-known/web-app-origin-association.

Aby sprawdzić, czy to działa, wyślij do siebie wiadomość testową za pomocą wybranej aplikacji do obsługi wiadomości lub e-maila wyświetlanego w kliencie poczty e-mail, który nie jest oparty na przeglądarce, np. Mail w systemie macOS. E-mail lub SMS powinien zawierać link https://mandymsft.github.io lub https://luhuangmsft.github.io. Oba powinny otwierać się w zainstalowanej aplikacji PWA.

Zabezpieczenia i uprawnienia

Zespół Chromium zaprojektował i wdrożył aplikacje PWA jako moduły obsługi adresów URL, korzystając z podstawowych zasad opisanych w artykule Controlling Access to Powerful Web Platform Features (Kontrolowanie dostępu do zaawansowanych funkcji platformy internetowej), w tym kontroli użytkownika, przejrzystości i ergonomii.

Kontrola sprawowana przez użytkowników

Jeśli więcej niż 1 aplikacja PWA zarejestruje się jako moduł obsługi adresu URL dla danego wzorca adresu URL, użytkownik zostanie poproszony o wybranie aplikacji PWA, której chce używać do obsługi wzorca (jeśli w ogóle chce to zrobić). Nawigacja, która rozpoczyna się na karcie przeglądarki, nie jest uwzględniona w tej propozycji. Dotyczy ona wyłącznie nawigacji, która rozpoczyna się poza przeglądarką.

Przejrzystość

Jeśli z jakiegoś powodu nie można przeprowadzić niezbędnej weryfikacji powiązania podczas instalacji aplikacji PWA, przeglądarka nie zarejestruje aplikacji jako aktywnego modułu obsługi adresów URL w przypadku adresów URL, których dotyczy problem. Jeśli moduły obsługi adresów URL zostaną nieprawidłowo wdrożone, mogą zostać użyte do przejęcia ruchu w witrynach. Dlatego mechanizm powiązania aplikacji jest ważną częścią schematu.

Aplikacje na konkretne platformy mogą już używać interfejsów API systemu operacyjnego do wyświetlania listy aplikacji zainstalowanych w systemie użytkownika. Na przykład aplikacje w systemie Windows mogą używać interfejsu API FindAppUriHandlersAsync do wyliczania modułów obsługi adresów URL. Jeśli aplikacje PWA zarejestrują się jako moduły obsługi adresów URL na poziomie systemu operacyjnego w systemie Windows, ich obecność będzie widoczna dla innych aplikacji.

Trwałość uprawnień

Źródło może w każdej chwili zmienić powiązania z PWA. Przeglądarki będą regularnie próbować ponownie sprawdzać powiązania zainstalowanych aplikacji internetowych. Jeśli ponowna weryfikacja rejestracji modułu obsługi adresów URL nie powiedzie się, ponieważ dane powiązania uległy zmianie lub nie są już dostępne, przeglądarka usunie rejestracje.

Prześlij opinię

Zespół Chromium chce poznać Twoje wrażenia dotyczące PWA jako modułów obsługi adresów URL.

Opisz projekt interfejsu API

Czy interfejs API nie działa zgodnie z Twoimi oczekiwaniami? A może brakuje metod lub właściwości, które są Ci potrzebne do zrealizowania pomysłu? Masz pytanie lub komentarz dotyczący modelu zabezpieczeń? Zgłoś problem ze specyfikacją w odpowiednim repozytorium GitHub lub dodaj swoje uwagi do istniejącego problemu.

Zgłaszanie problemu z implementacją

Czy udało Ci się znaleźć błąd we wdrożeniu 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 i instrukcje odtworzenia błędu, a w polu Components (Komponenty) wpisz UI>Browser>WebAppInstalls.

Wsparcie dla interfejsu API

Czy planujesz używać aplikacji PWA jako modułów obsługi adresów URL? Twoje publiczne wsparcie pomaga zespołowi Chromium ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich obsługiwanie.

Wyślij tweeta do @ChromiumDev z hasztagiem #URLHandlers i daj nam znać, gdzie i jak używasz tej funkcji.

Przydatne linki

• Publiczne wyjaśnienie
• Wersja demonstracyjna | Źródło wersji demonstracyjnej
• Błąd śledzenia Chromium
• Wpis na ChromeStatus.com
• Komponent Blink: UI>Browser>WebAppInstalls
• Weryfikacja TAG
• Dokumentacja firmy Microsoft

Podziękowania

Funkcja PWA jako moduły obsługi adresów URL została określona i wdrożona przez Lu Huanga i Mandy Chen z zespołu Microsoft Edge. Ten dokument został sprawdzony przez Joe Medleya.