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

Pozwól zainstalowanym aplikacjom PWA na obsługę adresów URL, aby zapewnić lepszą integrację.

Thomas Steiner

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

Wyobraź sobie, że rozmawiasz ze znajomym za pomocą komunikatora, np. Wiadomości w systemie macOS, i rozmawiasz o muzyce. Wyobraź sobie, że na swoich urządzeniach i w końcu macie zainstalowaną aplikację PWA music.example.com. Jeśli chcesz udostępnić znajomemu swój ulubiony utwór, wyślij mu precyzyjny link, np. https://music.example.com/rick-astley/never-gonna-give-you-up. Ten link jest dość długi, więc deweloperzy aplikacji music.example.com mogli zdecydować się na dodanie do każdej ścieżki dodatkowego krótkiego linku, np. https://🎵.example.com/r-a/n-g-g-y-u.

PWA jako moduły obsługi adresów URL umożliwiają aplikacjom takim jak music.example.com rejestrowanie się jako moduły obsługi adresów URL dla adresów URL, które pasują do wzorców takich jak https://music.example.com, https://*.music.example.com czy https://🎵.example.com. Dzięki temu linki spoza aplikacji PWA, na przykład 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 obejmuje 2 nowe elementy:

1. Element manifestu aplikacji internetowej "url_handlers".
2. Format pliku web-app-origin-association do weryfikowania powiązań z adresami URL w zakresie i poza nim.

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

Przykłady witryn, w których można używać tego interfejsu API:

• witryny ze strumieniowym przesyłaniem muzyki lub filmów, tak aby linki do śledzenia lub playlisty otwierały się w odtwarzaczu w aplikacji.
• Czytniki wiadomości i kanałów RSS, które otwierają się w trybie czytnika aplikacji.

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

Włączanie na stronie about://flags

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

Użytkownik manifestu aplikacji internetowej "url_handlers"

Aby powiązać zainstalowaną aplikację PWA ze wzorcami adresów URL, należy określić te wzorce w manifeście aplikacji internetowej. Ta zmiana jest dostępna za pośrednictwem użytkownika "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 z symbolem wieloznacznym (*), aby możliwe było uwzględnienie wielu subdomen (np. https://*.example.com). Ta aplikacja internetowa może obsługiwać adresy URL pasujące do tych źródeł. W schemacie zawsze zakłada się, że ma on postać https://, ale trzeba o nim wyraźnie wspomnieć.

Poniższy fragment manifestu aplikacji internetowej pokazuje, jak można to skonfigurować w przykładzie muzycznej PWA. Drugi wpis z symbolem wieloznacznym ("https://*.music.example.com") powoduje, że aplikacja jest również aktywowana na potrzeby elementu 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"
    }
  ]
}

Plik web-app-origin-association

