Praca nad wieloma dokumentami jednocześnie dzięki kartom w progresywnej aplikacji internetowej
W świecie komputerów metafora na komputery to metafora interfejsu będąca zbiorem koncepcji łączących koncepcje używane przez graficzne interfejsy użytkownika (GUI) do ułatwiają użytkownikom interakcję z komputerem. Podobnie jak w przypadku metafory komputerowej, karty GUI są wzorowane na tradycyjnych kartach wstawionych do książek, papierowych plików lub indeksów kart. Z kartami interfejsu dokumentu (TDI) lub karty to graficzny element sterujący, który umożliwia obsługę wielu dokumentów lub w jednym oknie, korzystając z kart jako widżetu nawigacyjnego przy przełączaniu się między zestawami dokumentów.
Progresywne aplikacje internetowe mogą działać w różnych trybach wyświetlania określonych
właściwość display w manifeście aplikacji internetowej. Przykłady: fullscreen, standalone, minimal-ui,
i browser. Te tryby wyświetlania są zgodne z
dobrze zdefiniowany łańcuch kreacji zastępczych
("fullscreen" → "standalone" → "minimal-ui" → "browser"). Jeśli przeglądarka nie obsługuje
w danym trybie przechodzi do następnego trybu wyświetlania w łańcuchu. Za pomocą
"display_override", deweloperzy mogą określić własny łańcuch kreacji zastępczych.
w razie potrzeby.
Co to jest tryb aplikacji z kartami
Rozwiązanie, którego do tej pory brakowało na platformie, umożliwia programistom PWA dla użytkowników interfejsu dokumentu z kartami, na przykład w celu umożliwienia edytowania różnych plików w tej samej aplikacji PWA. okno. 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ż 1 dokumentu (lub pliku) jednocześnie.
- Aplikacje komunikacyjne, które umożliwiają użytkownikowi prowadzenie rozmów w różnych pokojach na każdej karcie.
- odczytywanie aplikacji, które otwierają linki do artykułów w nowych kartach;
Różnice w stosunku do kart utworzonych przez dewelopera
Przechowywanie dokumentów na osobnych kartach przeglądarki zapewnia bezpłatną izolację zasobów, co nie jest dostępnych obecnie w sieci. Karty utworzone przez dewelopera nie byłyby w stanie łatwo skalować do setek kart. jak karty przeglądarki. funkcje przeglądarki, takie jak historia nawigacji, „Kopiuj adres URL tej strony”, „Przesyłaj”; tę kartę” lub „Otwórz tę stronę w przeglądarce” została zastosowana do kart utworzonych przez programistę strony interfejsu, a nie wybranej strony dokumentu.
Różnice w stosunku do "display": "browser"
Bieżąca "display": "browser" ma już
konkretne znaczenie:
Otwiera aplikację internetową zgodnie z obowiązującą na niej konwencją otwierania hiperlinków w klienta użytkownika (np. na karcie przeglądarki lub w nowym oknie).
Przeglądarki mogą robić w interfejsie wszystko, co zechcą, ale jest to niewątpliwie znaczącą zmianą
oczekiwań deweloperów, jeśli "display": "browser" nagle oznaczał „działanie w osobnym
okno specyficzne dla aplikacji, bez funkcji przeglądarki, ale interfejs dokumentu z kartami”.
Ustawienie "display": "browser" pozwala rezygnować z treści aplikacji.
okno.
Obecny stan,
| Krok | Stan |
|---|---|
| 1. Utwórz wyjaśnienie | Ukończono |
| 2. Utwórz początkową wersję roboczą specyfikacji | Nie rozpoczęto |
| 3. Zbieraj opinie iterować projekt | W toku |
| 4. Wersja próbna origin | W toku |
| 5. Uruchom | Nie rozpoczęto |
Korzystanie z trybu aplikacji z kartami
Aby można było korzystać z trybu aplikacji z kartami, deweloperzy muszą włączyć w swoich aplikacjach:
wartość trybu "display_override" w manifeście aplikacji internetowej.
{
"display": "standalone",
"display_override": ["tabbed"]
}
Następnie możesz opcjonalnie użyć właściwości "tab_strip", by dostosować działanie karty. Zawiera dwa
dozwolone usługi podrzędne "home_tab" i "new_tab_button". Jeśli właściwość "tab_strip" nie jest
obecnie, określone właściwości” Użyte wartości: "auto". Przeglądarka określa, jakie wartości
użyj w przypadku usługi "auto".
Karta Główna
Karta Główna jest przypiętą kartą, która po włączeniu dla aplikacji powinna być zawsze widoczna, gdy aplikacja otwartego. Ta karta nigdy nie powinna nawigować. Linki kliknięte na tej karcie powinny otwierać się w nowej karcie aplikacji. aplikacji; może dostosować adres URL i wyświetlaną na niej ikonę.
Dozwolone wartości atrybutu "home_tab" to:
"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 adresem URL do zablokowania karty głównej."icons"z dozwolonymi wartościami"auto"lub tablicą ikon jak w głównej Usługa:"icons".
Przycisk Nowa karta
Przycisk Nowa karta (jeśli jest dostępny) powinien otwierać nową kartę pod adresem URL należącym do zakresu aplikacji. Aplikacja może ustawić niestandardowy URL i ikonę dla tego przycisku. Przeglądarki mogą decydować, jak obsługiwać przeciągać je, aby utworzyć nowe okna, lub połączyć je z kartami przeglądarki.
Dozwolone wartości atrybutu "new_tab_button" to:
"auto", by przeglądarka mogła określić, co ma zrobić."absent", aby przeglądarka nie wyświetlała przycisku nowej karty.- Obiekt z 2 właściwościami podrzędnymi:
"url"z dozwolonymi wartościami"auto"lub adresem URL objętym raportowaniem umożliwiającym otwieranie nowych kart."icons"z dozwolonymi wartościami"auto"lub tablicą ikon jak w głównej Usługa:"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"
}
]
}
}
}
Wykrywam tryb aplikacji z kartami
Aplikacje mogą wykryć, czy działają w trybie aplikacji z kartami, sprawdzając
display-mode Funkcja multimediów CSS
w kodzie 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
Launch Handler API umożliwia przekierowanie aplikacji
uruchamia się w istniejących oknach aplikacji, aby zapobiegać otwieraniu duplikatów okien. Gdy
zestawy aplikacji z kartami "client_mode": "navigate-new", uruchomienia aplikacji będą otwierać nową kartę w
istniejącego okna aplikacji.
Prezentacja
Możesz wypróbować tryb aplikacji z kartami, ustawiając 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 dowiedzieć się więcej o Twoich doświadczeniach związanych z korzystaniem z trybu aplikacji z kartami.
Opowiedz nam o konstrukcji interfejsu API
Czy jest jakiś tryb aplikacji z kartami, który nie działa zgodnie z oczekiwaniami? Skomentuj problem z plikiem manifestu aplikacji internetowej, który utworzyliśmy.
Zgłoś problem z implementacją
Czy wystąpił błąd z implementacją Chrome? Zgłoś błąd na stronie
new.crbug.com. Postaraj się podać jak najwięcej szczegółów. To proste
instrukcje dotyczące odtwarzania i wpisz UI>Browser>WebAppInstalls w polu Komponenty.
Glitch doskonale sprawdza się w przypadku szybkiego i łatwego udostępniania zgłoszeń.
Pokaż wsparcie dla interfejsu API
Czy zamierzasz korzystać z trybu aplikacji z kartami? Twoje publiczne wsparcie pomaga zespołowi Chrome nadaje priorytet funkcjom 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 jak 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 zbadał Matt Giuca. Eksperymentalny Za wdrożeniem w Chrome popracował Alan Cutter. Ten artykuł została sprawdzona przez użytkownika Joe Medley. Baner powitalny: Till Niermann na Wikimedia Commons
