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.

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.

.

PWA na komputery z motywem i kolorami uzupełniającymi oraz ekran powitalny aplikacji PWA na Androida z kolorami motywu i tła.

.

Uwaga: planując interfejs użytkownika progresywnej aplikacji internetowej, pamiętaj, że w motywie nie można używać obrazów ani gradientów, tylko w zwykłych kolorach. Najlepiej wybierać kolory bez przezroczystości i używać kolorów rgb lub hsl, kodów szesnastkowych lub nazwanych kolorów. Ustawianie motywu aplikacji może też mieć wpływ na ustawienia przeglądarki nawet bez jej instalowania, np. gdy używasz elementu <meta name="theme-color">.

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

.

Uwaga: jeśli dany tryb wyświetlania nie jest obsługiwany lub w inny sposób nie można go użyć do wyświetlenia aplikacji PWA, przełączy się na następny dostępny tryb wyświetlania. Tryb pełnoekranowy powróci do trybu niezależnego, a w trybie samodzielnym powróci do minimalnego interfejsu użytkownika, a minimalistyczny interfejs powróci do domyślnego interfejsu przeglądarki. Tryb wyświetlania przeglądarki nie jest widoczny jako osobne okno, lecz wyświetla się na karcie przeglądarki, z której została zainstalowana, podobnie jak w zakładce internetowej na ekranie głównym.

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.

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).

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.

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.

Ostrzeżenie: przeglądarka Safari na urządzeniach z iOS i iPadOS nie obsługuje trybu minimalnego interfejsu w przypadku aplikacji PWA. Zamiast tego używany jest skrót do przeglądarki. Użytkownik może dodać ikonę do ekranu głównego, ale będzie ona wskazywać Safari jako zakładkę i nie będzie mieć dostępu do aplikacji poza kartą przeglądarki.

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.

Uwaga: jeśli tworzysz aplikację, korzystając z biblioteki po stronie klienta, takiej jak React czy Vue, pamiętaj o zmianie wartości <title> przy przechodzeniu między sekcjami lub trasami aplikacji. Czas zmienić wygląd <title>!

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.

Pamiętaj, że CSS definiuje tylko style treści PWA. W dalszej części tego kursu pokażemy, jak określić deklaracje stylu dla okna wokół treści, np. właściwości w manifeście aplikacji internetowej.

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) {
}

Uwaga: użytkownicy oczekują, że aplikacje będą zintegrowane z platformą, dlatego rozważ wprowadzenie trybów ciemnych i jasnych za pomocą prefers-colors-scheme i uwzględnij prefers-reduced-motion zapytania o multimedia, aby wyłączyć lub zredukować przejścia i animacje.

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.

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;
}

Wybór użytkownika to kluczowy element każdej aplikacji internetowej, który zależy od łatwości obsługi i dostępności. Nie wyłączaj wyboru użytkowników we wszystkich treściach, tylko w elementach interfejsu, jeśli nie robi to niekorzystnie lub niekorzystnie wpływa na wrażenia użytkownika.

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.

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.

Uwaga: korzystając z pola viewport-fit=cover, pamiętaj, że teraz możesz renderować piksele za zaokrąglonymi rogami i wycięciem, dlatego zawsze korzystaj z bezpiecznych marginesów lub dopełnień w przypadku kluczowych treści i elementów interaktywnych.

Zasoby

• Zapytanie o multimedia w trybie wyświetlania CSS
• Kontrola nad przewijaniem: dostosowywanie efektów odświeżania przez przeciągnięcie i przepełnienia
• prefers-color-scheme: Witaj ciemność, mój stary przyjacielu
• preferuje ograniczony ruch: czasami mniejszy ruch, tym więcej,
• Funkcja CSS env()
• Kolor uzupełniający CSS