Projektowanie aplikacji

W tym rozdziale omawiamy kluczowe aspekty renderowania treści poza kartą przeglądarki.

Okno

Różne systemy operacyjne mają różne koncepcje okna aplikacji. Na przykład na iPhonie aplikacja zawsze zajmuje 100% ekranu. Aplikacje na Androida i iPada zwykle uruchamiają się na pełnym ekranie, ale istnieje możliwość współużytkowania ekranu przez dwie aplikacje, ale jednocześnie otwarta jest tylko jedna instancja aplikacji. Na komputerze stacjonarnym aplikacja może mieć otwartych kilka instancji jednocześnie. Współdziele dostępne miejsce na ekranie z pozostałymi otwartymi aplikacjami. Każdą instancję aplikacji można zmienić w dowolnym miejscu na ekranie i zmienić jej rozmiar, nawet nakładając się na inne aplikacje.

Ikona

Aplikacje rozpoznajemy po ikonie. Ta ikona pojawia się podczas wyszukiwania aplikacji, w ustawieniach, podczas uruchamiania aplikacji i w miejscach, w których widzisz uruchomione aplikacje.

Obejmują one:

  • Ekran główny (iOS, iPadOS, Android).
  • Menu z aplikacjami (macOS, Android).
  • Menu Start lub Menu aplikacji (Windows, ChromeOS, Linux).
  • Panele Zadokuj, Pasek zadań lub Wielozadaniowość (wszystkie systemy operacyjne).

Tworzenie ikony progresywnej aplikacji internetowej Dopilnuj, aby ikona nie była niezależna od platformy, ponieważ każdy system operacyjny może renderować ikony i stosować do nich różne maski kształtów, jak te na ilustracji poniżej.

Ikony PWA w różnych kształtach dla różnych platform.

Tworzenie motywu aplikacji

Styl aplikacji PWA możesz dostosować na kilka sposobów. Oto niektóre z nich:

  • Kolor motywu: określa kolor paska tytułu okna na komputerze i kolor paska stanu na urządzeniach mobilnych. Korzystając z metatagów, możesz wybrać różne schematy (np. tryb ciemny lub jasny), które będą używane zgodnie z preferencjami użytkownika.
  • Kolor tła: określa kolor okna przed wczytaniem aplikacji i jej arkusza CSS.
  • Kolor uzupełniający: określa kolor wbudowanych komponentów przeglądarki, np. elementów sterujących formularza.
.
Progresywna aplikacja internetowa na komputery z motywem i kolorami uzupełniającymi oraz ekran powitalny aplikacji PWA na Androida z kolorami motywu i tła.
PWA na komputery z motywem i kolorami uzupełniającymi oraz ekran powitalny aplikacji PWA na Androida z kolorami motywu i tła.
.

Tryby wyświetlania

Możesz określić preferowany rodzaj okna w przypadku progresywnej aplikacji internetowej. Masz do wyboru 3 opcje:

  • Pełny ekran
  • Skrypt samodzielny
  • Minimalny interfejs użytkownika
.

Tryb pełnoekranowy

Tryb pełnoekranowy jest odpowiedni do oglądania takich treści jak gry, rzeczywistość wirtualna czy rzeczywistość AR. Obecnie ta funkcja jest dostępna tylko na urządzeniach z Androidem. Ukrywa pasek stanu i nawigacja, dzięki czemu aplikacja PWA zajmuje 100% ekranu treści.

Pełnoekranowe aplikacje PWA nie są obsługiwane na komputerach i iPadach. ale możesz użyć Fullscreen API w progresywnej aplikacji internetowej, aby wyświetlić aplikację na pełnym ekranie na żądanie użytkownika.

Usługa samodzielna

W przypadku progresywnych aplikacji internetowych tryb samodzielny Okno może też zawierać menu kontrolowane 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świetlanie i zmienianie uprawnień.
  • Sprawdź bieżące źródło i certyfikat SSL.

Pasek tytułu może też zawierać informacje o uprawnieniach i zastosowaniu sprzętu, które zastąpią omniboks lub pasek adresu URL podczas renderowania PWA na karcie.

Aplikacja PWA zainstalowana w przeglądarce Microsoft Edge na komputerze z wyświetlonym menu. Progresywna aplikacja internetowa zainstalowana w Google Chrome na komputerze z menu i ikoną wtyczek.
Powyższe obrazy pokazują, jak aplikacja PWA wyświetla się w trybie samodzielnym na komputerze w przeglądarce Microsoft Edge i Chrome.

Na urządzeniach mobilnych samodzielna aplikacja PWA tworzy standardowy ekran, na którym pasek stanu jest widoczny, a użytkownik może zobaczyć powiadomienia, godzinę i poziom naładowania baterii. Zwykle nie ma w niej menu kontrolowanego przez przeglądarkę (jak w przypadku wersji na komputery).

Urządzenie z iOS renderujące samodzielną aplikację.

Niektóre przeglądarki na Androidzie tworzą stałe i ciche powiadomienie, gdy działa PWA na pierwszym planie, dzięki czemu użytkownik może skopiować bieżący adres URL lub inne opcje.

Powiadomienie na Androida renderowane przez Chrome pokazujące niektóre działania w stosunku do bieżącej aktywnej aplikacji PWA.

Minimalny interfejs

