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

Aby uzyskać bardziej zintegrowane działanie, pozwól zainstalowanym aplikacjom PWA obsługiwać adresy URL.

Thomas Steiner

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

Wyobraź sobie, że rozmawiasz ze znajomym za pomocą komunikatora, takiego jak Wiadomości w macOS, i rozmawiacie o muzyce. Wyobraź sobie, że oboje macie na swoich urządzeniach zainstalowaną aplikację PWA music.example.com. Jeśli chcesz udostępnić ulubiony utwór znajomemu, 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 music.example.com mogli zdecydować się na dodanie do każdej ścieżki dodatkowego krótkiego linku, takiego jak https://🎵.example.com/r-a/n-g-g-y-u.

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 dla adresów URL pasujących do wzorów takich jak https://music.example.com, https://*.music.example.com lub https://🎵.example.com, dzięki czemu linki spoza PWA, na przykład z aplikacji do obsługi wiadomości błyskawicznych lub klienta poczty e-mail, otwierają się w zainstalowanej aplikacji PWA, a nie na karcie przeglądarki.

PWA jako obsługa adresów URL to 2 dodatkowe funkcje:

  1. Element "url_handlers" w pliku manifestu aplikacji internetowej.
  2. Format pliku web-app-origin-association służący do sprawdzania zakresu działania powiązań z adresami URL.

Sugerowane zastosowania PWA jako modułów obsługi URL-i

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

  • witryn z muzyką lub filmami, aby linki do utworów lub playlist otwierały się w odtwarzaczu w aplikacji;
  • Czytniki wiadomości lub RSS otwierają się w trybie czytnika aplikacji.

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

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

Aby eksperymentować z PWA jako lokalnymi modułami obsługującymi adresy URL bez tokena próbnego źródła, włącz flagę #enable-desktop-pwas-url-handling w about://flags.

Element manifestu aplikacji internetowej "url_handlers"

Aby powiązać zainstalowaną PWA z wzorcami adresów URL, musisz podać te wzorce w pliku manifestu aplikacji internetowej. Dzieje się to za pomocą członka zespołu "url_handlers". Akceptuje tablicę obiektów z właściwością origin, która jest wymaganą wartością string, czyli wzorcem dopasowywania źródeł. Te wzorce mogą mieć prefiks symbolu wieloznacznego (*), 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 założenia https://, ale musi być wyraźnie wymieniony.

Poniżej znajduje się fragment pliku manifestu aplikacji internetowej, który pokazuje, jak można skonfigurować przykładową PWA muzyczną z wstępu. Drugi wpis z symbolem wieloznacznym ("https://*.music.example.com") sprawia, że aplikacja jest również aktywowana w przypadku https://www.music.example.com lub innych 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"
    }
  ]
}

plik web-app-origin-association;

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

Plik musi zawierać prawidłowy ciąg znaków JSON. Struktura najwyższego poziomu to obiekt z elementem o nazwie "web_apps". Ta składowa to tablica obiektów, z których każdy reprezentuje wpis dla konkretnej 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 PWA string Nie dotyczy
"details" (Opcjonalnie) Obiekt zawierający tablice dozwolonych i wykluczonych wzoró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 zablokowanych ścieżek string[] []

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

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

Kiedy adres URL jest zgodny?

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

  • Adres URL jest zgodny z jednym z ciągów tekstowych źródła w pliku "url_handlers".
  • Przeglądarka może sprawdzić za pomocą odpowiedniego pliku web-app-origin-association, czy każda domena zezwala tej aplikacji na obsługę takiego adresu URL.

W sprawie wykrywania pliku web-app-origin-association

Aby przeglądarka wykryła plik web-app-origin-association, deweloperzy muszą umieścić plik web-app-origin-association w folderze /.well-known/ w korzenia aplikacji. Aby to działało, nazwa pliku musi być dokładnie web-app-origin-association.

Prezentacja

Aby przetestować aplikacje PWA jako moduły obsługi adresów URL, ustaw flagę przeglądarki w sposób opisany powyżej, a potem zainstaluj aplikację PWA na stronie https://mandymsft.github.io/pwa/. Z pliku manifestu aplikacji internetowej wynika, że obsługuje ona adresy URL o tych wzorach: https://mandymsft.github.io i https://luhuangmsft.github.io. PWA na mandymsft.github.io musi udowodnić własność, co odbywa się za pomocą pliku web-app-origin-association hostowanego na stronie https://luhuangmsft.github.io/.well-known/web-app-origin-association.luhuangmsft.github.io

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

Aplikacja błyskawicznego komunikatora Skype na Windows obok zainstalowanej demonstracyjnej aplikacji PWA, która otwiera się w trybie samodzielnym po kliknięciu linku obsługiwanego przez nią w wiadomości czatu Skype.

Zabezpieczenia i uprawnienia

Zespół Chromium zaprojektował i wdrożył PWA jako uchwyty URL, korzystając z podstawowych zasad określonych w artykule Controlling Access to Powerful Web Platform Features (Kontrolowanie dostępu do funkcji zaawansowanych platform internetowych), w tym kontroli użytkownika, przejrzystości i ergonomiki.

Kontrola użytkownika

Jeśli więcej niż 1 aplikacja PWA zarejestruje się jako moduł obsługi adresu URL dla danego wzorca adresu URL, użytkownik zobaczy prośbę o wybranie aplikacji PWA, która ma obsłużyć ten wzorzec (jeśli w ogóle ma to być jakaś aplikacja). Ta propozycja nie obsługuje nawigacji, które zaczynają się na karcie przeglądarki. Jest ona przeznaczona wyłącznie do nawigacji, które zaczynają się poza przeglądarką.

Przejrzystość

Jeśli z jakiegokolwiek powodu nie uda się przeprowadzić weryfikacji powiązania podczas instalacji PWA, przeglądarka nie zarejestruje aplikacji jako aktywnego modułu obsługi adresów URL w przypadku odpowiednich adresów URL. Moduły obsługi adresów URL, jeśli są nieprawidłowo zaimplementowane, mogą służyć do przechwytywania ruchu w witrynach. Dlatego mechanizm powiązania aplikacji jest ważną częścią tego schematu.

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

Trwałość uprawnień

Źródło może w dowolnym momencie zmodyfikować powiązania z aplikacją PWA. Przeglądarki regularnie sprawdzają poprawność powiązań zainstalowanych aplikacji internetowych. Jeśli rejestracja modułu obsługi adresu URL nie zostanie ponownie zweryfikowana, ponieważ dane powiązań uległy zmianie lub nie są już dostępne, przeglądarka usunie rejestracje.

Prześlij opinię

Zespół Chromium chce poznać Twoje wrażenia związane z użyciem PWA jako obsługi URL.

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 podziel się opinią w istniejącym problemie.

Zgłaszanie problemów z implementacją

Czy znalazłeś/znalazłaś 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.

Pokaż pomoc dotyczącą interfejsu API

Czy planujesz używać PWA jako 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 wsparcie.

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

Przydatne linki

Podziękowania

PWA jako obsługa adresów URL zostały określone i wdrożone przez Lu Huang i Mandy Chen z zespołu Microsoft Edge. Ten artykuł został sprawdzony przez Joe Medley. Baner powitalny autorstwa Bryson Hammer na Unsplash.