PWA znajduje się w innym źródle (music.example.com) niż niektóre adresy URL, które muszą obsługiwać (np. https://🎵.example.com), aplikacja musi zweryfikować własność tych innych źródeł. Dotyczy to pliku web-app-origin-association hostowanego w innych źródłach.

Ten plik musi zawierać prawidłowy kod JSON. Struktura najwyższego poziomu jest obiektem, którego element ma nazwę "web_apps". Ten element to tablica obiektów, a każdy obiekt reprezentuje wpis unikalnej aplikacji internetowej. Każdy obiekt zawiera:

Każdy obiekt "details" zawiera:

Poniżej znajdziesz przykładowy plik web-app-origin-association z muzyczną aplikacją PWA. Będzie hostowany w źródle 🎵.example.com i utworzy powiązanie z progresywną aplikacją internetową music.example.com określoną za pomocą adresu 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 dopasowuje adres URL do obsługi, jeśli są spełnione oba te warunki:

• Adres URL jest zgodny z jednym z ciągów źródłowych w funkcji "url_handlers".
• Przeglądarka może za pomocą odpowiedniego pliku web-app-origin-association potwierdzić, że poszczególne źródła zgadzają się na obsługę takiego adresu URL przez aplikację.

Dotyczy wykrywania plików web-app-origin-association

Aby przeglądarka mogła wykryć plik web-app-origin-association, deweloperzy muszą umieścić plik web-app-origin-association w folderze /.well-known/ w katalogu głównym aplikacji. Aby można było to zrobić, nazwa pliku musi mieć dokładnie web-app-origin-association.

Pokaz

Aby przetestować PWA jako moduły obsługi adresów URL, ustaw flagę przeglądarki w sposób opisany powyżej, a następnie zainstaluj PWA na https://mandymsft.github.io/pwa/. W pliku manifestu aplikacji internetowej widać, że obsługuje ona adresy URL o tych wzorcach adresów URL: https://mandymsft.github.io i https://luhuangmsft.github.io. Ponieważ ta ostatnia pochodzi z innego źródła (luhuangmsft.github.io) niż PWA, jej własność musi zostać potwierdzona przez mandymsft.github.io. Do tego celu służy plik web-app-origin-association hostowany pod adresem https://luhuangmsft.github.io/.well-known/web-app-origin-association.

Aby sprawdzić, czy wszystko działa, wyślij do siebie wiadomość testową za pomocą wybranej aplikacji do obsługi wiadomości lub e-maila wyświetlonego w kliencie poczty e-mail innym niż internetowy, jak 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 się otworzyć w zainstalowanej aplikacji PWA.

Zabezpieczenia i uprawnienia

Zespół Chromium zaprojektował i wdrożył PWA jako moduły obsługi adresów URL zgodnie z podstawowymi zasadami określonymi w artykule Kontrolowanie dostępu do zaawansowanych funkcji platformy internetowej, w tym dotyczących kontroli użytkownika, przejrzystości i ergonomii.

Kontrola użytkowników

Jeśli więcej niż 1 aplikacja PWA zostanie zarejestrowana jako moduł obsługi adresów URL dla danego wzorca adresu URL, użytkownik zostanie poproszony o wybranie konkretnej aplikacji PWA, z którą będzie się obsługiwała (jeśli w ogóle będzie mieć taką możliwość). Nawigacja uruchamiana na karcie przeglądarki nie jest obsługiwana przez tę ofertę, lecz jednoznacznie dotyczy elementów nawigacyjnych uruchamianych poza przeglądarką.

Przejrzystość

Jeśli z jakiegoś powodu nie uda się przeprowadzić wymaganej weryfikacji powiązania podczas instalacji PWA, przeglądarka nie zarejestruje aplikacji jako aktywnego modułu obsługi adresów URL w przypadku adresów URL, których dotyczy problem. Takie moduły mogą zostać użyte do przejęcia ruchu w witrynach. Dlatego mechanizm powiązywania aplikacji jest ważną częścią tego schematu.

Aplikacje na poszczególnych platformach mogą już korzystać z interfejsów API systemu operacyjnego, aby obliczać aplikacje zainstalowane w systemie użytkownika. Na przykład aplikacje w systemie Windows mogą obliczać moduły obsługi adresów URL za pomocą interfejsu API FindAppUriHandlersAsync. Jeśli PWA są rejestrowane jako moduły obsługi adresów URL na poziomie systemu Windows w systemie Windows, ich obecność będzie widoczna dla innych aplikacji.

Trwałość uprawnień

Źródło może w każdej chwili modyfikować powiązania z PWA. Przeglądarki regularnie próbują ponownie weryfikować powiązania zainstalowanych aplikacji internetowych. Jeśli ponowna weryfikacja rejestracji modułu obsługi adresu 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ć Twoją opinię na temat PWA jako modułów obsługi adresów URL.

Opowiedz nam o projekcie interfejsu API

Czy jest coś, co nie działa w interfejsie API zgodnie z oczekiwaniami? A może brakuje metod lub właściwości, które potrzebujesz do realizacji swojego pomysłu? Masz pytanie lub komentarz na temat modelu bezpieczeństwa? Zgłoś problem ze specyfikacją w odpowiednim repozytorium GitHub lub dodaj swoje uwagi na temat istniejącego problemu.

Zgłoś problem z implementacją

Czy wystąpił błąd w implementacji Chromium? A może implementacja różni się od specyfikacji? Zgłoś błąd na new.crbug.com. Podaj jak najwięcej szczegółów i proste instrukcje dotyczące odtwarzania oraz wpisz UI>Browser>WebAppInstalls w polu Komponenty. Usterki to świetny sposób na udostępnianie szybkich i łatwych replik.

Pokaż obsługę interfejsu API

Czy zamierzasz używać PWA jako modułów obsługi adresów URL? Twoja publiczna pomoc pomaga zespołowi Chromium priorytetowo traktować funkcje i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.

Wyślij tweeta na adres @ChromiumDev, używając hashtagu #URLHandlers, i daj nam znać, gdzie i jak używasz tego elementu.

Przydatne linki

• Wyjaśnienie publiczne
• Prezentacja | Źródło wersji demonstracyjnej
• Błąd śledzenia w Chromium
• Wpis na ChromeStatus.com
• Komponent Blink: UI>Browser>WebAppInstalls
• Przegląd tagów
• Dokumentacja firmy Microsoft

Podziękowania

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. Autor artykułu: Joe Medley. Baner powitalny autorstwa Brysona Hammera w filmie Unsplash.