Co wyróżnia progresywną aplikację internetową?

Szybkość działania odgrywa ważną rolę w sukcesie każdej witryny, ponieważ dobrze działające strony interesują użytkowników i utrzymują ich zainteresowanie lepiej niż strony działające wolniej. Skup się na optymalizacji pod kątem danych o wydajności dotyczących użytkowników.

Dlaczego

Szybkość jest kluczowa, aby użytkownicy używali Twojej aplikacji. W związku z tym wydłużenie czasu wczytywania strony z 1 do 10 sekund zwiększa prawdopodobieństwo rezygnacji użytkownika o 123%. Wydajność nie kończy się na zdarzeniu load. Użytkownicy nie powinni się zastanawiać, czy ich interakcja (np. kliknięcie przycisku) została zarejestrowana. Przewijanie i animacja powinny być płynne. Wydajność wpływa na całą ścieżkę użytkownika, zarówno na zachowanie aplikacji, jak i na to, jak użytkownicy ją postrzegają.

Chociaż każda aplikacja ma inne potrzeby, audyt wydajności w Lighthouse jest oparty na podstawowych wskaźnikach internetowych. Im wyższa ocena w tym audycie, tym większa szansa, że użytkownicy będą zadowoleni. Aby uzyskać dane o wydajności Twojej aplikacji internetowej w rzeczywistych warunkach, możesz też użyć narzędzia PageSpeed Insights lub Raportu na temat użytkowania Chrome.

Jak

Aby dowiedzieć się, jak sprawić, aby PWA szybko się wczytywała i utrzymywała szybkość, przeczytaj nasz przewodnik.

Użytkownicy mogą korzystać z dowolnej przeglądarki, aby uzyskać dostęp do aplikacji internetowej przed jej zainstalowaniem.

Dlaczego

Progresywne aplikacje internetowe to przede wszystkim aplikacje internetowe, co oznacza, że muszą działać we wszystkich przeglądarkach.

Skutecznym sposobem na to jest, jak twierdzi Jeremy Keith w książce Resilient Web Design, zidentyfikowanie podstawowych funkcji, udostępnienie ich za pomocą najprostszej możliwej technologii, a następnie, w miarę możliwości, ulepszanie wrażeń użytkowników. W wielu przypadkach oznacza to, że najpierw należy użyć kodu HTML do utworzenia funkcji podstawowych, a potem ulepszyć wrażenia użytkownika, korzystając z CSS i JavaScriptu.

Weźmy na przykład przesyłanie formularzy. Najprostszym sposobem wdrożenia jest użycie formularza HTML, który przesyła żądanie POST. Po utworzeniu formularza możesz ulepszyć wrażenia użytkowników, stosując JavaScript do weryfikacji formularza i przesyłania go za pomocą AJAX, co poprawi wrażenia użytkowników, którzy mogą korzystać z tej funkcji.

Użytkownicy odwiedzają Twoją witrynę na różnych urządzeniach i w różnych przeglądarkach. Nie możesz kierować reklam tylko na najwyższy poziom tego spektrum. Wykorzystaj wykrywanie funkcji, aby zapewnić wygodę użytkowania jak największej liczbie potencjalnych użytkowników, w tym tym korzystających z przeglądarek i urządzeń, które jeszcze nie istnieją.

Jak

Książka Jeremy'a Keitha Resilient Web Design (ang. elastyczny projekt stron internetowych) to doskonałe źródło informacji o tym, jak podchodzić do projektowania stron internetowych w ramach tej metody progresywnej, która działa w różnych przeglądarkach.

Materiały dodatkowe

• Artykuł Understanding Progressive Enhancement (Angielski) na stronie List Apart to dobry wstęp do tego tematu.
• Smashing Magazine's Progressive Enhancement: What It Is, And How To Use It? zawiera praktyczne wprowadzenie i linki do bardziej zaawansowanych tematów.
• W artykule Wdrażanie funkcji wykrywania na stronie MDN znajdziesz informacje o sposobie wykrywania funkcji przez bezpośrednie wysyłanie zapytania.

Użytkownicy mogą korzystać z Twojej aplikacji PWA na ekranach o dowolnym rozmiarze, a wszystkie jej treści są dostępne na ekranach o dowolnym rozmiarze.

Dlaczego

