Rozszerzenia zakresu aplikacji internetowych

Od Chrome 122 możesz zasubskrybować wersję próbną origin pliku manifestu aplikacji scope_extensions, dzięki czemu witryny, które kontrolują wiele subdomen i domen najwyższego poziomu, mogą być przedstawiane w jednej aplikacji internetowej. W tym dokumencie wyjaśniamy, dlaczego zespół Chrome wprowadza tę funkcję i kiedy warto jej używać.

Demián Renzulli

Thomas Steiner

Przegląd

Niektóre aplikacje internetowe mają wiele źródeł, na przykład example.com jako główną aplikację, a potem space_1.example.com, ..., space_n.example.com (czasami w ramach środowiska podrzędnego – special-example.com), a wszystko to w głównej aplikacji. Ten typ architektury witryny ma wpływ w kontekście progresywnych aplikacji internetowych. Ograniczenia obejmują możliwość udostępniania skryptów service worker, urządzeń dowolnego typu, pamięci lokalnej i uprawnień między źródłami. Poza tym nawigacja między domenami w samodzielnej aplikacji PWA wyświetla interfejs okna (pasek „poza zakresem”) wskazujący, że użytkownik przeszedł z wersji PWA. Więcej informacji o rozwiązywaniu niektórych z tych problemów znajdziesz w artykułach Progresywne aplikacje internetowe w witrynach wieloźródłowych i Tworzenie wielu progresywnych aplikacji internetowych w tej samej domenie.

Interfejs Scope Extensions API pozwala aplikacjom internetowym stawić czoła pewnym wyzwaniom, jakie zasady dotyczące tego samego pochodzenia nakładają na ten typ architektury witryn. Umożliwia aplikacjom internetowym poszerzanie ich zakresu o inne źródła, co pomaga uzyskać ujednolicone środowisko przy zachowaniu zgodności między pierwotnym źródłem aplikacji a powiązanymi źródłami.

Uwaga: w tym momencie tylko ChromeOS obsługuje obie funkcje rozszerzeń zakresu omówione w tym dokumencie (nawigację w zakresie z innych domen i rejestrowanie linków z innych domen). Nawigacja w zakresie między domenami jest też obsługiwana w Chrome w systemach Windows, macOS i Linux, ale integracja z przechwytywaniem linków nie jest jeszcze dostępna na tych platformach. Rozszerzenia zakresu nie są jeszcze dostępne na urządzeniach mobilnych.

Cele

Głównym celem interfejsu Scope Extensions API jest umożliwienie witrynom kontrolującym wiele subdomen i domen najwyższego poziomu działanie w ramach interfejsu aplikacji internetowej i przechwytywania linków jak jedna przyległa aplikacja internetowa. Na przykład zezwalanie witrynie example.com, która obejmuje elementy example.com.co.uk i support.example.com, na działanie w maksymalnym możliwym zakresie jak pojedyncza aplikacja internetowa.

Rozszerzenia zakresu umożliwiają PWA wieloźródłowe w przypadku interfejsu aplikacji internetowej działają jak przyległa aplikacja internetowa.

W praktyce oznacza to dwa bardziej szczegółowe cele:

• Nawigacja między domenami: zezwalaj użytkownikom na poruszanie się po powiązanych źródłach bez zakłócania wrażeń użytkowników, wywołując interfejs okna z informacją o wycofaniu PWA.
• Rejestrowanie linków z innych domen:zezwalaj aplikacjom internetowym na rejestrowanie nawigacji użytkowników do witryn, z którymi są powiązane.

Nawigacja w zakresie między domenami

Domyślnie, gdy użytkownicy przechodzą między źródłami w samodzielnej aplikacji PWA, widzą interfejs okna z informacją, że są poza tą aplikacją. W Chrome ten interfejs składa się z paska „poza zakresem” zawierającego URL nowego źródła. Utrudni to korzystanie z aplikacji, ponieważ użytkownicy oczekują, że nadal będą przechodzić w tym samym kontekście aplikacji, ale mogą uznać, że są z niego usuwani.

Pasek „Poza zakresem” wyświetlany w Chrome, gdy użytkownicy przechodzą z różnych źródeł w samodzielnej aplikacji PWA.

Dzięki rozszerzeniom zakresu interfejs okna nie będzie wyświetlany, gdy użytkownicy przechodzą do któregoś z powiązanych źródeł, dzięki czemu aplikacja PWA jest prezentowana jako ujednolicone środowisko.

Rejestrowanie linków z innych domen

Przechwytywanie linków to zdolność aplikacji do rejestrowania linków w swoim zakresie. Sposób implementacji różni się w zależności od przeglądarki i systemu operacyjnego. Na przykład w Chrome w ChromeOS linki w zakresie zainstalowanej aplikacji PWA domyślnie otwierają kartę przeglądarki z informacją na pasku adresu, że istnieje aplikacja, która obsługuje te linki. Użytkownik może wtedy włączyć automatyczne rejestrowanie linków od tego momentu.

Fragment paska adresu Chrome na karcie w ChromeOS z wizualną wskazówką, że link może być obsługiwany przez PWA, oraz opcją zapamiętania tej decyzji.

Jeśli użytkownik kliknie link spoza zakresu aplikacji PWA (w tym linki do subdomen lub domen najwyższego poziomu), nie zostanie rozpoznany jako należący do użytkownika. Na przykład linki będą otwierane na karcie przeglądarki bez informowania użytkownika, że istnieje aplikacja, która obsługuje ten link. Interfejs ScopeExtensions API umożliwia poszerzenie zakresu aplikacji PWA, tak aby powiązane źródła były traktowane jako linki objęte raportowaniem MRC.

Implementacja

Implementacja rozszerzeń zakresu wymaga ustanowienia relacji między głównym źródłem a powiązanymi źródłami.

