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 przez graficzne interfejsy użytkownika (GUI) w celu ułatwienia użytkownikom interakcji z komputerem. Zgodnie z metaforą komputera karty GUI są wzorowane na tradycyjnych kartach w książkach, papierowych teczkach lub katalogach kart. Interfejs dokumentu z kartami (TDI) lub karta to element graficzny, który umożliwia umieszczenie 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. Przykłady: 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ę.
Sugerowane zastosowania 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 zapewniają bezpłatne izolowanie zasobów, co jest niemożliwe w obecnej sieci. Karty utworzone przez dewelopera nie skalują się odpowiednio 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 na stronie interfejsu z kartami utworzonymi przez dewelopera, ale nie na aktualnie wybranej stronie 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 | Nie rozpoczęto |
| 3. Zbieraj opinie i ulepszaj projekt | W toku |
| 4. Wersja próbna origin | W toku |
| 5. Uruchom | Nie rozpoczęto |
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ść parametru "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" jest nieobecna, używane są wartości "auto" poszczególnych właściwości. Przeglądarka określa, jakie wartości należy użyć w przypadku parametru "auto".
Karta Główna
Karta główna to przypięta karta, która, jeśli jest włączona w przypadku danej aplikacji, powinna być zawsze widoczna, gdy aplikacja jest otwarta. Ta karta nigdy nie powinna się otwierać. 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.
Dozwolone wartości dla "home_tab":
"auto", aby pozwolić przeglądarce określić, co ma zrobić."absent", aby powiedzieć przeglądarce, aby nie wyświetlała karty głównej.- Obiekt z 2 właściwościami podrzędnymi:
"url"z dozwolonymi wartościami"auto"lub adres URL, na którym ma być zablokowana karta główna."icons"z dozwolonymi wartościami"auto"lub tablicą ikon jak w przypadku głównej właściwości"icons".
Przycisk nowej karty
Przycisk nowej karty (jeśli jest dostępny) powinien otwierać nową kartę z adresem URL, który mieści się w zakresie aplikacji. Aplikacja może ustawić niestandardowy adres URL i ikonę dla tego przycisku. Przeglądarki mogą samodzielnie określać sposób przenoszenia kart, aby tworzyć nowe okna lub łączyć je z innymi kartami przeglądarki.
Dozwolone wartości dla "new_tab_button":
"auto", aby pozwolić przeglądarce określić, co ma zrobić."absent", aby powiedzieć przeglądarce, że nie ma wyświetlać przycisku nowej karty.- Obiekt z 2 właściwościami podrzędnymi:
"url"z dopuszczalnymi wartościami"auto"lub adres URL w zakresie, w którym mają otwierać się nowe karty."icons"z dozwolonymi wartościami"auto"lub tablicą ikon jak w przypadku głównej właściwości"icons".
Pełny przykład
Pełny przykład konfigurowania zachowania 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, 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 witrynom przekierowywanie uruchamiania aplikacji do istniejących okien aplikacji, aby zapobiec otwieraniu zduplikowanych okien. Gdy aplikacja z kartami "client_mode": "navigate-new" zostanie uruchomiona, otworzy się nowa karta w dotychczasowym oknie aplikacji.
Prezentacja
Tryb aplikacji z kartami możesz wypróbować, ustawiając flagę przeglądarki:
- Ustaw flagę
#enable-desktop-pwas-tab-strip. - 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.
Poinformuj nas 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, proste instrukcje odtwarzania błędu i wpisz UI>Browser>WebAppInstalls w polu Components.
Glitch świetnie sprawdza się do szybkiego i łatwego odtwarzania przypadków.
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 wspieranie tych funkcji.
Wyślij tweeta do @ChromiumDev, używając hashtaga #TabbedApplicationMode i podaj, gdzie i jak go używasz.
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 artykuł został sprawdzony przez Joe Medley. Baner powitalny autorstwa Till Niermann na Wikimedia Commons.
