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

Wydajność ma znaczącą rolę dla powodzenia każdego działania online, ponieważ witryny o wysokiej skuteczności angażują 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ść ma kluczowe znaczenie dla zachęcenia użytkowników do korzystania z Twojej aplikacji. W efekcie czas wczytywania strony wydłuża się z jednej do 10 sekund, a prawdopodobieństwo odrzucenia reklamy przez użytkownika wzrasta o 123%. Wydajność nie kończy się na zdarzeniu load. Użytkownicy nie powinni zastanawiać się, czy ich interakcja – np. kliknięcie przycisku – została zarejestrowana. Przewijanie i animacja powinny być płynne. Wydajność wpływa na ogólne wrażenia z korzystania z aplikacji – zarówno na sposób działania aplikacji, jak i sposobu jej postrzegania przez użytkowników.

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. Możesz też użyć narzędzia PageSpeed Insights lub Raportu na temat użytkowania Chrome, aby uzyskać rzeczywiste dane o wydajności aplikacji internetowej.

Jak

Aby dowiedzieć się, jak sprawić, aby PWA szybko się wczytywała i utrzymywała szybkość, skorzystaj z naszego przewodnika na temat szybkiego wczytywania.

Przed zainstalowaniem Twojej aplikacji internetowej użytkownicy mogą korzystać z niej w dowolnej przeglądarce.

Dlaczego

Progresywne aplikacje internetowe to najpierw aplikacje internetowe, a to oznacza, że muszą działać w różnych przeglądarkach.

Jak pisze Jeremy Keith w książce Resilient Web Design (ang. „Wytrzymały projekt stron internetowych”), skutecznym sposobem na to jest określenie głównych 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 trzeba zacząć od HTML, by utworzyć główne funkcje, a potem zwiększyć wygodę użytkowników za pomocą CSS i JavaScriptu, by zwiększyć ich zaangażowanie.

Weźmy na przykład przesłanie formularza. Najprostszym sposobem wdrożenia jest użycie formularza HTML, który przesyła żądanie POST. Po skompilowaniu możesz ulepszyć JavaScript do weryfikacji formularzy i przesłać formularz za pomocą technologii AJAX. Pomoże to poprawić wygodę użytkowników, którzy go obsługują.

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

Jak

Opracowany przez Jeremy'ego Keitha Resilient Web Design to doskonały materiał opisujący, jak myśleć o projektowaniu stron internetowych w ramach tej metodologii progresywnej stosowanej w różnych przeglądarkach.

Materiały dodatkowe

• Dobre wprowadzenie do tego tematu zawiera artykuł Zrozumienie stopniowego ulepszania.
• Stopniowe udoskonalenia magazynu Smashing: co to jest i jak z niego korzystać? zawiera praktyczne wprowadzenie i linki do bardziej zaawansowanych tematów.
• Artykuł w MDN na temat implementacji wykrywania cech pokazuje, jak wykryć cechę przez bezpośrednie zapytanie do niej.

Użytkownicy mogą używać Twojej aplikacji PWA na ekranach o dowolnym rozmiarze, a cała jej zawartość jest dostępna w dowolnym rozmiarze widocznego obszaru.

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ć, i treści, do których chcą uzyskać dostęp, nie zmieniają się wraz z rozmiarem widocznego obszaru. 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, zacząć od małej strony i dostosować ją do większych ekranów, aby poprawić jej wygląd:

Zespoły programistów oprogramowania muszą skupić się tylko na najważniejszych danych i działaniach w aplikacji na urządzeniach mobilnych. Na ekranie o wymiarach 320 x 480 pikseli po prostu nie ma miejsca na dodatkowe, niepotrzebne elementy. Ważne jest określenie priorytetów.

Jak

Istnieje wiele materiałów na temat projektowania responsywnego, w tym oryginalny artykuł Ethana Marcotte'a – zbiór ważnych pojęć z nim związanych oraz książki i obszerne wykłady. Aby zawęzić tę dyskusję do aspektów dotyczących treści w elastycznym projektowaniu, zapoznaj się z informacjami o projektowaniu ukierunkowanym na treść i układach elastycznych bez 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, pozostawienie ich w aplikacji PWA zapewnia płynniejsze działanie niż powracanie do domyślnej strony offline w przeglądarce.

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 wydaje się być częścią urządzenia, na którym działa.

Jak

Podczas zdarzenia install skryptu service worker możesz wstępnie zapisać w pamięci podręcznej niestandardową stronę offline, aby wyświetlać, kiedy użytkownik przechodzi w tryb offline. Informacje o tym, jak wdrożyć ją samodzielnie, znajdziesz w artykule Tworzenie strony zastępczej 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 progresywnej aplikacji internetowej będzie ona wyglądać, działać i działać tak samo jak pozostałe zainstalowane aplikacje. Można ją uruchomić w tym samym miejscu, w którym użytkownicy uruchamiają swoje inne aplikacje. Uruchom ją w osobnym oknie aplikacji, oddzielnie od przeglądarki. Pojawi się ona 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 dorównuje zaangażowaniu użytkowników aplikacji na urządzeniach mobilnych. Dane te obejmują więcej powtórnych wizyt, dłuższy czas spędzony w witrynie i wyższe współczynniki konwersji niż typowi użytkownicy.