Ten tryb jest dostępny w progresywnych aplikacjach internetowych na Androida i komputery. Podczas korzystania z aplikacji PWA przeglądarka będzie wyświetlać minimalny interfejs, aby ułatwić użytkownikowi poruszanie się po aplikacji.

Na Androidzie zobaczysz pasek tytułu, który wyrenderuje bieżący element <title> i pochodzenie. Jest ono dostępne w małym menu. Na komputerach na pasku tytułu znajduje się zestaw przycisków ułatwiających nawigację, w tym przycisk Wstecz i element sterujący, który umożliwia przełączanie się między zatrzymaniem a aktualizacją w zależności od bieżącego stanu wczytywania.

Minimalistyczny interfejs na komputerze w przeglądarce Microsoft Edge z przyciskami Wstecz i Załaduj ponownie
W Androidzie przeglądarki korzystają z paska nawigacyjnego z motywem tylko do odczytu, aby zminimalizować interfejs użytkownika. Tutaj Firefox i Chrome

Optymalizacja projektu pod kątem komputerów

Gdy zaprojektujesz progresywną aplikację internetową do pracy na komputerze, należy pomyśleć o nieskończonych możliwościach rozmiaru okna w porównaniu z możliwością korzystania z karty przeglądarki czy aplikacji w systemie operacyjnym na urządzenia mobilne.

W rozdziale 3 wspomnieliśmy o trybie zminimalizowanym: aplikacja komputerowa może mieć maksymalnie 200 x 100 pikseli. Jako tytuł okna zostanie użyta zawartość elementu <title> z Twojego kodu HTML. Treści te są też renderowane podczas przechodzenia między aplikacjami i w innych miejscach za pomocą klawisza Alt.

Zwróć uwagę na element <title> w kodzie HTML i zastanów się, jak go używać. <title> nie służy tylko do SEO ani do renderowania tylko pierwszych znaków na karcie przeglądarki. zobaczysz ją w osobnym oknie na komputery.

Sprawdzone metody dotyczące usług porównywania cen

Wszystkie funkcje układu, projektowania i animacji CSS obowiązują wtedy, gdy Twoje treści są renderowane osobno. Przygotowaliśmy jednak kilka porad i wskazówek, dzięki którym korzystanie z niej będzie działać lepiej w oddzielnym oknie.

Zapytania o multimedia

Pierwsze zapytanie o media, z którego możesz skorzystać w PWA, to właściwość display-mode akceptująca 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ć zaproszenie do instalacji tylko w trybie przeglądarki, a konkretne informacje – tylko wtedy, gdy użytkownik kliknie ikonę systemową aplikacji. Może to obejmować dodanie przycisku Wstecz, który będzie potrzebny przy uruchamianiu 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) {
}

Działanie aplikacji

Gdy użytkownicy korzystają z zainstalowanej PWA, oczekują działania aplikacji. Chociaż nie można łatwo określić, co to oznacza, domyślne zachowanie sieci nie zawsze jest najlepszym rozwiązaniem.

Wybór użytkownika

Treści można zwykle wybierać za pomocą myszy lub wskaźnika albo gestem dotknięcia i przytrzymania. Choć jest to pomocne w przypadku treści, nie zapewnia najlepszego sposobu korzystania z pozycji nawigacyjnych, menu i przycisków w PWA.

Progresywna aplikacja internetowa kalkulatora, w której można wybrać każdy interaktywny przycisk, na przykład liczby.

Dlatego warto wyłączyć wybór użytkowników w przypadku tych elementów za pomocą atrybutu user-select: none w wersji prefiksu -webkit-:

.unselectable {
   user-select: none;
}

Kolor uzupełniający

W aplikacji PWA możesz zdefiniować kolor pasujący do marki w elementach sterujących formularza HTML, używając właściwości accent-color.

Czcionki systemowe

Jeśli chcesz, by element, np. okna lub wiadomości, pasował do domyślnej czcionki platformy 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 jej zamknięciu. W niektórych przeglądarkach, takich jak Chrome na Androidzie, ta funkcja działa też w przypadku samodzielnych aplikacji PWA.

Możesz wyłączyć to działanie. na przykład wtedy, gdy samodzielnie zarządzasz gestami lub odświeżasz, a także gdy istnieje możliwość, że użytkownik przypadkowo wywoła to działanie.

Możesz wyłączyć to działanie za pomocą elementu overscroll-behavior-y: contain:.

  body {
    overscroll-behavior-y: contain;
  }

Bezpieczne obszary

Niektóre urządzenia nie mają niezasłoniętych prostokątnych ekranów. zamiast nich może mieć inny kształt, np. koło, lub zawierać fragmenty ekranu, których nie można w nim używać, jak wcięcie w iPhone'ie 13. W takich przypadkach niektóre przeglądarki ujawniają zmienne środowiskowe wraz z bezpiecznymi obszarami, w których mogą być wyświetlane treści.

U góry urządzenie z wcięciem w orientacji poziomej ze standardowym widocznym obszarem, po bokach widać niewyrenderowane obszary. czyli urządzenie z pełnym dostępem do widocznego obszaru dzięki parametrowi view-fit=cover.

Jeśli chcesz wyrenderować kolor lub obraz, mając pełny dostęp do ekranu, nawet do niewidocznego obszaru, umieść viewport-fit=cover w treści tagu <meta name="viewport">. Następnie użyj zmiennych środowiskowych safe-area-inset-*, aby bezpiecznie rozszerzyć treści na te obszary.

Zasoby