W tym rozdziale skupiono się na kluczowych aspektach renderowania treści poza kartą przeglądarki.
Okno
Różne systemy operacyjne mają różne koncepcje co do okna aplikacji. Na przykład na iPhonie aplikacja zawsze zajmuje 100% ekranu. Aplikacje na Androida i iPada zazwyczaj działają na pełnym ekranie, ale możliwe jest współużytkowanie ekranu między dwiema aplikacjami, jednak w tym samym czasie może być otwarte tylko jedno wystąpienie aplikacji. Natomiast na komputerze aplikacja może mieć otwartych więcej instancji. Udostępnia dostępne miejsce na ekranie wszystkim pozostałym otwartym aplikacjom. Każdą instancję aplikacji można zmieniać i rozmieszczać w dowolnym miejscu na ekranie, nawet jeśli nakładają się one na inne aplikacje.
Ikona
Rozpoznajemy aplikacje po ikonie. Ikona ta pojawia się podczas wyszukiwania aplikacji, w ustawieniach, przy każdym uruchamianiu aplikacji oraz w miejscach, w których są wyświetlane uruchomione aplikacje.
Są to między innymi:
- Ekran główny (iOS, iPadOS, Android).
- Menu z aplikacjami (macOS, Android).
- Menu Start lub Menu aplikacji (Windows, ChromeOS, Linux).
- Dokowanie, na pasku zadań lub panele wielozadaniowe (wszystkie systemy operacyjne).
Dopilnuj, aby ikona progresywnej aplikacji internetowej 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, takie jak te na ilustracji poniżej.
Ustawianie tematyki aplikacji
Styl aplikacji PWA można dostosować na kilka sposobów, na przykład:
- Kolor motywu: określa kolor paska tytułu okna na komputerze oraz koloru paska stanu na urządzeniach mobilnych. Dzięki metatagom możesz dodawać różne schematy, np. tryb ciemny lub jasny, i będą one stosowane w zależności od preferencji użytkownika.
- Kolor tła: określa kolor okna przed wczytaniem aplikacji i jej kodu CSS.
- Kolor uzupełniający: określa kolor wbudowanych komponentów przeglądarki, takich jak elementy sterujące formularza.
Tryby wyświetlania
Możesz określić, jakiego rodzaju okna chcesz widzieć w przypadku progresywnej aplikacji internetowej. Masz do wyboru 3 opcje:
- Pełny ekran
- Skrypt samodzielny
- Minimalny interfejs użytkownika
Tryb pełnoekranowy
Takie reklamy mogą być wyświetlane w treściach interaktywnych, takich jak gry, rzeczywistość wirtualna czy AR. Jest ona obecnie dostępna tylko na urządzeniach z Androidem. Ukrywa pasek stanu i pasek nawigacyjny, dzięki czemu PWA zajmuje 100% ekranu.
Pełnoekranowe aplikacje PWA nie są obsługiwane na komputerach i iPadach. Możesz jednak użyć pełnego ekranu API z poziomu takiej aplikacji, aby na żądanie użytkownika wyświetlić aplikację na pełnym ekranie.
Wersja samodzielna
Tryb samodzielny jest najpopularniejszą opcją w przypadku progresywnej aplikacji internetowej. Wyświetla ją w standardowym oknie systemu operacyjnego bez interfejsu użytkownika do nawigacji w przeglądarce. 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ń do przeglądarki.
- Wyświetl i zmień uprawnienia.
- Sprawdź bieżące źródło i certyfikat SSL.
Podczas renderowania na karcie omniboksa lub paska adresu URL może też pojawić się informacja o uprawnieniach i korzystaniu ze sprzętu.
Na urządzeniach mobilnych w samodzielnej aplikacji PWA tworzy standardowy ekran z paskiem stanu widocznym. Użytkownik może dzięki temu zobaczyć powiadomienia, godzinę i poziom naładowania baterii. Często nie ma żadnego menu kontrolowanego przez przeglądarkę, na przykład wersji na komputery.
Niektóre przeglądarki na Androidzie tworzą stałe i ciche powiadomienie, gdy aplikacja PWA działa na pierwszym planie. Pozwala to użytkownikowi skopiować bieżący adres URL lub inne opcje.
Minimalny interfejs użytkownika
Ten tryb jest dostępny w progresywnych aplikacjach internetowych na urządzeniach z Androidem i komputerach. Gdy to zrobisz, przeglądarka renderująca Twoją aplikację PWA wyświetli minimalny interfejs, który ułatwi użytkownikowi poruszanie się po aplikacji.
Na urządzeniu z Androidem zobaczysz pasek tytułu, który renderuje bieżący element <title> oraz źródło z małym menu. Na komputerze na pasku tytułu znajdziesz zestaw przycisków ułatwiających nawigację, w tym przycisk Wstecz oraz element sterujący, który w zależności od bieżącego stanu wczytywania umożliwia przełączanie się między zatrzymaniem a ponownym załadowaniem.
Optymalizacja projektu pod kątem komputerów
Projektując progresywną aplikację internetową do pracy na komputerze, musisz myśleć o nieskończonych możliwościach rozmiaru okna – nie tylko na karcie przeglądarki czy jako aplikacja w mobilnym systemie operacyjnym.
W rozdziale 3 wspomnieliśmy o trybie mini – aplikacja komputerowa może mieć nawet 200 x 100 pikseli. Jako tytuł okna zostanie użyta zawartość elementu <title> w kodzie HTML. Te treści są też renderowane po naciśnięciu klawisza alt i przełączaniu się między aplikacjami oraz w innych miejscach.
Zwróć uwagę na element <title> w kodzie HTML i zastanów się, jak go używać. <title> nie służy tylko do SEO czy renderowania pierwszych znaków na karcie przeglądarki – pełni rolę niezależnego okna na komputer.
Sprawdzone metody dotyczące usług porównywania cen
Wszystkie funkcje związane z układem, projektem i animacją CSS mają zastosowanie, gdy treści są renderowane w samodzielnej aplikacji. Jest jednak kilka porad i wskazówek, które pomogą Ci lepiej wykorzystać możliwości niezależnego okna.
Zapytania o multimedia
Pierwsze zapytanie o media, z którego możesz skorzystać w PWA, to właściwość display-mode, która akceptuje wartości browser, standalone, minimal-ui lub fullscreen.
To zapytanie o media stosuje różne style do każdego trybu. W trybie przeglądarki możesz na przykład wyrenderować zaproszenie do instalacji albo tylko jedną konkretną informację, gdy użytkownik użyje ikony systemowej aplikacji. Może to obejmować dodanie przycisku Wstecz, który będzie używany, gdy aplikacja uruchamia się 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
Użytkownicy korzystający z zainstalowanej aplikacji PWA oczekują działania aplikacji. Chociaż nie jest łatwo zdefiniować, co oznacza, domyślne działanie strony w niektórych sytuacjach nie zawsze zapewnia największą wygodę.
Wybór użytkownika
Treści można zwykle zaznaczyć za pomocą myszy lub wskaźnika albo gestu naciśnięcia i przytrzymania. Jest pomocna w przypadku treści, ale nie zapewnia wygody w przypadku elementów nawigacyjnych, menu i przycisków w PWA.
Dlatego warto wyłączyć wybór użytkownika w tych elementach za pomocą atrybutu user-select: none w wersji prefiksu -webkit-:
.unselectable {
user-select: none;
}
Kolor uzupełniający
W PWA możesz określić kolor pasujący do marki w elementach sterujących formularza HTML za pomocą właściwości accent-color.
Czcionki systemowe
Jeśli chcesz, aby dany element, np. okna dialogowe 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ę, która odświeża stronę po jej przesunięciu w dół. W niektórych przeglądarkach, na przykład w Chrome na Androidzie, takie działanie jest też włączone w samodzielnych aplikacjach PWA.
Możesz wyłączyć to działanie. Dotyczy to na przykład sytuacji, gdy udostępniasz własne funkcje zarządzania gestami lub odświeżania albo gdy istnieje możliwość, że użytkownik przypadkowo wywoła to działanie.
Można tę funkcję wyłączyć, używając parametru overscroll-behavior-y: contain:.
body {
overscroll-behavior-y: contain;
}
Bezpieczne strefy
Niektóre urządzenia nie mają nieprzesłoniętych prostokątnych ekranów. Zamiast tego mogą mieć inny kształt, koło lub mieć fragmenty ekranu, których nie można użyć, takie jak wycięcie w telefonie iPhone 13. W takich przypadkach niektóre przeglądarki ujawniają zmienne środowiskowe wraz z bezpiecznymi obszarami, w których można wyświetlać treści.
Jeśli chcesz mieć pełny dostęp do ekranu, nawet niewidocznego obszaru, w celu wyrenderowania koloru lub obrazu, umieść viewport-fit=cover w zawartości tagu <meta name="viewport">. Następnie użyj zmiennych środowiskowych safe-area-inset-*, aby bezpiecznie rozszerzyć swoje treści na te obszary.