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