Urządzenia są dostępne w różnych rozmiarach, a użytkownicy mogą korzystać z aplikacji na urządzeniach o różnych rozmiarach, nawet na tym samym urządzeniu. Dlatego tak ważne jest, aby treści nie tylko mieściły się w widocznym obszarze, ale też aby wszystkie funkcje i treści witryny były dostępne we wszystkich rozmiarach widocznego obszaru.

Zadania, które użytkownicy chcą wykonać, oraz treści, do których chcą uzyskać dostęp, nie zmieniają się wraz z rozmiarem obszaru widocznego. Możesz zmienić układ treści na potrzeby różnych rozmiarów widocznego obszaru. Jak twierdzi Luke Wroblewski w swojej książce Mobile First, zaczynanie od małej strony i dostosowywanie jej do większych ekranów może poprawić jej wygląd:

Ze względu na specyfikę urządzeń mobilnych zespoły programistów muszą skupiać się na najważniejszych danych i czynnościach w aplikacji. Na ekranie o wymiarach 320 x 480 pikseli po prostu nie ma miejsca na dodatkowe, niepotrzebne elementy. Musisz ustalić priorytety.

Jak

Istnieje wiele materiałów dotyczących projektowania responsywnego, w tym pierwotny artykuł Ethana Marcotte, zbiór ważnych pojęć związanych z tym tematem, a także liczne książki i wykłady. Aby zawęzić zakres tej dyskusji do aspektów treści w projektowaniu responsywnym, zapoznaj się z artykułami projektowanie z uwzględnieniem treści i  responsywne układy z uwzględnieniem treści. Na koniec warto wspomnieć, że chociaż książka Seven Deadly Mobile Myths Josha Clarka koncentruje się na urządzeniach mobilnych, to zawarte w niej informacje są równie przydatne w przypadku małych widoków stron responsywnych, jak i ogółem w przypadku urządzeń mobilnych.

Gdy użytkownicy są offline, pozostawanie w aplikacji PWA zapewnia im większą płynność niż przekierowanie do strony offline domyślnej przeglądarki.

Dlaczego

Użytkownicy oczekują, że zainstalowane aplikacje będą działać niezależnie od stanu połączenia. Aplikacja dla konkretnej platformy nigdy nie wyświetla pustej strony w trybie offline, a aplikacja internetowa nigdy nie powinna wyświetlać domyślnej strony offline przeglądarki. Zapewnianie niestandardowych funkcji offline, zarówno gdy użytkownik przechodzi do adresu URL, który nie został zapisany w pamięci podręcznej, jak i gdy próbuje użyć funkcji, która wymaga połączenia, sprawia, że przeglądanie stron staje się częścią urządzenia, na którym działa.

Jak

Podczas zdarzenia install w usługowym workerze możesz wstępnie przechowywać niestandardową stronę offline, która ma się wyświetlać, gdy użytkownik przejdzie w tryb offline. Aby dowiedzieć się, jak samodzielnie wdrożyć tę funkcję, przeczytaj artykuł Tworzenie strony zapasowej offline. Pamiętaj, że jeśli nie podasz żadnej strony offline, Chrome wyświetli podstawową stronę offline.

Użytkownicy, którzy instalują lub dodają aplikacje na urządzeniu, chętniej z nich korzystają.

Dlaczego

Po zainstalowaniu progresywna aplikacja internetowa wygląda i działa jak wszystkie inne zainstalowane aplikacje. Aplikacja uruchamia się w tym samym miejscu, w którym użytkownicy uruchamiają inne aplikacje. Uruchamia się w osobnym oknie aplikacji, oddzielnie od przeglądarki, i wyświetla się na liście zadań, tak jak inne aplikacje.

Podobnie jak w przypadku aplikacji na konkretne urządzenia, użytkownicy, którzy instalują Twoje aplikacje, są najbardziej zaangażowanymi odbiorcami, a ich zaangażowanie często jest na tym samym poziomie co zaangażowanie użytkowników aplikacji na urządzeniach mobilnych. Te dane obejmują większą liczbę ponownych wizyt, dłuższy czas spędzony w Twojej witrynie i wyższe współczynniki konwersji niż w przypadku typowych użytkowników.

Jak

Aby dowiedzieć się, jak udostępnić PWA do instalacji, skorzystaj z naszego przewodnika.

