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. Załóżmy, że na urządzeniach jest zainstalowana aplikacja 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żdego utworu 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łyskowych 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łada się z 2 uzupełnień:

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

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

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

  • witryny do strumieniowego przesyłania muzyki lub filmów, 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 przez about://flags

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

Element "url_handlers" w pliku manifestu aplikacji internetowej

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 wymaganym elementem string, który jest wzorcem dopasowywania źródeł. Te wzorce mogą mieć prefiks symbolu wieloznacznego (*), aby uwzględnić wiele subdomen (np. https://*.example.com). Aplikacja internetowa może obsługiwać adresy URL pasujące do tych źródeł. Schemat jest zawsze założenia https://, ale musi być wyraźnie wymieniony.

Fragment pliku manifestu aplikacji internetowej poniżej pokazuje, jak przykładowa PWA z muzyką z wstępu może to skonfigurować. 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". Ten element to tablica obiektów, a każdy obiekt reprezentuje wpis 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 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 znajdziesz przykładowy plik web-app-origin-association dla przykładowego PWA z muzyką. Będzie on hostowany w źródle 🎵.example.com i będzie tworzyć powiązanie z progresywną aplikacją internetową music.example.com, zidentyfikowaną 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.

Informacje o wykrywaniu 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ć PWA jako moduł obsługi protokołu URL, ustaw flagę przeglądarki zgodnie z opisem powyżej, a potem zainstaluj 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ć prawo własności, 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 wszystko działa, wyślij do siebie wiadomość testową przy użyciu wybranej aplikacji do obsługi czatu lub e-maila wyświetlonego w kliencie poczty e-mail, który nie jest internetowy, np. Mail w systemie 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 w systemie 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 dla danego wzorca adresu URL jako modułu obsługi adresu URL zarejestruje się więcej niż jedna aplikacja PWA, użytkownik zostanie poproszony o wybranie aplikacji PWA, z którą chce on obsługiwać wzorzec (o ile w ogóle ma to robić). Ta propozycja nie obsługuje nawigacji, które rozpoczynają się na karcie przeglądarki. Jest ona przeznaczona wyłącznie do nawigacji, które rozpoczynają się poza przeglądarką.

Przejrzystość

Jeśli z jakiegokolwiek powodu nie uda się przeprowadzić weryfikacji powiązań 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ą być wykorzystywane 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 obsługa 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 próbują ponownie weryfikować powiązania zainstalowanych aplikacji internetowych. Jeśli rejestracja modułu obsługi adresu URL nie zostanie ponownie zweryfikowana, ponieważ dane powiązania uległy zmianie lub są już niedostępne, przeglądarka usunie rejestracje.

Prześlij opinię

Zespół Chromium chce poznać Twoje wrażenia z korzystania z aplikacji internetowych jako obsługi URL.

Prześlij informacje o projektowaniu interfejsu API

Czy jest coś, co nie działa w interfejsie API zgodnie z oczekiwaniami? A może brakuje Ci metod lub właściwości, których potrzebujesz, by wdrożyć swój pomysł? 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 znalazłeś/znalazłaś błąd w implementacji 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. 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ć 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 wsparcie.

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

Przydatne linki

Podziękowania

Aplikacje PWA jako moduły obsługi adresów URL zostały określone i zaimplementowane przez Lu Huanga i Mandy Chen z zespołu Microsoft Edge. Ten artykuł został sprawdzony przez Joe Medley. Baner powitalny autorstwa Bryson Hammer na Unsplash.