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

Wydajność odgrywa ważną rolę w odniesieniu sukcesu online, ponieważ witryny o wysokiej skuteczności angażują użytkowników i utrzymują ich zainteresowanie lepiej niż strony działające wolniej. Skoncentruj się na optymalizacji pod kątem wskaźników wydajności skoncentrowanych na użytkownikach.

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ę też w przypadku zdarzenia 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ż aplikacje mają różne potrzeby, audyty wydajności w Lighthouse opierają się na podstawowych wskaźnikach internetowych. Wynik w tych audytach zwiększy prawdopodobieństwo zadowolenia użytkowników. 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

Zapoznaj się z naszym przewodnikiem po krótkim czasie wczytywania, aby dowiedzieć się, jak sprawić, by Twoja aplikacja PWA szybko się uruchamiała.

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.

Według Jeremy'ego Keitha skutecznego rozwiązania jest resilient Web Designwskazanie najważniejszych funkcji, udostępnianie ich za pomocą najprostszej technologii i ulepszanie wygody użytkowania w miarę możliwości. W wielu przypadkach oznacza to, że trzeba zacząć od HTML, by utworzyć główne funkcje, a potem zadbać o 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 wysyła żądanie POST. Po skompilowaniu możesz ulepszyć JavaScript do weryfikacji formularzy i przesłać formularz za pomocą technologii AJAX, aby polepszyć 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 górną część spektrum. Używaj wykrywania funkcji, aby zapewnić wygodę jak największej liczbie potencjalnych użytkowników, m.in. użytkownikom korzystającym 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 w różnych rozmiarach, nawet na tym samym urządzeniu. Dlatego ważne jest, aby nie tylko dopasować zawartość witryny do widocznego obszaru, ale też zadbać o to, aby wszystkie funkcje i zawartość witryny były użyteczne przy jej różnych rozmiarach.

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 pod kątem różnych rozmiarów widocznego obszaru i powinny one być widoczne w taki lub inny sposób. Jak stwierdza Luke Wroblewski w swojej książce Mobile First, warto zacząć od małych elementów i dostosować projekt pod kątem większych ekranów.

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 rozdzielczości 320 x 480 pikseli nie ma po prostu miejsca na zbędne, 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 projektowania responsywnego, zapoznaj się z informacjami o projektowaniu ukierunkowanym na treść i układach elastycznych bez treści. Choć koncentrujemy się na urządzeniach mobilnych, lekcje z publikacji Seven Deadly Mobile Myths Josha Clarka odnoszą się równie dobrze do małych widoków elastycznych witryn, jak i dla 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 ich stanu połączenia. Aplikacja na danej platformie nigdy nie wyświetla pustej strony, gdy jest offline. PWA nigdy nie powinna wyświetlać domyślnej strony offline przeglądarki. Niestandardowe działanie offline, zarówno w przypadku otwierania adresu URL, który nie został zapisane w pamięci podręcznej, jak i próby skorzystania z funkcji wymagającej połączenia, sprawia, że korzystanie z internetu jest jak część urządzenia, na którym działa.

Jak

Podczas zdarzenia install skryptu service worker możesz wstępnie zapisać niestandardową stronę offline w pamięci podręcznej do późniejszego użycia. Jeśli użytkownik przejdzie w tryb offline, w odpowiedzi możesz wysłać odpowiedź, używając wstępnie zapisanej niestandardowej strony offline. Skorzystaj z naszego przykładowej strony offline, aby zobaczyć przykład działania i dowiedzieć się, jak wdrożyć tę funkcję samodzielnie.

Użytkownicy, którzy instalują lub dodają aplikacje na swoich urządzeniach, zwykle częściej 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. Działa w osobnym oknie aplikacji, niezależnym od przeglądarki, i pojawia się na liście zadań, tak jak inne aplikacje.

Podobnie jak w przypadku aplikacji przeznaczonych na konkretne urządzenia, użytkownicy, którzy instalują Twoje aplikacje, są najbardziej zaangażowanymi odbiorcami. Ich wskaźniki zaangażowania są często takie same jak w przypadku użytkowników aplikacji korzystających z urządzeń 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 skonfigurować PWA, postępuj zgodnie z naszym przewodnikiem po instalacji.

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óżujące i lotnicze powinny mieć łatwy dostęp do szczegółów podróży i kart pokładowych, gdy jesteś 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ą uwierzytelnieni w trybie offline, więc zaprojektowano je z myślą o uwierzytelnianiu w trybie 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óźniać 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. Z perspektywy wygody użytkownika możesz wykorzystać szkieletowe ekrany, które dają użytkownikom wrażenie szybkości i treści podczas wczytywania, a w razie potrzeby mogą wrócić do treści z pamięci podręcznej lub wskaźnika offline.

