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ć.
Omówienie
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 dla pracowników, urządzeń, pamięci lokalnej i uprawnień w różnych źródłach. Nawigacja między domenami w samodzielnej aplikacji PWA powoduje wyświetlenie okna interfejsu użytkownika (paska „poza zakresem”) informującego, że użytkownik opuścił środowisko aplikacji PWA. 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 równego pochodzenia 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 zgoda między źródłem głównym 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, działania jak najbardziej jak jedna aplikacja internetowa.
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: umożliwia użytkownikom poruszanie się po powiązanych domenach bez zakłócania wrażenia użytkownika przez wywołanie okna z interfejsem użytkownika informującego o opuszczeniu aplikacji internetowej.
- Przechwytywanie linków z innych witryn: zezwalaj aplikacjom internetowym na przechwytywanie stron, do których przechodzą użytkownicy.
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 nowej domeny. 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ą mieć wrażenie, że aplikacja przekierowuje ich do innej.
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 jej zakresie. 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 użytkownika PWA. Na przykład linki będą otwierane na karcie przeglądarki bez wskazywania użytkownikowi, że istnieje aplikacja, która może obsłużyć link. Interfejs API rozszerzeń zakresu 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 do głównego źródła PWA element scope_extensions pliku manifestu aplikacji internetowej, aby umożliwić jej rozszerzenie zakresu 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 bez niego.
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 „Poza zakresem” nie jest wyświetlany w nawigacji między domenami po powiązaniu źródła 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 dotyczące rozszerzeń zakresu w przypadku aplikacji internetowych
- Chęć eksperymentowania
- Mozilla Standards Position
- Apple Standards Position
- Błąd w Chromium
- Progresywne aplikacje internetowe w witrynach z wieloma źródłami
- 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 Giucy. Interfejs API został wdrożony przez Alana Cuttera z Google Chrome oraz Hassana Talata, Kristin Lee i Lu Huang z Microsoft Edge.