Tryb aplikacji z kartami dla PWA

Praca nad wieloma dokumentami jednocześnie za pomocą kart w progresywnej aplikacji internetowej

Thomas Steiner

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 możliwości, która pozwoliłaby deweloperom PWA oferować użytkownikom interfejs dokumentu z kartami, na przykład aby umożliwić edytowanie różnych plików w tym samym oknie 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 na 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 przeglądarki lub nowym oknie).

Chociaż przeglądarki mogą robić wszystko, co tylko chcą, jeśli chodzi o interfejs użytkownika, to znaczna zmiana oczekiwań deweloperów, jeśli "display": "browser" nagle oznacza „uruchamianie 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

Przykładowa konfiguracja 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 oknie istniejącej aplikacji.

Prezentacja

Aplikację z kartami możesz wypróbować w systemie ChromeOS:

  1. Zainstaluj aplikację tabbed-application-mode.glitch.me (kod źródłowy).
  2. Kliknij różne linki na różnych kartach.

Prezentacja trybu aplikacji z kartami na stronie tabbed-application-mode.glitch.me.

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ł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ę do udostępniania szybkich sposobów odtworzenia błędów.

Pokaż pomoc dotyczącą 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.

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.