Praca nad kilkoma dokumentami naraz za pomocą kart w progresywnej aplikacji internetowej
W świecie komputerów metafora na komputery jest zbiorem ujednoliconych koncepcji stosowanych w graficznych interfejsach użytkownika (GUI) mających ułatwić użytkownikom interakcję z komputerem. Zgodnie z metaforą typową na komputerach karty graficzne są wzorowane na standardowych kartach kart umieszczanych w książkach, na papierze czy w indeksach. Karta lub interfejs dokumentu z kartami to graficzny element sterujący, który umożliwia umieszczanie wielu dokumentów lub paneli w jednym oknie. W tym celu karty pełnią funkcję widżetu nawigacyjnego, który umożliwia przełączanie się między zestawami dokumentów.
Progresywne aplikacje internetowe mogą działać w różnych trybach wyświetlania określonych przez właściwość display w pliku manifestu aplikacji internetowej. Przykłady: fullscreen, standalone, minimal-ui i browser. Te tryby wyświetlania działają po
dobrze zdefiniowanej łańcuchu kreacji zastępczych
("fullscreen" → "standalone" → "minimal-ui" → "browser"). Jeśli przeglądarka nie obsługuje danego trybu, wraca do następnego trybu wyświetlania w łańcuchu. Za pomocą właściwości "display_override" deweloperzy mogą w razie potrzeby określić własny łańcuch kreacji zastępczych.
Czym jest tryb aplikacji z kartami
Jedną z funkcji, której zabrakło do tej pory na platformie, jest możliwość oferowania użytkownikom interfejsu dokumentu z kartami, na przykład do edytowania różnych plików w tym samym oknie PWA. Tryb aplikacji z kartami wypełnia tę lukę.
Sugerowane przypadki użycia trybu aplikacji z kartami
Przykłady witryn, które mogą korzystać z trybu aplikacji z kartami:
- Aplikacje zwiększające produktywność, które umożliwiają użytkownikowi edytowanie kilku dokumentów (lub plików) jednocześnie.
- aplikacje do komunikacji, które umożliwiają użytkownikowi prowadzenie rozmów w różnych pokojach na każdej karcie;
- czytanie aplikacji, które otwierają linki do artykułów na nowych kartach w aplikacji;
Różnice w stosunku do kart utworzonych przez programistów
Przechowywanie dokumentów na osobnych kartach przeglądarki wiąże się z bezpłatną izolacją zasobów, co obecnie nie jest możliwe w internecie. Karty utworzone przez dewelopera nie skalowałyby się do setek kart, tak jak w przypadku kart przeglądarki. Opcje przeglądarki takie jak historia nawigacji, „Kopiuj adres URL strony”, „Prześlij tę kartę” czy „Otwórz tę stronę w przeglądarce” są stosowane do strony interfejsu z kartami, ale nie do aktualnie wybranej strony dokumentu.
Różnice w stosunku do: "display": "browser"
Obecny "display": "browser" ma już konkretne znaczenie:
Otwiera aplikację internetową przy użyciu odpowiedniej dla platformy konwencji otwierania hiperlinków w kliencie użytkownika (np. na karcie przeglądarki lub w nowym oknie).
Przeglądarki mogą wykonywać w interfejsie dowolne czynności, ale wprowadzenie "display": "browser" nagle oznaczałoby „działanie w osobnym oknie aplikacji bez zaawansowanych możliwości przeglądarki, tylko z interfejsem dokumentu z kartami”.
Ustawienie "display": "browser" to w praktyce sposób rezygnacji z umieszczania jej w oknie aplikacji.
Obecny stan,
| Step | Stan |
|---|---|
| 1. Utwórz wyjaśnienie | Ukończono |
| 2. Utwórz wstępną wersję roboczą specyfikacji | Nie rozpoczęto |
| 3. Zbieranie opinii i ulepszanie projektu | W toku |
| 4. Testowanie origin | W toku |
| 5. Wprowadzenie na rynek | Nie rozpoczęto |
Korzystanie z trybu aplikacji z kartami
Aby używać trybu aplikacji z kartami, deweloperzy muszą włączyć tę funkcję w swoich aplikacjach, ustawiając konkretną wartość trybu "display_override" w manifeście aplikacji internetowej.
{
"display": "standalone",
"display_override": ["tabbed"]
}
Następnie możesz użyć właściwości "tab_strip", aby dostosować działanie karty. Zawiera 2 dozwolone usługi podrzędne: "home_tab" i "new_tab_button". Jeśli właściwość "tab_strip" nie jest dostępna, używane są wartości "auto" określonej właściwości. To przeglądarka określa, których wartości użyje "auto".
Karta Główna
Karta Strona główna to przypięta karta, która po włączeniu jej w aplikacji powinna być zawsze widoczna, gdy jest otwarta. Ta karta nie powinna nigdy się pojawiać. Linki klikane na tej karcie powinny otwierać się w nowej karcie aplikacji. Aplikacje mogą dostosować adres URL, pod którym ta karta jest zablokowana, oraz ikonę wyświetlaną na karcie.
Dozwolone wartości "home_tab":
"auto", aby przeglądarka mogła określić, co ma zrobić."absent", aby wyłączyć wyświetlanie karty strony głównej w przeglądarce.- Obiekt o 2 właściwościach podrzędnych:
"url"z dozwolonymi wartościami"auto"lub adresem URL, pod którym ma zostać zablokowana karta główna."icons"z dozwolonymi wartościami"auto"lub tablicą ikon, jak w głównej właściwości"icons".
Przycisk Nowa karta
Przycisk nowej karty (jeśli jest dostępny) powinien otwierać nową kartę z adresem URL należącym do zakresu aplikacji. Aplikacja może ustawić niestandardowy adres URL i ikonę tego przycisku. Przeglądarki mogą decydować, jak obsłużyć te karty, aby utworzyć nowe okna lub połączyć je z kartami przeglądarki.
Dozwolone wartości "new_tab_button":
"auto", aby przeglądarka mogła określić, co ma zrobić."absent", aby informować przeglądarkę, że ma nie pokazywać przycisku nowej karty.- Obiekt o 2 właściwościach podrzędnych:
"url"z dozwolonymi wartościami"auto"lub adresem URL uwzględnionym w zakresie umożliwiającym otwieranie nowych kart."icons"z dozwolonymi wartościami"auto"lub tablicą ikon, jak w głównej właściwości"icons".
Pełny przykład
Pełny przykład konfiguracji działania aplikacji z interfejsem z kartami może wyglądać tak:
{
"display_override": ["tabbed"],
"tab_strip": {
"home_tab": {
"url": "./home/",
"icons": [
{
"src": "./home.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
},
"new_tab_button": {
"url": "./new-tab/",
"icons": [
{
"src": "./new-tab.svg",
"sizes": "any",
"type": "image/svg+xml"
}
]
}
}
}
Wykrywanie trybu aplikacji z kartami
Aplikacje mogą wykryć, czy działają w trybie aplikacji z kartami, za pomocą funkcji mediów CSS display-mode w CSS lub JavaScript:
@media (display-mode: tabbed) {
/* Styles to apply in tabbed application mode. */
}
const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;
Interakcja z interfejsem Launch Handler API
Interfejs Launch Handler API umożliwia witrynom przekierowywanie uruchamiania aplikacji do istniejących okien aplikacji, aby zapobiec otwieraniu zduplikowanych okien. Gdy aplikacja z kartami ustawi "client_mode": "navigate-new", uruchomienie aplikacji spowoduje otwarcie nowej karty w istniejącym oknie aplikacji.
Pokaz
Aby wypróbować tryb aplikacji z kartami, ustaw flagę przeglądarki:
- Ustaw flagę
#enable-desktop-pwas-tab-strip. - Zainstaluj aplikację tabbed-application-mode.glitch.me (kod źródłowy).
- Klikaj różne linki na poszczególnych kartach.
Prześlij opinię
Zespół Chrome chce poznać Twoją opinię o korzystaniu z trybu aplikacji z kartami.
Opowiedz nam o projekcie interfejsu API
Czy w trybie aplikacji z kartami jest coś, co nie działa zgodnie z oczekiwaniami? Opisz utworzony przez nas problem z plikiem manifestu aplikacji internetowej.
Zgłoś problem z implementacją
Czy wystąpił błąd związany z implementacją przeglądarki Chrome? Zgłoś błąd na stronie new.crbug.com. Podaj jak najwięcej szczegółów, proste instrukcje dotyczące odtworzenia i wpisz UI>Browser>WebAppInstalls w polu Komponenty.
Usterki to świetny sposób na szybkie i łatwe udostępnianie przypadków odtworzenia.
Pokaż obsługę interfejsu API
Czy zamierzasz użyć trybu aplikacji z kartami? Twoje publiczne wsparcie pomaga zespołowi Chrome priorytetowo traktować funkcje i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.
Wyślij tweeta na adres @ChromiumDev, używając hashtagu #TabbedApplicationMode, i daj nam znać, gdzie i w jaki sposób go używasz.
Przydatne linki
- Wyjaśnienie
- Problem ze specyfikacją pliku manifestu aplikacji internetowej
- Błąd Chromium
- Komponent Blink:
UI>Browser>WebAppInstalls
Podziękowania
Tryb aplikacji z kartami badał Matt Giuca. Eksperymentalną implementację w Chrome opracował Alan Cutter. Ten artykuł został sprawdzony przez Joe Medley. Baner powitalny autorstwa Tilla Niermanna dostępny na stronie Wikimedia Commons.
