Progresywne aplikacje internetowe (PWA) są tworzone i udoskonalane przy użyciu nowoczesnych interfejsów API, aby zapewnić większe możliwości, niezawodność i możliwość instalacji, a przy tym docierać do wszystkich, wszędzie i na dowolnym urządzeniu przy użyciu jednej bazy kodu. Aby tworzyć jak najlepsze treści, skorzystaj z list kontrolnych i rekomendacji podstawowych oraz optymalnych.
Lista kontrolna podstawowych funkcji progresywnej aplikacji internetowej
Lista kontrolna progresywnych aplikacji internetowych określa, co sprawia, że aplikacja może być instalowana i używana przez wszystkich użytkowników, niezależnie od rozmiaru i typu danych wejściowych.
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.
Lista kontrolna optymalnej progresywnej aplikacji internetowej
Aby utworzyć naprawdę świetną PWA, która będzie się wydawać najlepszą aplikacją, musisz zrobić więcej niż tylko przejść przez podstawową listę kontrolną. Optymalna lista kontrolna PWA ma na celu zapewnienie, aby PWA była częścią urządzenia, na którym działa, jednocześnie korzystając z funkcji, które czynią internet tak potężnym.
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.