Aby uzyskać bardziej zintegrowane działanie, pozwól zainstalowanym aplikacjom PWA obsługiwać adresy URL.
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ż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 obsługa adresów URL to 2 dodatkowe funkcje:
- Element
"url_handlers"
w pliku manifestu aplikacji internetowej. - 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 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 czytelni 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ługi adresów URL bez tokena próbnego dostawcy, 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.
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"
. 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 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 wiązać się 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ć 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.
Zabezpieczenia i uprawnienia
Zespół Chromium zaprojektował i wdrożył PWA jako moduły obsługi adresów URL, korzystając z podstawowych zasad określonych w artykule Controlling Access to Powerful Web Platform Features (Zarządzanie dostępem do zaawansowanych funkcji platformy internetowej) (w języku angielskim), w tym zasad dotyczących kontroli użytkowników, przejrzystości i ergonomii.
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 tylko 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ą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.
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żywać PWA jako obsługi URL-i? 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
- Publiczny film wyjaśniający
- Demo | Źródło wersji demonstracyjnej
- Błąd śledzenia w Chromium
- Wpis na stronie ChromeStatus.com
- Składnik Blink:
UI>Browser>WebAppInstalls
- Sprawdzanie tagów
- dokumentacja firmy Microsoft,
Podziękowania
Interfejsy PWA jako przetwarzacze adresów URL zostały określone i zaimplementowane 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.