Projektowanie aplikacji

W tym rozdziale omawiamy kilka kluczowych aspektów renderowania treści poza kartą przeglądarki.

Okno

Różne systemy operacyjne inaczej definiują okno aplikacji. Na przykład na iPhonie aplikacja zawsze zajmuje 100% ekranu. Na urządzeniach z Androidem i iPadach aplikacje zwykle działają na pełnym ekranie, ale można udostępnić ekran 2 aplikacjom. W danym momencie otwarta jest tylko 1 kopia aplikacji. Na komputerze aplikacja może mieć więcej niż 1 kopię otwartą naraz. Udostępnia dostępną przestrzeń ekranu wszystkim otwartym aplikacjom. Rozmiar i położenie każdej instancji aplikacji można zmienić, a następnie umieścić ją w dowolnym miejscu na ekranie, nawet nakładając na inne aplikacje.

Ikona

Rozpoznajemy aplikacje po ich ikonach. Ikona ta pojawia się, gdy szukasz aplikacji, w ustawieniach, w miejscu uruchamiania aplikacji oraz w miejscu, w którym wyświetlane są uruchomione aplikacje.

Obejmują one:

• Ekran główny (iOS, iPadOS, Android).
• Menu z aplikacjami (macOS, Android).
• menu Start lub menu aplikacji (Windows, ChromeOS, Linux);
• Dock, pasek aplikacji lub panele wielozadaniowości (wszystkie systemy operacyjne).

Podczas tworzenia ikony progresywnej aplikacji internetowej pamiętaj, aby była ona niezależna od platformy, ponieważ każdy system operacyjny może renderować ikony i stosować do nich różne maski kształtów, takie jak te na obrazku poniżej.

Motywowanie aplikacji

Styl aplikacji w PWA możesz dostosowywać na kilka sposobów, m.in.:

• Kolor motywu: określa kolor paska tytułu okna na komputerze i kolor paska stanu na urządzeniach mobilnych. Za pomocą tagu meta możesz ustawić różne schematy, np. ciemny lub jasny, które będą używane na podstawie preferencji użytkownika.
• Kolor tła: określa kolor okna przed załadowaniem aplikacji i jej kodu CSS.
• Kolor akcentu: określa kolor wbudowanych komponentów przeglądarki, takich jak elementy sterujące formularzem.

Tryby wyświetlania

Możesz określić, jaką wersję okna chcesz mieć w progresywnej aplikacji internetowej. Do wyboru są 3 opcje:

• Pełny ekran
• Samodzielny
• Minimalny interfejs

Możesz też użyć obszaru paska tytułu obok elementów sterujących oknem, aby sprawić, że aplikacja PWA będzie bardziej przypominać aplikację z zaawansowanym trybem wyświetlania o nazwie nakładka z elementami sterującymi okna. Sprawdź, jak dostosować nakładkę z elementami sterującymi okna w pasku tytułu aplikacji PWA.

Tryb pełnoekranowy

Tryb pełnoekranowy jest odpowiedni do gier, VR lub AR. Jest ona obecnie dostępna tylko na urządzeniach z Androidem. Ukrywa pasek stanu i pasek nawigacji, dzięki czemu PWA zajmuje 100% ekranu.

Na komputerach i w systemie iPadOS nie są obsługiwane PWA w wersji pełnoekranowej. Możesz jednak użyć interfejsu Fullscreen API w PWA, aby wyświetlić aplikację na pełnym ekranie na żądanie użytkownika.

Samodzielne działanie

Najczęstszą opcją dla progresywnej aplikacji internetowej jest tryb samodzielny, w którym aplikacja jest wyświetlana w oknie standardowym dla systemu operacyjnego bez interfejsu nawigacji przeglądarki. Okno może też zawierać menu sterowane przez przeglądarkę, w którym użytkownik może:

• Skopiuj bieżący adres URL.
• Wyświetlanie, stosowanie i wyłączanie rozszerzeń przeglądarki.
• wyświetlać i zmieniać uprawnienia,
• Sprawdź bieżące źródło i certyfikat SSL.

Gdy PWA jest renderowana na karcie, na pasku tytułu mogą się też wyświetlać uprawnienia i informacje o użyciu sprzętu, co zastąpi pole wyszukiwania lub pasek adresu.

Na urządzeniach mobilnych samodzielna aplikacja PWA tworzy standardowy ekran, który zachowuje pasek stanu, dzięki czemu użytkownik może nadal widzieć powiadomienia, godzinę i poziom baterii. Często nie ma menu sterowanego przez przeglądarkę, jak w przypadku aplikacji na komputery.

Niektóre przeglądarki na Androidzie tworzą powiadomienie statyczne i bezdźwięczne, gdy PWA jest na pierwszym planie. Pozwala ono użytkownikowi skopiować bieżący adres URL lub skorzystać z innych opcji.

Minimalny interfejs

Ten tryb jest dostępny w progresywnych aplikacjach internetowych na Androida i systemy operacyjne na komputery. Podczas korzystania z aplikacji przeglądarka renderująca PWA wyświetli minimalny interfejs użytkownika, aby ułatwić nawigację w aplikacji.

Na Androidzie zobaczysz pasek tytułu, który renderuje bieżący element <title> i pochodzący z niego element źródłowy z dostępnym małym menu. Na komputerze w pasku tytułu znajdziesz zestaw przycisków ułatwiających nawigację, w tym przycisk Wstecz i element sterujący, który pozwala przełączać się między zatrzymaniem a odświeżaniem w zależności od bieżącego stanu wczytywania.

