Ta strona została przetłumaczona przez Cloud Translation API.

Rozszerzenia zakresu aplikacji internetowych

W Chrome 122 możesz zasubskrybować wersję próbną origin dla scope_extensions użytkownik pliku manifestu aplikacji, który zezwala na witryny kontrolujące wiele subdomen i najwyższych pozycji i prezentować domeny jako pojedynczą aplikację internetową. Wyjaśniamy w nim, dlaczego zespół Chrome wprowadza tę funkcję i wskaż, kiedy możesz z niej korzystać.

Demián Renzulli

Thomas Steiner

Omówienie

Niektóre aplikacje internetowe mają wiele origins, dla przykład: example.com jako główna aplikacja, a potem space_1.example.com, ..., space_n.example.com, czasami w połączeniu z special-example.com, jako i funkcje dodatkowe dostępne w głównej aplikacji. Witryny tego typu w kontekście progresywnych aplikacji internetowych. Ograniczenia obejmują brak możliwości udostępniania mechanizmów Service Worker, urządzeń dowolnego typu, pamięci lokalnej i uprawnień w różnych źródłach. Oprócz tego nawigacja między domenami w samodzielna aplikacja PWA wyświetla UI (pasek „poza zakresem”), co wskazuje, że użytkownik nie jest już dostępna PWA. Możesz dowiedzieć się, jak obchodzić niektóre te problemy wymienione w artykułach Progresywne aplikacje internetowe w witrynach wieloźródłowych oraz Tworzenie wielu progresywnych aplikacji internetowych w tej samej domenie.

Interfejs Scope Extensions API pozwala aplikacjom internetowym stawić czoła pewnym wyzwaniom, zasady dotyczące tej samej domeny nakłada na tego typu architekturę witryny. Pozwala aplikacjom internetowym rozszerzać zakres do innych źródeł z myślą o ujednoliceniu wyników, biorąc pod uwagę porozumienie między i powiązane źródła.

Cele

Głównym celem interfejsu Scope Extensions API jest umożliwienie witrynom, które kontrolują wiele subdomen i domen najwyższego poziomu, aby działała jak jedna aplikacja internetowa, jeśli chodzi o interfejs aplikacji internetowej i przechwytywanie linków. Na przykład zezwolenie witrynie Pole example.com, które obejmuje example.com.co.uk i support.example.com, zachowuje się jak pojedyncza aplikacja internetowa.

Diagram przedstawiający główną aplikację PWA i powiązane środowiska podrzędne.

Rozszerzenia zakresu pozwalają aplikacjom PWA z wielu źródeł działać jako sąsiednie aplikacje internetowe, gdy w interfejsie aplikacji internetowych.

W praktyce przekłada się to na 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żytkownika przez wywołanie interfejsu okna, informując że użytkownicy odchodzą od progresywnej aplikacji internetowej.
Rejestrowanie linków z innych domen: zezwalaj aplikacjom internetowym na przechwytywanie informacji o ruchu użytkownika w celu witryn, z którymi są powiązani.

Nawigacja w zakresie między domenami

Domyślnie, gdy użytkownicy poruszają się między źródłami w samodzielnej aplikacji PWA, wyświetliło się interfejs okna z informacją, że aplikacje wychodzą poza środowisko PWA. W Chrome ten interfejs użytkownika występuje jako „poza zakresem” zawierający adres URL nowe źródło. Jest to uciążliwe, ponieważ użytkownicy oczekują poruszają się wewnątrz tego samego kontekstu aplikacji, ale mogą uznać, są usuwane.

Pasek „poza zakresem” u góry samodzielnej aplikacji PWA.

„Wykracza poza zakres” pasek wyświetlany w Chrome, gdy użytkownicy poruszają się między różnymi źródłami w samodzielnej aplikacji PWA.

W przypadku rozszerzeń zakresu interfejs okna nie będzie wyświetlany, gdy użytkownicy przejdą do powiązanych źródeł, aby progresywna aplikacja internetowa była prezentowana jako spójna.

Rejestrowanie linków z innych domen

Wykrywanie linków to zdolność aplikacji do przechwytywania linków w zakresu. Sposób implementacji różni się w zależności od przeglądarki i systemu operacyjnego, systemów uczących się. Na przykład w Chrome w ChromeOS linki w zakresie Usługa PWA domyślnie otwiera kartę przeglądarki z informacją na pasku adresu, że istnieje aplikacja, która obsługuje te linki, dzięki czemu użytkownik może włączyć automatyczne przechwytywanie linków od tego momentu.

Prompt Omnibar dotyczący zainstalowanej aplikacji PWA.

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

Jeśli użytkownik kliknie link, który wykracza poza zakres progresywnej aplikacji internetowej (w tym linków do subdomen lub domen najwyższego poziomu), nie będą rozpoznawane jako należące do . Na przykład linki będą się otwierać na karcie przeglądarki bez żadnych informacji że istnieje aplikacja, która może obsłużyć ten link. Zakres Interfejs Extensions API pozwala rozszerzyć zakres PWA, aby powiązane źródła są traktowane jako linki w zakresie.