Wszystkie interakcje użytkownika spełniają wymagania dotyczące ułatwień dostępu WCAG 2.0.

Dlaczego

Większość użytkowników w pewnym momencie chce korzystać z Twojej aplikacji PWA w sposób zgodny z wymaganiami ułatwień dostępu 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. Jeśli udostępnisz swoją aplikację PWA, każdy będzie mógł z niej korzystać.

Jak

Możesz na początek zapoznać się z artykułem Introduction to Web Accessibility przygotowanym przez W3C. Większość testów ułatwień dostępu trzeba przeprowadzać ręcznie. Narzędzia takie jak kontrole Ułatwienia dostępu 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 poprawnych semantycznie, zamiast odtwarzać je samodzielnie, na przykład 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). Karty z wartościami odżywczymi A11Y zawierają świetne wskazówki dotyczące niektórych popularnych komponentów.

Swoją progresywną aplikację internetową można łatwo wykryć za pomocą wyszukiwania.

Dlaczego

Jedną z największych zalet internetu jest możliwość odkrywania witryn i aplikacji za pomocą wyszukiwarki. Jak się okazuje, ponad połowa całego ruchu w witrynie pochodzi z bezpłatnych wyników wyszukiwania. Aby potencjalni użytkownicy mogli znaleźć Twoją progresywną aplikację internetową, musisz sprawdzić, czy treści mają kanoniczne adresy URL, a wyszukiwarki mogą je indeksować. Jest to szczególnie widoczne przy korzystaniu 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ż użyć narzędzi właściciela witryny Bing lub Yandex i rozważ uwzględnić w aplikacji PWA uporządkowane dane za pomocą schematów ze strony Schema.org.

Z aplikacji PWA można korzystać w taki sam sposób jak za pomocą myszy, klawiatury, rysika i dotyku.

Dlaczego

Urządzenia oferują różne metody wprowadzania, 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. W miarę możliwości upewnij się, że Twoja aplikacja i wszystkie jej funkcje obsługują dowolną metodę wprowadzania, którą może wybrać użytkownik. W razie potrzeby ulepsz środowisko, aby umożliwić też obsługę 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 i sprawdza się szczególnie w przypadku dodawania 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 twórz ich od nowa za pomocą niesemantycznego kodu HTML. Gdy uwzględniasz interakcje, które uaktywniają 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 tak, aby zakłócać pracę użytkownika, ponieważ zwykle są związane z zaawansowanymi funkcjami, które wymagają wyrażenia zgody. Aktywowanie tych promptów bez dodatkowego kontekstu, np. podczas wczytywania strony, sprawia, że użytkownicy są mniej skłonni do zaakceptowania tych uprawnień i w przyszłości mogą nie ufać im. Zamiast tego wyświetlaj te prompty dopiero po przedstawieniu użytkownikowi kontekstu, w którym przekonuje się, dlaczego potrzebujesz danego uprawnienia.

Jak

Artykuł Permission UX oraz artykuł na temat The Right Ways to Ask Users for Permissions (Właściwy sposób prosinia użytkowników o uprawnienia) to przydatne zasoby, dzięki którym dowiesz się, jak projektować prośby o uprawnienia, które, choć są skupione na urządzeniach mobilnych, będą stosowane do wszystkich aplikacji PWA.

Utrzymywanie dobrej bazy kodu ułatwia realizowanie celów i udostępnianie nowych funkcji.

Dlaczego

Tworzenie nowoczesnej aplikacji internetowej wymaga sporo pracy. Aktualizowanie aplikacji i dobry stan bazy kodu ułatwia dostarczanie nowych funkcji, które spełniają inne cele wymienione na tej liście kontrolnej.

Jak

Istnieje wiele kontroli o wysokim priorytecie, które pomagają zapewnić sprawne działanie bazy kodu:

• Unikaj używania bibliotek ze znanymi lukami w zabezpieczeniach.
• Upewnij się, że 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.