Jeśli połączenie z internetem nie jest wymagane, aplikacja działa tak samo w trybie offline, jak i online.

Dlaczego

Oprócz udostępniania niestandardowej strony offline użytkownicy oczekują, że aplikacje PWA będą mogły działać offline. Na przykład aplikacje podróżnicze i lotnicze powinny mieć informacje o podróży i karty pokładowe dostępne w trybie offline. Aplikacje do odtwarzania muzyki, filmów i podcastów powinny umożliwiać odtwarzanie offline. Aplikacje społecznościowe i aplikacje z wiadomościami powinny przechowywać w pamięci podręcznej najnowsze treści, aby użytkownicy mogli je czytać offline. Użytkownicy oczekują też, że będą mogli pozostać uwierzytelnieni w trybie offline, dlatego należy zaprojektować uwierzytelnianie offline. Progresywna aplikacja internetowa offline zapewnia użytkownikom wrażenia zbliżone do tych, jakie daje aplikacja.

Jak

Po określeniu, które funkcje mają działać offline, musisz udostępnić treści i dostosować je do kontekstów offline. Do przechowywania i pobierania danych możesz używać IndexedDB, czyli wbudowanego w przeglądarkę systemu przechowywania NoSQL, a także synchronizacji w tle, która umożliwia użytkownikom wykonywanie działań w trybie offline i opóźnia komunikację z serwerem do momentu, gdy użytkownik odzyska stabilne połączenie. Możesz też używać pracowników usługi do przechowywania innych rodzajów treści, takich jak obrazy, pliki wideo i pliki audio, do użytku offline oraz do implementowania bezpiecznych sesji o długim czasie trwania, aby utrzymać uwierzytelnianie użytkowników. Aby zapewnić użytkownikom lepsze wrażenia, możesz użyć szkieletowych ekranów, które dają użytkownikom poczucie szybkości i zawartości podczas wczytywania, a w razie potrzeby mogą wyświetlić treści z poziomu pamięci podręcznej lub wskaźnik trybu offline.

Wszystkie interakcje użytkownika spełniają wymagania dotyczące dostępności WCAG 2.0.

Dlaczego

Większość użytkowników w jakimś momencie chce korzystać z Twojej aplikacji internetowej na wiele sposobów, które są objęte wymaganiami dotyczącymi dostępności WCAG 2.0. Zdolność ludzi do interakcji z Twoją PWA i jej zrozumienia jest zróżnicowana, a potrzeby mogą być tymczasowe lub stałe. Dzięki temu, że udostępniasz swoją PWA, czynisz ją przydatną dla wszystkich.

Jak

Na początek możesz zapoznać się z  Wstępem do dostępności stron internetowych W3C. Większość testów dostępności musi być przeprowadzana ręcznie. Narzędzie Lighthouse, axe i Accessibility Insights mogą pomóc w automatyzacji niektórych testów ułatwień dostępu. Ważne jest też, aby używać elementów o prawidłowej semantyce zamiast samodzielnie je odtwarzać, np. elementów a i button. Dzięki temu, gdy będziesz potrzebować bardziej zaawansowanych funkcji, będziesz mieć pewność, że spełniają one oczekiwania dotyczące dostępności (np. kiedy użyć strzałek, a kiedy kart). Kartki z informacjami o odżywianiu A11Y zawierają doskonałe porady dotyczące niektórych popularnych składników.

PWA może być łatwo odnaleziony w wyszukiwarce.

Dlaczego

Jedną z największych zalet internetu jest możliwość znajdowania witryn i aplikacji za pomocą wyszukiwarki. W fakcie ponad połowa całego ruchu w witrynie pochodzi z bezpłatnych wyników wyszukiwania. Aby umożliwić potencjalnym użytkownikom znalezienie Twojej aplikacji PWA, musisz zadbać o to, aby istniały kanoniczne adresy URL treści i aby wyszukiwarki mogły indeksować Twoją witrynę. Jest to szczególnie ważne w przypadku korzystania z renderowania po stronie klienta.

Jak

Na początek sprawdź, czy każdy adres URL ma unikalny, opisowy tytuł i metaopis. Następnie możesz użyć Google Search Console i audytów optymalizacji pod kątem wyszukiwarek w Lighthouse, aby debugować i rozwiązywać problemy z wykrywalnością w przypadku PWA. Możesz też skorzystać z narzędzi dla właścicieli witryn Bing lub Yandex i zastanowić się nad dodaniem uporządkowanych danych za pomocą schematów z Schema.org w swojej aplikacji PWA.