Deklarowanie listy powiązanych źródeł

Dodaj użytkownika manifestu aplikacji internetowej scope_extensions do głównego źródła PWA, aby umożliwić aplikacji internetowej rozszerzenie swojego zakresu na inne źródła.

Plik manifestu aplikacji internetowej (https://example.com)

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    { "origin": "https://*.example.com" },
    { "origin": "https://example.co.uk" },
    { "origin": "https://*.example.co.uk" }
  ]
}

Potwierdź powiązania

Każde z wymienionych na liście źródeł potwierdza powiązanie z aplikacją internetową za pomocą pliku konfiguracji /.well-known/web-app-origin-association. Ten plik musi mieć nazwę web-app-origin-association i muszą znajdować się dokładnie w tej lokalizacji, ponieważ jest to dobrze znany identyfikator URI.

/.well-known/web-app-origin-association (powiązane źródło)

{
  "web_apps": [{ "web_app_identity": "https://example.com" }]
}

Pokaz

Wersja demonstracyjna składa się z 2 witryn:

• Główna aplikacja PWA: rzeczywista aplikacja internetowa PWA, która deklaruje listę powiązanych źródeł za pomocą elementu scope_extensions w pliku manifestu aplikacji internetowej.
• Źródło w rozszerzonym zakresie: źródło spoza głównego zakresu PWA, ale powiązane z nim po umieszczeniu go na liście przez główną aplikację PWA jako powiązane źródło i potwierdzenie związku za pomocą pliku web-app-origin-association.

Aby wykonać poniższe testy, musisz włączyć flagę about://flags/#enable-desktop-pwas-scope-extensions (dostępną od Chrome od wersji 115).

Testowanie nawigacji między domenami

Warunkiem wstępnym tych testów jest otwarcie głównej aplikacji PWA w przeglądarce, zainstalowanie jej jako aplikacji PWA i uruchomienie jej w trybie samodzielnym. PWA zawiera linki do źródła w rozszerzonym zakresie i do źródła spoza rozszerzonego zakresu.

Wersja demonstracyjna aplikacji PWA z linkami do źródła w rozszerzonym zakresie i nie w rozszerzonym zakresie.

Domyślna nawigacja między domenami (nie w rozszerzonym zakresie)

1. W pełnoekranowej aplikacji PWA kliknij link do źródła spoza rozszerzonego zakresu.
2. W rezultacie następuje nawigacja i wyświetla się pasek Poza zakresem.

Pasek „Poza zakresem” wyświetlany domyślnie w przypadku nawigacji między domenami w przypadku aplikacji PWA w trybie samodzielnym.

Nawigacja między domenami w ramach rozszerzeń zakresu (w rozszerzonym zakresie)

1. Wróć na stronę główną aplikacji PWA.
2. Kliknij link do źródła spoza rozszerzonego zakresu.
3. Domyślnie powinien być wyświetlany pasek „poza zakresem”, ale nie jest on widoczny ze względu na powiązanie z rozszerzeniami zakresu.

Pasek „Poza zakresem” nie wyświetla się w nawigacji między domenami po powiązaniu punktu początkowego za pomocą rozszerzeń zakresu.

Testowanie rejestrowania linków z innych domen

1. Otwórz i zainstaluj główną aplikację PWA na urządzeniu z ChromeOS.
2. Kliknij ten link: powiązane źródło.
3. Link otwiera się w nowej karcie przeglądarki i wyświetla się prośba o jego otwarcie w zainstalowanej aplikacji PWA.

Kliknięcie linku do źródła powiązanego z aplikacją PWA powoduje otwarcie linku w nowej karcie i wyświetlenie ikony „Otwórz w aplikacji”, która umożliwia użytkownikowi wyrażenie zgody na automatyczne przechwytywanie linków.

Testowanie origin

Jeśli chcesz przetestować ten interfejs API w swojej aplikacji w terenie z udziałem prawdziwych użytkowników, możesz to zrobić za pomocą próbnej wersji origin. Testowanie origin pozwala wypróbować funkcje eksperymentalne użytkownikom przez uzyskanie tokena testowego powiązanego z Twoją domeną. Następnie możesz wdrożyć aplikację i oczekiwać, że będzie działać w przeglądarce obsługującej testowaną funkcję (w tym przypadku jest ona dostępna w Chrome w wersjach od 121 do 126). Aby uzyskać własny token do testowania origin, wypełnij formularz zgłoszeniowy.

Prześlij opinię

Zespół Chrome czeka na opinie na temat przydatności tego interfejsu API. Aby pomóc zespołowi w rozwijaniu tego interfejsu API, dzieląc się opiniami o jego przydatności i nowych przypadkach użycia, których nie omówiliśmy w bieżącej wersji, zgłoś nam problem na GitHubie.

Dodatkowe materiały

• Scope Extensions API – wersja próbna origin
• Stan Chrome – rozszerzenia zakresu aplikacji internetowych
• Omówienie rozszerzeń zakresu dla aplikacji internetowych
• Zamiar eksperymentu
• Stanowisko w standardzie Mozilla
• Stanowisko w zakresie standardów Apple
• Błąd Chromium
• Progresywne aplikacje internetowe w witrynach wieloźródłowych
• Tworzenie wielu progresywnych aplikacji internetowych w tej samej domenie

Podziękowania

Specjalne podziękowania należą się zespołowi pracującemu nad tym interfejsem API. Rozszerzenia zakresu zostały wskazane przez Alana Cuttera i Lua Huanga, a informacje zebrane przez Matta Giuca. Interfejs API zaimplementowali Alan Cutter z Google Chrome oraz Hassan Talat, Kristin Lee i Lu Huang z Microsoft Edge.