Optymalizacja projektu pod kątem komputerów

Projektując progresywną aplikację internetową na komputery, musisz wziąć pod uwagę nieskończone możliwości rozmiaru okna w porównaniu z kartą przeglądarki lub aplikacją w systemie operacyjnym na urządzeniu mobilnym.

W rozdziale 3 wspomnieliśmy o trybie mini: aplikacja na komputery może mieć rozmiar zaledwie 200 x 100 pikseli. W tym oknie tytułem będzie zawartość elementu <title> w Twoim kodzie HTML. Te treści są też renderowane, gdy używasz skrótu Alt+Tab do przełączania się między aplikacjami i w innych miejscach.

Zwróć uwagę na element HTML <title> i pomyśl jeszcze raz, jak go używasz. <title> nie służy tylko do optymalizacji pod kątem wyszukiwarek ani do renderowania pierwszych znaków w karcie przeglądarki. Będzie ono częścią interfejsu samodzielnego okna na komputerze.

Sprawdzone metody dotyczące CSS

Wszystkie Twoje doświadczenia z projektowaniem i animowaniem układu CSS są ważne, gdy treści są renderowane w ramach samodzielnego środowiska. Mamy jednak kilka wskazówek, które pozwolą Ci lepiej korzystać z okna głównego.

Zapytania o multimedia

Pierwsza zapytanie o multimedia, której możesz użyć w swojej aplikacji PWA, to właściwość display-mode, która może przyjmować wartości browser, standalone, minimal-ui lub fullscreen.

To zapytanie o multimedia stosuje różne style do każdego trybu. Możesz na przykład renderować prośbę o instalację tylko w trybie przeglądarki lub wyświetlać określony element informacji tylko wtedy, gdy użytkownik używa aplikacji z ikony systemowej. Może to obejmować dodanie przycisku Wstecz, który będzie używany podczas uruchamiania aplikacji w trybie samodzielnym.

/* It targets only the app used within the browser */
@media (display-mode: browser) {
}
/* It targets only the app used with a system icon in standalone mode */
@media (display-mode: standalone) {
}
/* It targets only the app used with a system icon in all mode */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
}

Wrażenia użytkownika aplikacji

Użytkownicy oczekują określonego działania aplikacji, gdy korzystają z zainstalowanej aplikacji PWA. Chociaż nie jest łatwo zdefiniować, co to oznacza, domyślne zachowanie przeglądarki w niektórych sytuacjach nie zapewnia najlepszej jakości.

Wybór użytkownika

Treści można wybierać za pomocą myszy lub wskaźnika albo przez naciśnięcie i przytrzymanie palca na ekranie. Chociaż jest to przydatne w przypadku treści, nie zapewnia najlepszego wrażenia w przypadku elementów nawigacji, menu i przycisków w PWA.

Dlatego warto wyłączyć wybór przez użytkownika tych elementów za pomocą atrybutu user-select: none i jego wersji z preiksem -webkit-:

.unselectable {
   user-select: none;
}

Kolor uzupełniający

W swojej aplikacji internetowej możesz zdefiniować kolor pasujący do Twojej marki w elementach sterujących formularza HTML za pomocą właściwości accent-color.

Czcionki systemowe

Jeśli chcesz, aby element, np. dialogi lub komunikaty, pasował do domyślnej czcionki na platformie użytkownika, możesz użyć tej rodziny czcionek:

selector {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
}

Przeciągnij w dół, aby odświeżyć

Nowoczesne przeglądarki mobilne, takie jak Google Chrome i Safari, mają funkcję odświeżania strony po przeciągnięciu w dół. W niektórych przeglądarkach, np. Chrome na Androida, to zachowanie jest również włączone w samodzielnych Progressive Web Apps.

Możesz wyłączyć tę funkcję. Może to być na przykład sytuacja, gdy udostępniasz własne działanie związane z zarządzaniem gestami lub odświeżaniem lub gdy istnieje możliwość, że użytkownik nieumyślnie wywoła działanie.

Możesz wyłączyć to działanie, korzystając z funkcji overscroll-behavior-y: contain:

  body {
    overscroll-behavior-y: contain;
  }

Bezpieczne obszary

Niektóre urządzenia nie mają nieosłoniętego prostokątnego ekranu. Zamiast tego ekran może mieć inny kształt, na przykład okrągły, lub zawierać obszary, których nie można wykorzystać, jak w przypadku wycięcia na aparat w iPhone 13. W takich przypadkach niektóre przeglądarki wyświetlają zmienną środowiskową z bezpiecznymi obszarami, w których można wyświetlać treści.

Jeśli chcesz mieć pełny dostęp do ekranu, nawet do niewidocznych obszarów, aby renderować kolor lub obraz, dodaj viewport-fit=cover do zawartości tagu <meta name="viewport">. Następnie użyj zmiennych środowiskowych safe-area-inset-*, aby bezpiecznie udostępnić treści w tych obszarach.

Zasoby

• Zapytanie o media dotyczące trybu wyświetlania w CSS
• Kontrolowanie przewijania: dostosowywanie efektów przewijania i przepełnienia
• prefers-color-scheme: Hello darkness, my old friend
• prefers-reduced-motion: czasami mniej ruchu to więcej
• Funkcja CSS env()
• Kolor akcentu CSS
• Nakładka z elementami sterującymi okna