Implementacja

Implementacja rozszerzeń zakresu wymaga ustalenia relacji między główne i powiązane z nimi punkty początkowe.

Zadeklaruj listę powiązanych źródeł

Dodaj użytkownika manifestu aplikacji internetowej scope_extensions do głównego źródła PWA do pozwalają aplikacji internetowej rozszerzyć swój zakres 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 źródeł potwierdza powiązanie z aplikacją internetową za pomocą tagu /.well-known/web-app-origin-association plik konfiguracji. Ten plik musi: o nazwie web-app-origin-association i wyświetlenie reklamy w dokładnie tej lokalizacji, 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" }]
}

Prezentacja

Wersja demonstracyjna obejmuje 2 witryny:

Główna PWA: rzeczywista aplikacja PWA, deklaruje listę powiązanych źródeł za pomocą elementu scope_extensions w pliku manifestu aplikacji internetowej.
Origin w rozszerzonym zakresie: źródło spoza głównego zakresu PWA, ale powiązane z nim po umieszczeniu przez główną aplikację PWA jako powiązane źródło i potwierdzając relację przez web-app-origin-association plik.

Aby wykonać te testy, musisz włączyć Flaga about://flags/#enable-desktop-pwas-scope-extensions (dostępna od Chrome w wersji 115 lub nowszej).

Testowanie nawigacji między domenami

Aby przeprowadzić te testy, otwórz główną aplikację PWA w przeglądarce, zainstaluj ją jako aplikację PWA; i uruchomić go w trybie samodzielnym. Progresywna aplikacja internetowa zawiera linki do origin w rozszerzonym zakresie i do źródło nie należy do rozszerzonego zakresu.

Główne okno PWA z linkami do zakresu i z linkami rozszerzonego zakresu.

Wersja demonstracyjna PWA z linkami do źródła w rozszerzonym zakresie i źródle nierozszerzonego zakresu.

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

Kliknij link do źródła spoza rozszerzonego zakresu. w ramach pełnoekranowej aplikacji PWA.
W rezultacie odbywa się nawigacja i wyświetla się pasek Poza zakresem.

Główne okno aplikacji PWA z paskiem poza zakresem po kliknięciu linku poza zakresem.

„Wykracza poza zakres” wyświetlany domyślnie w przypadku nawigacji między domenami w przypadku aplikacji PWA w języku w trybie samodzielnym.

Nawigacja między domenami z rozszerzeniami zakresu (w zakresie rozszerzonym)

Wróć na stronę główną aplikacji PWA.
Kliknij link pochodzenie spoza rozszerzonego zakresu.
Domyślnie zdarzenie „wykracza poza zakres” powinien być widoczny, ale ze względu na zakres Powiązanie z rozszerzeniami – nie jest.

Główne okno aplikacji PWA bez paska „poza zakresem” po kliknięciu linku do rozszerzonego zakresu.

„Wykracza poza zakres” pasek nie wyświetla się w nawigacji między domenami po powiązaniu źródła została stworzona za pomocą rozszerzeń zakresu.

Przetestuj przechwytywanie linków z innych domen

Otwórz i zainstaluj główną aplikację PWA Urządzenie z ChromeOS.
Kliknij ten link: powiązane źródło.
Link otwiera się w nowej karcie przeglądarki i wyświetla się prośba o jego otwarcie z zainstalowaną aplikacją PWA.

Prompt Omnibar dotyczący zainstalowanej aplikacji PWA w rozszerzonym zakresie.

Kliknięcie linku do powiązanego źródła aplikacji PWA otwiera link w nowej karcie wyświetla się komunikat „Otwórz w aplikacji”, ikona umożliwiająca użytkownikowi wyrażenie zgody na automatyczne połączenie przechwytywanie.

Wersja próbna origin

Jeśli chcesz przetestować ten interfejs API w swojej aplikacji, używając rzeczywistych danych użytkowników, możesz to zrobić za pomocą origin próbny. Wersje próbne origin pozwalają testować użytkownikom funkcje eksperymentalne dzięki token testowy powiązany z domeną. Następnie możesz wdrożyć aplikację powinien działać w przeglądarce obsługującej testowaną funkcję (w tym jest dostępny w Chrome w wersjach od 121 do 126). Aby uzyskać własny token dla uruchom test origin, wypełnij formularz zgłoszeniowy.

Prześlij opinię

Zespół Chrome chce poznać opinie na temat użyteczności tego interfejsu API. Do aby pomóc zespołowi rozwijać ten interfejs API, dzieląc się opiniami na temat jego przydatności nowe przypadki użycia nieuwzględnione w bieżącej wersji, otwórz Problem w GitHubie.

Dodatkowe materiały

Podziękowania

Specjalne podziękowania należą się zespołowi pracującemu nad tym interfejsem API. Rozszerzenia zakresu została określona przez Alana Cuttera i Lu Huang, z uwzględnieniem opinii: Matt Giuca Interfejs API został wdrożony przez Alan Cutter z Google Chrome Hassan Talat Kristin Lee i Lu Huang z Microsoft Edge.