Praca nad wieloma dokumentami jednocześnie za pomocą kart w progresywnej aplikacji internetowej
W świecie informatyki metafora pulpitu to zestaw pojęć, które są używane w graficznych interfejsach użytkownika (GUI) w celu ułatwienia użytkownikom bardziej intuicyjnej interakcji z komputerem. Zgodnie z metaforą pulpitu karty GUI są wzorowane na klasycznych kartach w książkach, papierowych teczkach lub indeksach kart. Interfejs dokumentu z kartami (TDI) lub karta to element graficzny, który umożliwia umieszczanie wielu dokumentów lub paneli w jednym oknie. Karty są elementem nawigacji służącym do przełączania 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. Opcje to fullscreen, standalone, minimal-ui i browser. Te tryby wyświetlania są zgodne z dobrze zdefiniowanym łańcuchem kreacji zastępczych ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Jeśli przeglądarka nie obsługuje danego trybu, przechodzi do następnego trybu wyświetlania w łańcuchu. W razie potrzeby deweloperzy mogą określić własny łańcuch awaryjny za pomocą właściwości "display_override".
Co to jest tryb aplikacji z kartami
Do tej pory na platformie brakowało sposobu na to, aby deweloperzy aplikacji PWA mogli oferować użytkownikom interfejs dokumentu z kartami, na przykład aby umożliwić edytowanie różnych plików w tym samym oknie aplikacji PWA. Tryb aplikacji z kartami wypełnia tę lukę.
Przypadki użycia trybu aplikacji z kartami
Przykłady witryn, które mogą używać trybu aplikacji z kartami:
- aplikacje zwiększające produktywność, które umożliwiają użytkownikowi edytowanie więcej niż jednego dokumentu (lub pliku) jednocześnie;
- Aplikacje do komunikacji, które umożliwiają użytkownikowi prowadzenie rozmów w różnych pokojach na poszczególnych kartach.
- aplikacje do czytania, które otwierają linki do artykułów w nowych kartach w aplikacji;
Różnice w stosunku do kart utworzonych przez deweloperów
Dokumenty w osobnych kartach przeglądarki są izolowane od zasobów, co jest niemożliwe w obecnej sieci. Karty utworzone przez dewelopera nie byłyby skalowalne do setek kart, tak jak karty w przeglądarce. Funkcje przeglądarki, takie jak historia nawigacji, „Kopiuj adres URL tej strony”, „Przekaż tę kartę” lub „Otwórz tę stronę w przeglądarce” byłyby stosowane do strony interfejsu z kartami utworzonymi przez dewelopera, ale nie do wybranej strony dokumentu.
Różnice w wersji "display": "browser"
Obecna wartość "display": "browser" ma już określone znaczenie:
Otwiera aplikację internetową, używając konwencji otwierania hiperłączy w ramach przeglądarki (np. w karcie lub nowym oknie).
Chociaż przeglądarki mogą robić wszystko, co tylko chcą, jeśli chodzi o interfejs użytkownika, to "display": "browser" nagle oznaczałoby „uruchom w oddzielnym oknie aplikacji bez możliwości przeglądarki, ale z interfejsem dokumentu z kartami”.
Ustawienie "display": "browser" to wycofanie zgody na wyświetlanie okna aplikacji.
Obecny stan,
| Krok | Stan |
|---|---|
| 1. Tworzenie wyjaśnienia | Ukończono |
| 2. Tworzenie wstępnej wersji specyfikacji | Ukończono |
| 3. Zbieraj opinie i ulepszaj projekt | Gotowe |
| 4. Wersja próbna origin | Gotowe |
| 5. Uruchom | Ukończono (ChromeOS) |
Korzystanie z trybu aplikacji z kartami
Aby korzystać z trybu aplikacji z kartami, deweloperzy muszą włączyć tę opcję w swoich aplikacjach, ustawiając w pliku manifestu aplikacji internetowej odpowiednią wartość "display_override".
{
"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 obecna, domyślnie zostanie użyty ten obiekt:
"tab_strip": {
"new_tab_button": {
"url": <start_url>,
},
}
Karta Główna
Karta główna to przypięta karta, która, jeśli jest włączona w przypadku aplikacji, powinna być zawsze widoczna, gdy aplikacja jest otwarta. Ta karta nigdy nie powinna być wyświetlana. Linki kliknięte na tej karcie powinny otwierać się w nowej karcie aplikacji. Aplikacje mogą dostosować adres URL tej karty i ikonę wyświetlaną na karcie.
Element "home_tab" obiektu "tab_strip" zawiera informacje o specjalnej „karcie głównej”, która ma służyć jako menu najwyższego poziomu aplikacji. Zawiera on ten element:
"scope_patterns": Element"scope_patterns"to lista wzorców adresów URL, które określają zakres karty głównej w stosunku do adresu URL pliku manifestu.
Przycisk nowej karty
Element "new_tab_button" obiektu "tab_strip" opisuje działanie interfejsu użytkownika (np. przycisku), które po kliknięciu lub aktywowaniu otwiera nowy kontekst aplikacji w oknie aplikacji. Zawiera ona te elementy:
"url": element"url"to ciąg znaków reprezentujący adres URL względem adresu URL pliku manifestu, który mieści się w zakresie przetworzonego pliku manifestu.
Aplikacja ma przycisk nowej karty, jeśli element new_tab_button przetworzonego pliku manifestu znajduje się poza zakresem karty głównej."url" Jeśli aplikacja nie ma przycisku nowej karty, przeglądarka nie udostępnia użytkownikowi opcji „Nowa karta”.
Pełny przykład
Pełny przykład konfigurowania zachowania aplikacji z interfejsem z kartami może wyglądać tak:
{
"name": "Tabbed App Example",
"start_url": "/",
"display": "standalone",
"display_override": ["tabbed"],
"tab_strip": {
"home_tab": {
"scope_patterns": [
{"pathname": "/"},
{"pathname": "/index.html"}
]
},
"new_tab_button": {
"url": "/create"
}
}
}
Wykrywanie trybu aplikacji z kartami
Aplikacje mogą wykryć, czy działają w trybie aplikacji z kartami, sprawdzając funkcję mediów display-mode CSS 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 stronom przekierowywanie uruchamiania aplikacji do istniejących okien aplikacji, aby zapobiec otwieraniu duplikatów okien. Gdy aplikacja z kartami "client_mode": "navigate-new" zostanie uruchomiona, otworzy się nowa karta w dotychczasowym oknie aplikacji.
Prezentacja
Możesz wypróbować aplikację z kartami w ChromeOS:
- Zainstaluj aplikację tabbed-application-mode.glitch.me (kod źródłowy).
- Kliknij różne linki na różnych kartach.
Prześlij opinię
Zespół Chrome chce poznać Twoje wrażenia związane z korzystaniem z trybu aplikacji z kartami.
Prześlij informacje o projektowaniu interfejsu API
Czy coś w trybie aplikacji z kartami nie działa zgodnie z oczekiwaniami? Skomentuj problem z problemem z manifestem aplikacji internetowej, który został przez nas utworzony.
Zgłaszanie problemów z implementacją
Czy znalazłeś/znalazłaś błąd w implementacji Chrome? Zgłoś błąd na stronie new.crbug.com. Podaj jak najwięcej szczegółów, instrukcje odtwarzania błędu i wpisz UI>Browser>WebAppInstalls w polu Components.
Glitch świetnie sprawdza się w przypadku szybkiego odtworzenia problemu.
Pokaż informacje o pomocy dotyczącej interfejsu API
Czy planujesz korzystać z trybu aplikacji z kartami? Twoja publiczna pomoc pomaga zespołowi Chrome ustalać priorytety funkcji i pokazuje innym dostawcom przeglądarek, jak ważne jest ich wsparcie.
Wyślij tweeta do @ChromiumDev, używając hashtaga #TabbedApplicationMode i podaj, gdzie i jak z niego korzystasz.
Przydatne linki
- Wyjaśnienie
- Problem ze specyfikacją pliku manifestu aplikacji internetowej
- Błąd w Chromium
- Składnik Blink:
UI>Browser>WebAppInstalls
Podziękowania
Tryb aplikacji z kartami został zbadany przez Matta Giucę. Eksperymentalna implementacja w Chrome została opracowana przez Alana Cuttera. Ten dokument został sprawdzony przez Joe Medley. Baner powitalny autorstwa Till Niermann na Wikimedia Commons.