Aplikację PWA można używać za pomocą myszy, klawiatury, rysika lub ekranu dotykowego.

Dlaczego

Urządzenia oferują różne metody wprowadzania danych, a użytkownicy powinni mieć możliwość płynnego przełączania się między nimi podczas korzystania z aplikacji. Co równie ważne, metody wprowadzania danych nie powinny zależeć od rozmiaru ekranu, co oznacza, że duże widoczne obszary muszą obsługiwać ekrany dotykowe, a małe – klawiatury i myszy. Dokładaj wszelkich starań, aby aplikacja i wszystkie jej funkcje obsługiwały dowolną metodę wprowadzania danych, którą wybierze użytkownik. W stosownych przypadkach ulepszaj funkcje, aby umożliwić sterowanie za pomocą określonych elementów sterujących (np. funkcji przeciągania, aby odświeżyć).

Jak

Interfejs Pointer Events API zapewnia ujednolicony interfejs do pracy z różnymi opcjami wprowadzania danych i jest szczególnie przydatny do obsługi rysika. Aby zapewnić obsługę zarówno dotykiem, jak i za pomocą klawiatury, używaj odpowiednich elementów semantycznych (kotwic, przycisków, elementów sterujących formularzem itp.) i nie odtwarzaj ich za pomocą niesemantycznego kodu HTML. Jeśli uwzględniasz interakcje, które aktywują się po najechaniu kursorem, upewnij się, że można je też aktywować kliknięciem lub dotknięciem.

Gdy prosisz o dostęp do interfejsów API o dużej mocy, podawaj kontekst i pros o to tylko wtedy, gdy jest to konieczne.

Dlaczego

Interfejsy API, które uruchamiają prośbę o uprawnienia, takie jak powiadomienia, geolokalizacja czy dane uwierzytelniające, są celowo tak zaprojektowane, aby zakłócać działanie aplikacji. Dzieje się tak, ponieważ są one zwykle powiązane z funkcjami o wysokiej wydajności, które wymagają zgody użytkownika. Wyświetlanie tych monitów bez dodatkowego kontekstu, np. podczas wczytywania strony, sprawia, że użytkownicy rzadziej akceptują te uprawnienia i częściej nie ufają im w przyszłości. Zamiast tego wyświetlaj te monity dopiero po wyjaśnieniu użytkownikowi, dlaczego potrzebujesz danego uprawnienia.

Jak

Artykuł UX dotyczący uprawnień oraz artykuł Sprawdzone metody prośby o uprawnienia na stronie UX Planet to dobre materiały, które pomogą Ci zrozumieć, jak projektować prośby o uprawnienia. Chociaż dotyczą one głównie urządzeń mobilnych, można je stosować do wszystkich PWA.

Dbanie o jakość kodu ułatwia realizację celów i wdrażanie nowych funkcji.

Dlaczego

Tworzenie nowoczesnej aplikacji internetowej wymaga wielu działań. Aktualizowanie aplikacji i utrzymywanie jej kodu w dobrej kondycji ułatwia wprowadzanie nowych funkcji, które spełniają pozostałe cele określone w tej liście kontrolnej.

Jak

Aby zapewnić prawidłowość kodu źródłowego, przeprowadzamy wiele kontroli o wysokim priorytecie:

• Unikaj korzystania z bibliotek z znanymi lukami w zabezpieczeniach.
• Sprawdź, czy nie używasz wycofanych interfejsów API.
• Usuń z bazy kodu niebezpieczne praktyki kodowania (np. korzystanie z document.write() lub niepasywne odsłuchiwanie zdarzeń przewijania).
• Możesz nawet zastosować kod zabezpieczający, aby mieć pewność, że PWA nie ulegnie awarii, jeśli nie uda się załadować funkcji analitycznych lub innych bibliotek innych firm.
• Zastanów się nad wymaganiem analizy statycznej kodu, np. lintingu, a także automatycznego testowania w różnych przeglądarkach i kanałach wersji. Te techniki mogą pomóc w wykrywaniu błędów, zanim trafią one do wersji produkcyjnej.