Od wersji 122 Chrome możesz subskrybować wersję próbną dla źródła w przypadku elementu manifestu aplikacji scope_extensions, który umożliwia prezentowanie witryn kontrolujących wiele subdomen i domen najwyższego poziomu jako pojedynczej aplikacji internetowej. W tym dokumencie wyjaśniamy, dlaczego zespół Chrome wprowadza tę funkcję i kiedy warto z niej korzystać.
Przegląd
Niektóre aplikacje internetowe mają wiele źródeł, na przykład example.com jako aplikacja główna, a potem space_1.example.com, …, space_n.example.com, czasami połączone z special-example.com, jako podfunkcje, wszystkie w ramach aplikacji głównej. Ten typ architektury witryny ma znaczenie w kontekście progresywnych aplikacji internetowych.
Ograniczenia obejmują brak możliwości udostępniania usług, urządzeń, pamięci lokalnej i uprawnień w różnych źródłach. Ponadto w przypadku nawigacji między domenami w samodzielnej aplikacji internetowej wyświetla się okno (pasek „poza zakresem”), co wskazuje, że użytkownik opuścił środowisko aplikacji internetowej. Sposoby obejścia 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 umożliwia aplikacjom internetowym przezwyciężenie niektórych problemów, które zasada dotycząca tego samego źródła narzuca na tego typu architekturę witryny. Umożliwia ona aplikacjom internetowym rozszerzenie zakresu na inne źródła, aby zapewnić spójne działanie, o ile istnieje zgodność między źródłem podstawowym aplikacji internetowej a powiązanymi źródłami.
Cele
Głównym celem interfejsu Scope Extensions API jest umożliwienie witrynom, które kontrolują wiele subdomen i domen najwyższego poziomu, zachowywanie się jak jedna spójna aplikacja internetowa, jeśli chodzi o interfejs użytkownika aplikacji internetowej i przechwytywanie linków. Na przykład umożliwienie witrynie example.com, która obejmuje example.com.co.uk i support.example.com, jak najwięcej zachowań typowych dla pojedynczej aplikacji internetowej.
Rozszerzenia zakresu umożliwiają, aby aplikacje PWA z wielu źródeł działały jak ciągła aplikacja internetowa pod względem interfejsu użytkownika.
W praktyce przekłada się to na 2 bardziej szczegółowe cele:
- Nawigacja między domenami: użytkownicy mogą się przełączać między powiązanymi domenami, nie zakłócając wrażeń, ponieważ nie wyświetla się okno z interfejsem użytkownika informujące o opuszczeniu aplikacji internetowej.
- Przechwytywanie linków z innych witryn: umożliwia aplikacjom internetowym przechwytywanie informacji o przechodzeniu użytkowników do witryn, z którymi są powiązane.
Nawigacja w obrębie domeny objętej raportowaniem
Domyślnie, gdy użytkownicy przechodzą między źródłami w samodzielnej aplikacji PWA, wyświetla się im okno z interfejsem, które informuje, że opuszczają środowisko aplikacji PWA. W Chrome interfejs ten składa się z paska „poza zakresem”, który zawiera adres URL nowego źródła. Wpływa to negatywnie na wrażenia użytkowników, ponieważ oczekują oni, że będą mogli kontynuować nawigację w tym samym kontekście aplikacji, ale mogą odnieść wrażenie, że aplikacja została zamknięta.
Pasek „poza zakresem” wyświetlany w Chrome, gdy użytkownicy przechodzą między różnymi źródłami w samodzielnej aplikacji PWA.
Dzięki rozszerzeniom zakresu interfejs okna nie będzie wyświetlany, gdy użytkownicy będą przechodzić do dowolnego powiązanego źródła, dzięki czemu PWA będzie prezentować się jako jednolita usługa.
Przechwytywanie linków między domenami
Przechwytywanie linków to zdolność aplikacji do przechwytywania linków w ramach jej zakresu. Sposób implementacji różni się w zależności od przeglądarki i systemu operacyjnego. W Chrome na ChromeOS na przykład linki w zakresie zainstalowanej PWA domyślnie otwierają kartę przeglądarki z oznaczeniem na pasku adresu, że jest aplikacja, która może obsługiwać te linki. Użytkownik może od tego momentu włączyć automatyczne przechwytywanie linków.
Fragment paska adresu Chrome na karcie w ChromeOS pokazujący wizualny wskaźnik, że link może być obsługiwany przez PWA, oraz opcję zapamiętania tej decyzji
Jeśli użytkownik kliknie link, który wykracza poza zakres PWA (w tym linki do subdomen lub domen najwyższego poziomu), nie zostanie on uznany za należący do PWA. Na przykład linki będą otwierane na karcie przeglądarki bez żadnej informacji dla użytkownika, że istnieje aplikacja, która może obsłużyć link. Interfejs API zakresu rozszerzeń umożliwia rozszerzenie zakresu aplikacji internetowej, aby powiązane źródła były traktowane jako linki w zakresie.
Implementacja
Wdrożenie 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 element scope_extensions pliku manifestu aplikacji internetowej do głównego źródła PWA, aby umożliwić rozszerzenie zakresu aplikacji internetowej na inne źródła.
Manifest 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" }
]
}
Potwierdzenie powiązań
Każda z wymienionych usług potwierdza powiązanie z aplikacją internetową za pomocą pliku konfiguracyjnego /.well-known/web-app-origin-association. Plik musi mieć nazwę web-app-origin-association i być wyświetlany dokładnie w tej lokalizacji, ponieważ jest to znany identyfikator URI.
/.well-known/web-app-origin-association (powiązany origin)
{
"web_apps": [{ "web_app_identity": "https://example.com" }]
}
Prezentacja
Demonstracja składa się z 2 witryn:
- Główna PWA: rzeczywista PWA, która deklaruje listę powiązanych źródeł za pomocą elementu
scope_extensionsw pliku manifestu aplikacji internetowej. - Pochodzenie o rozszerzonym zakresie: pochodzenie spoza zakresu głównej aplikacji PWA, ale powiązane z nią po uwzględnieniu przez główną aplikację PWA jako powiązanego pochodzenia i po potwierdzeniu tego związku w pliku
web-app-origin-association.
Aby wykonać te testy, musisz włączyć flagę about://flags/#enable-desktop-pwas-scope-extensions (dostępną od wersji Chrome 115).
Testowanie nawigacji między domenami
Aby przeprowadzić te testy, otwórz główną aplikację PWA w przeglądarce, zainstaluj ją jako PWA i otwórz, aby uruchomić ją w trybie samodzielnym. PWA zawiera linki do źródła o rozszerzonym zakresie i do źródła o nierozszerzonym zakresie.
Demonstracyjna PWA z linkami do punktu początkowego w rozszerzonym zakresie i poza nim.
Domyślna nawigacja między domenami (nie w rozszerzonym zakresie)
- W PWA w trybie pełnoekranowym kliknij link do źródła, które nie jest w rozszerzonym zakresie.
- W efekcie następuje nawigacja i wyświetla się pasek poza zakresem.
Pasek „Poza zakresem” wyświetlany domyślnie w przypadku nawigacji między domenami w ramach PWA w trybie samodzielnym.
Nawigacja między domenami za pomocą rozszerzeń zakresu (w rozszerzonym zakresie)
- Wróć na stronę główną PWA.
- Kliknij link do źródła, które nie jest objęte rozszerzonym zakresem.
- Domyślnie powinna się wyświetlać belka „poza zakresem”, ale nie jest to możliwe z powodu powiązania rozszerzeń z zakresem.
Pasek „Out of scope” (Poza zakresem) nie jest wyświetlany w nawigacji między domenami po powiązaniu domeny za pomocą rozszerzeń zakresu.
Testowanie przechwytywania linków z wielu źródeł
- Na urządzeniu z ChromeOS otwórz i zainstaluj główną PWA.
- Kliknij ten link: powiązany punkt początkowy.
- Link otworzy się w nowej karcie przeglądarki, a na ekranie wyświetli się prośba o otworzenie go w zainstalowanej aplikacji PWA.
Kliknięcie linku do powiązanego źródła aplikacji internetowej otwiera link w nowej karcie i wyświetla ikonę „Otwórz w aplikacji”, która umożliwia użytkownikowi włączenie automatycznego przechwytywania linków.
Wersja próbna origin
Jeśli chcesz przetestować ten interfejs API w swojej aplikacji w warunkach rzeczywistych z udziałem prawdziwych użytkowników, możesz to zrobić w ramach testowania origin. Testy Origin umożliwiają wypróbowanie eksperymentalnych funkcji przez użytkowników. Wystarczy, że uzyskasz token testowy powiązany z Twoją domeną. Następnie możesz wdrożyć aplikację i oczekiwać, że będzie działać w przeglądarce, która obsługuje testowaną funkcję (w tym przypadku jest to Chrome w wersjach od 121 do 126). Aby uzyskać własny token na potrzeby testowania pochodzenia, 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 ulepszać ten interfejs API, prześlij opinię na temat jego przydatności i nowych przypadków użycia, które nie są objęte obecną wersją. Aby to zrobić, otwórz problem na GitHubie.
Dodatkowe materiały
- Interfejs API rozszerzeń zakresu – Origin Trial
- Stan Chrome – rozszerzenia zakresu aplikacji internetowej
- Wyjaśnienie rozszerzeń zakresu w przypadku aplikacji internetowych
- Zamierzasz przeprowadzić eksperyment
- Mozilla Standards Position
- Apple Standards Position
- Błąd w Chromium
- Progresywne aplikacje internetowe w witrynach z wielu domen
- Tworzenie wielu progresywnych aplikacji internetowych w tej samej domenie
Podziękowania
Szczególne podziękowania dla zespołu, który opracował ten interfejs API. Rozszerzenia zakresu zostały określone przez Alana Cuttera i Lu Huang z udziałem Matta Giuca. Interfejs API został wdrożony przez Alana Cuttera z Google Chrome oraz Hassana Talata, Kristin Lee i Lu Huang z Microsoft Edge.