Praca nad wieloma dokumentami jednocześnie dzięki kartom w progresywnej aplikacji internetowej
W świecie informatyki metafora pulpitu to metafora interfejsu, która jest zbiorem koncepcji stosowanych przez graficzne interfejsy użytkownika (GUI) w celu ułatwienia użytkownikom interakcji z komputerem. Zgodnie z metaforą na komputery karty GUI są wzorowane na tradycyjnych kartach wstawionych do książek, plików papierowych czy indeksów 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. Za pomocą właściwości "display_override" deweloperzy mogą w razie potrzeby określić własny łańcuch kreacji zastępczych.
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 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
Przechowywanie dokumentów na osobnych kartach przeglądarki zapewnia bezpłatną izolację zasobów, co obecnie nie jest możliwe w internecie. Karty utworzone przez dewelopera nie mogą być skalowane 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 utworzonej przez dewelopera, ale nie do aktualnie wybranej strony dokumentu.
Różnice w wersji "display": "browser"
Obecna wartość "display": "browser" ma już określone znaczenie:
Otwiera aplikację internetową zgodnie z konwencją obowiązującą na danej platformie dotyczącej otwierania hiperlinków w kliencie użytkownika (np. na karcie przeglądarki lub w 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. Zbieranie opinii i ulepszanie projektu | W toku |
| 4. Wersja próbna origin | W toku |
| 5. Uruchom | Nie rozpoczęto |
Korzystanie z trybu aplikacji z kartami
Aby używać trybu aplikacji z kartami, deweloperzy muszą włączyć w swoich aplikacjach odpowiednią 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 podana, używane są wartości "auto" z konkretnych 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 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.
Dozwolone wartości dla "home_tab":
"auto", by przeglądarka mogła określić, co ma zrobić."absent", by przeglądarka 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 Nowa karta (jeśli jest dostępny) powinien otwierać nową kartę pod adresem URL objętym zakresem aplikacji. Aplikacja może ustawić dla tego przycisku niestandardowy URL i ikonę. Przeglądarki mogą samodzielnie określać sposób przeciągania kart, aby tworzyć nowe okna lub łączyć je z 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 adresem URL w zakresie, na którym mają otwierać się nowe karty."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 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ę multimedió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 "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 trybem 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łoś problem 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 Składniki.
Glitch świetnie sprawdza się w przypadku 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 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.
