Od Chrome 122 możesz zarejestrować się w eksperymentalnej wersji scope_extensionselementu manifestu aplikacji, który umożliwia wyświetlanie 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ł, np. 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 podrzędne funkcje, wszystkie w ramach głównej aplikacji. Ten typ architektury witryny ma znaczenie w kontekście progresywnych aplikacji internetowych.
Ograniczenia obejmują brak możliwości udostępniania między źródłami service workerów, dowolnego typu urządzenia, pamięci lokalnej i uprawnień. Poza tym nawigacja między domenami w samodzielnej progresywnej aplikacji internetowej wyświetla interfejs okna (pasek „poza zakresem”), który informuje użytkownika, że opuścił on aplikację. Więcej informacji o tym, jak rozwiązać niektóre z tych problemów, znajdziesz w artykułach Progresywne aplikacje internetowe w witrynach z wieloma źródłami i Tworzenie wielu progresywnych aplikacji internetowych w tej samej domenie.
Interfejs Scope Extensions API pozwala aplikacjom internetowym pokonać niektóre wyzwania, które zasada tego samego pochodzenia stawia przed tego typu architekturą witryny. Umożliwia to aplikacjom internetowym rozszerzenie zakresu na inne źródła, aby zapewnić spójność działania, pod warunkiem że główne źródło aplikacji internetowej i powiązane z nim źródła wyrażą na to zgodę.
Cele
Głównym celem interfejsu Scope Extensions API jest umożliwienie witrynom, które kontrolują wiele subdomen i domen najwyższego poziomu, zachowywania się jak jedna ciągła aplikacja internetowa w zakresie interfejsu aplikacji internetowej i przechwytywania linków. Na przykład umożliwiając witrynie
example.com obejmującej example.com.co.uk i support.example.com zachowywanie się w jak największym stopniu jak pojedyncza aplikacja internetowa.
Rozszerzenia zakresu umożliwiają wielopochodzeniowym progresywnym aplikacjom internetowym zachowywanie się jak spójna aplikacja internetowa w zakresie 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ę między powiązanymi domenami bez zakłócania wrażeń użytkownika przez wywoływanie interfejsu okna informującego użytkownika, że opuszcza on progresywną aplikację internetową.
- Przechwytywanie linków z różnych źródeł: umożliwia aplikacjom internetowym przechwytywanie nawigacji użytkowników do powiązanych z nimi witryn.
Nawigacja między domenami objęta raportowaniem
Domyślnie, gdy użytkownicy przechodzą między źródłami w samodzielnej aplikacji PWA, wyświetla się interfejs okna informujący, że opuszczają aplikację PWA. W Chrome ten interfejs składa się z paska „poza zakresem”, który zawiera adres URL nowego pochodzenia. Zakłóca to wrażenia użytkowników, ponieważ oczekują oni, że będą mogli kontynuować nawigację w kontekście tej samej aplikacji, ale mogą odnieść wrażenie, że zostali z niej przeniesieni.
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 przejdą do dowolnego z powiązanych źródeł, dzięki czemu aplikacja PWA będzie prezentowana jako spójna usługa.
Przechwytywanie linków z różnych domen
Przechwytywanie linków to możliwość przechwytywania przez aplikację linków w jej zakresie. Sposób implementacji tej funkcji różni się w zależności od przeglądarki i systemu operacyjnego. Na przykład w Chrome na ChromeOS linki w zakresie zainstalowanej progresywnej aplikacji internetowej domyślnie otwierają kartę przeglądarki ze wskazaniem na pasku adresu, że istnieje aplikacja, która może obsługiwać te linki. Umożliwia to użytkownikowi włączenie automatycznego przechwytywania linków od tego momentu.
Fragment paska adresu Chrome na karcie w ChromeOS z wizualnym wskazaniem, że link może być obsługiwany przez PWA, oraz opcją zapamiętania tej decyzji.
Jeśli użytkownik kliknie link, który nie mieści się w zakresie działania PWA (w tym linki do subdomen lub domen najwyższego poziomu), nie zostanie rozpoznany jako należący do tej aplikacji. Na przykład linki będą otwierane w karcie przeglądarki bez żadnej informacji dla użytkownika, że istnieje aplikacja, która może obsłużyć ten link. Interfejs Scope Extensions API umożliwia rozszerzenie zakresu aplikacji PWA, tak aby powiązane z nią źródła były traktowane jako linki w zakresie.
Implementacja
Wdrożenie rozszerzeń zakresu wymaga nawiązania 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ć aplikacji internetowej 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" }
]
}
Potwierdzanie powiązań
Każde z wymienionych źródeł potwierdza powiązanie z aplikacją internetową za pomocą pliku konfiguracyjnego /.well-known/web-app-origin-association. Ten plik musi mieć nazwę web-app-origin-association i być udostępniany w tej lokalizacji, ponieważ jest to dobrze znany identyfikator URI.
/.well-known/web-app-origin-association (powiązany origin)
{
"web_apps": [{ "web_app_identity": "https://example.com" }]
}
Prezentacja
Wersja demonstracyjna składa się z 2 witryn:
- Główna progresywna aplikacja internetowa: rzeczywista progresywna aplikacja internetowa, która deklaruje listę powiązanych źródeł za pomocą elementu
scope_extensionsw swoim pliku manifestu aplikacji internetowej. - Pochodzenie w zakresie rozszerzonym: pochodzenie spoza głównego zakresu aplikacji PWA, ale powiązane z nią po tym, jak główna aplikacja PWA umieściła je na liście powiązanych pochodzeń i potwierdziła relację za pomocą pliku
web-app-origin-association.
Aby przeprowadzić te testy, musisz włączyć flagę about://flags/#enable-desktop-pwas-scope-extensions (dostępną od Chrome w 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 otwarcie w celu uruchomienia w trybie samodzielnym. Aplikacja PWA zawiera linki do źródła w zakresie rozszerzonym i do źródła poza zakresem rozszerzonym.
Wersja demonstracyjna progresywnej aplikacji internetowej z linkami do źródła w rozszerzonym zakresie i źródła poza rozszerzonym zakresem.
Domyślna nawigacja między domenami (poza zakresem rozszerzonym)
- Kliknij link do źródła spoza zakresu rozszerzonego w aplikacji PWA na pełnym ekranie.
- W rezultacie nastąpi nawigacja i wyświetli się pasek poza zakresem.
Pasek „Poza zakresem” wyświetlany domyślnie w przypadku nawigacji między domenami w PWA w trybie samodzielnym.
Nawigacja między domenami z użyciem rozszerzeń zakresu (w zakresie rozszerzonym)
- Wróć na stronę główną progresywnej aplikacji internetowej.
- Kliknij link do pochodzenia spoza zakresu rozszerzonego.
- Domyślnie powinna być wyświetlana kolumna „out of scope”, ale ze względu na powiązanie z rozszerzeniami zakresu nie jest ona widoczna.
Pasek „Poza zakresem” nie jest wyświetlany podczas nawigacji między domenami po powiązaniu domeny z rozszerzeniami zakresu.
Testowanie przechwytywania linków z innych domen
- Otwórz i zainstaluj główną aplikację PWA na urządzeniu z ChromeOS.
- Kliknij ten link: powiązany punkt początkowy.
- Link otworzy się w nowej karcie przeglądarki i wyświetli się prośba o otwarcie go w zainstalowanej aplikacji PWA.
Kliknięcie linku do powiązanej domeny PWA otwiera go 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 rzeczywistych warunkach z udziałem prawdziwych użytkowników, możesz to zrobić w ramach testowania origin. Testy pochodzenia umożliwiają wypróbowanie eksperymentalnych funkcji z użytkownikami poprzez uzyskanie tokena testowego powiązanego z Twoją domeną. Następnie możesz wdrożyć aplikację i sprawdzić, czy 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 uruchomienia testu pochodzenia, wypełnij formularz zgłoszeniowy.
Prześlij opinię
Zespół Chrome zbiera opinie na temat przydatności tego interfejsu API. Aby pomóc zespołowi w rozwijaniu tego interfejsu API, przesyłaj opinie o jego przydatności i nowe przypadki użycia, które nie są uwzględnione w bieżącej wersji. W tym celu otwórz zgłoszenie na GitHubie.
Dodatkowe materiały
- Scope Extensions API – testowanie w ramach programu Origin Trial
- Stan Chrome – rozszerzenia zakresu aplikacji internetowych
- Wyjaśnienie dotyczące rozszerzeń zakresu w przypadku aplikacji internetowych
- Zamiar przeprowadzenia eksperymentu
- Stanowisko Mozilli w sprawie standardów
- Stanowisko Apple w sprawie standardów
- 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
Specjalne podziękowania dla zespołu, który opracował ten interfejs API. Specyfikację Scope Extensions opracowali Alan Cutter i Lu Huang przy udziale Matta Giuki. Interfejs API został wdrożony przez Alana Cuttera z zespołu Google Chrome oraz Hassana Talata, Kristin Lee i Lu Huang z zespołu Microsoft Edge.