Jak

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

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

Dlaczego

Użytkownicy oczekują, że aplikacje PWA nie tylko będą dostępne w trybie offline, ale też będą działać w trybie 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 muzyki, filmów i podcastów powinny umożliwiać odtwarzanie offline. Aplikacje społecznościowe i związane z wiadomościami powinny buforować najnowsze treści, aby użytkownicy mogli czytać je 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 realny komfort korzystania z aplikacji.

Jak

Gdy ustalisz, które funkcje będą działać offline, musisz udostępnić swoje treści i dostosować je do kontekstu offline. Do przechowywania i pobierania danych możesz używać IndexedDB – systemu przechowywania danych NoSQL w przeglądarce, a także synchronizacji w tle, aby umożliwić użytkownikom wykonywanie działań w trybie offline i opóźnić komunikację z serwerem do momentu uzyskania przez użytkownika stabilnego połączenia. Skrypty service worker pozwalają też przechowywać inne rodzaje treści, takie jak obrazy, pliki wideo czy audio, do użytku offline, a także implementować bezpieczne, długotrwałe sesje pozwalające 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 ułatwień dostępu WCAG 2.0.

Dlaczego

Większość użytkowników w jakimś momencie chce korzystać z Twojej aplikacji internetowej w sposób zgodny z wymaganiami dotyczącymi dostępności WCAG 2.0. Zdolność ludzi do interakcji z Twoją aplikacją PWA i jej rozumienia jest bardzo zróżnicowane, a potrzeby mogą być tymczasowe lub stałe. Udostępniając swoją PWA, sprawiasz, że będzie ona przydatna dla wszystkich.

Jak

Na początek możesz zapoznać się z  Wstępem do dostępności stron internetowych W3C. Większość testów ułatwień dostępu trzeba przeprowadzać ręcznie. Narzędzia takie jak Accessibility w 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. Daje to pewność, że gdy musisz utworzyć bardziej zaawansowane funkcje, spełnisz oczekiwania związane z ułatwieniami dostępu (np. kiedy używać strzałek, a kiedy używać kart). Karta żywieniowa A11Y zawiera doskonałe porady dotyczące niektórych typowych 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. Upewnij się, że kanoniczne adresy URL treści i Twoja witryna są indeksowane przez wyszukiwarki. Dzięki temu potencjalni użytkownicy będą mogli znaleźć Twoją PWA. Jest to szczególnie ważne w przypadku korzystania z renderowania po stronie klienta.

Jak

Zacznij od sprawdzenia, czy każdy URL ma unikalny, opisowy tytuł i metaopis. Następnie możesz skorzystać z Google Search Console i kontroli optymalizacji pod kątem wyszukiwarek (SEO) w Lighthouse, aby debugować i rozwiązywać problemy z wykrywalnością progresywnej aplikacji internetowej. 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. Równie ważne jest to, że metody wprowadzania nie powinny zależeć od rozmiaru ekranu, co oznacza, że duże widoczne obszary muszą obsługiwać dotyk, a małe muszą obsługiwać 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 razie potrzeby ulepsz środowisko, aby umożliwić też wprowadzanie zmian w danych wejściowych (np. odświeżanie przez przeciągnięcie).

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 dotyku, jak i klawiatury, sprawdź, czy używasz prawidłowych elementów semantycznych (kotwic, przycisków, elementów sterujących formularza itp.) i nie przebudowuj ich za pomocą niesemantycznego kodu HTML. Gdy uwzględniasz interakcje, które aktywują się po najechaniu kursorem, zadbaj o to, aby mogły też być aktywowane kliknięciem lub dotknięciem.

Gdy prosisz o uprawnienia do korzystania z zaawansowanych interfejsów API, podawaj kontekst i pytaj tylko wtedy, gdy interfejs API jest potrzebny.

Dlaczego

Interfejsy API, które wywołują prośbę o przyznanie uprawnień, takie jak powiadomienia, geolokalizacja czy dane logowania, zostały celowo zaprojektowane w taki sposób, aby przeszkadzały użytkownikom, ponieważ zwykle są związane z zaawansowanymi funkcjami, które wymagają wyrażenia zgody. 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 prompty dopiero po przekazaniu użytkownikowi w kontekście kontekstu, w którym przekonuje się, dlaczego potrzebujesz danego uprawnienia.

Jak

Artykuł UX dotyczący uprawnień oraz artykuł Sprawdzone metody prośby o uprawnienia na stronie UX Planet to dobre źródła informacji o tym, jak projektować prośby o uprawnienia, które są ukierunkowane na urządzenia mobilne, ale mają zastosowanie do wszystkich PWA.

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

Dlaczego

Tworzenie nowoczesnej aplikacji internetowej wymaga sporo pracy. 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 (np. używanie document.write() lub niepasywne detektory zdarzeń przewijania),
• Możesz nawet kodować obronnie, by mieć pewność, że Twoja aplikacja PWA nie ulegnie awarii, gdy nie uda się wczytać analityki lub innych bibliotek zewnętrznych.
• Rozważ stosowanie statycznej analizy kodu, np. lintowania, oraz automatycznego testowania w wielu przeglądarkach i kanałach wersji. Te techniki pomagają wychwytywać błędy przed wprowadzeniem ich do produkcji.