W Chrome 122 możesz zasubskrybować wersję próbną dla dostawców treści w ramach elementu manifestu aplikacji scope_extensions, który umożliwia prezentowanie witryn zarządzających wieloma subdomenami i domenami 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 współużytkowania mechanizmów Service Worker, urządzeń dowolnego typu, pamięci lokalnej i uprawnień między źródłami. Ponadto w przypadku nawigacji między domenami w samodzielnej aplikacji internetowej PWA wyświetla się okno (pasek „poza zakresem”), co oznacza, że użytkownik opuścił środowisko aplikacji internetowej PWA. Rozwiązanie niektórych z tych problemów znajdziesz w artykułach Progresywne aplikacje internetowe w witrynach z różnych domen oraz 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 zgodność 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: użytkownicy mogą poruszać się po powiązanych domenach, nie zakłócając wrażeń, ponieważ nie wyświetla się okno z interfejsem użytkownika informujące o opuszczeniu aplikacji internetowej.
- Rejestrowanie linków z innych domen: zezwalaj aplikacjom internetowym na przechwytywanie elementów nawigacyjnych użytkownika prowadzących 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, 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. Jest to uciążliwe dla użytkowników, ponieważ oczekują kontynuowania nawigacji w obrębie tego samego kontekstu aplikacji, ale mogą mieć wrażenie, że są stamtąd usuwani.
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. 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 może je obsłużyć. Użytkownik może wtedy wyrazić zgodę na automatyczne przechwytywanie linków od tego momentu.
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 spoza 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 informowania użytkownika, że istnieje aplikacja, która jest w stanie je obsłużyć. 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 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. Ten plik musi nosić nazwę web-app-origin-association i być wyświetlany w tej właśnie 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" }]
}
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.
Wersja demonstracyjna PWA z linkami do źródła w rozszerzonym zakresie i źródle, które nie są w rozszerzonym zakresie.
Domyślna nawigacja między domenami (nie w rozszerzonym zakresie)
- W PWA na pełnym ekranie 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 przypadku samodzielnej aplikacji internetowej.
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 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 dzięki opiniom na temat jego przydatności i nowych przypadków użycia, których nie obejmuje bieżąca wersja, otwórz problem na GitHubie.
Dodatkowe materiały
- Interfejs API rozszerzeń zakresu – Origin Trial
- Stan Chrome – rozszerzenia zakresu aplikacji internetowych
- Wyjaśnienie dotyczące rozszerzeń zakresu w przypadku aplikacji internetowych
- Intencja przeprowadzenia eksperymentu
- Stanowisko w standardzie Mozilla
- Apple Standards Position
- Błąd w Chromium
- Progresywne aplikacje internetowe w witrynach z wielu źródeł
- 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.