Progresywne aplikacje internetowe (PWA) są tworzone i ulepszane za pomocą nowoczesnych interfejsów API, aby zapewniać większe możliwości, niezawodność i łatwość instalacji, a jednocześnie docierać do każdego użytkownika w dowolnym miejscu i na dowolnym urządzeniu za pomocą jednego kodu. Aby zapewnić jak najlepsze wrażenia, skorzystaj z podstawowych i optymalnych list kontrolnych oraz rekomendacji.
Lista kontrolna podstawowych funkcji progresywnej aplikacji internetowej
Lista kontrolna progresywnych aplikacji internetowych opisuje, co sprawia, że aplikacja jest instalowalna i użyteczna dla wszystkich użytkowników, niezależnie od rozmiaru czy typu danych wejściowych.
Szybko się uruchamiają i nie zwalniają
Szybkość działania odgrywa znaczącą rolę w sukcesie każdej usługi online, 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 skuteczności zorientowanych na użytkownika.
Dlaczego
Szybkość jest kluczowa, jeśli chcesz zachęcić użytkowników do korzystania z Twojej aplikacji. W rzeczywistości, gdy czas wczytywania strony wydłuża się z 1 sekundy do 10 sekund, prawdopodobieństwo rezygnacji użytkownika wzrasta o 123%. Wydajność nie kończy się na wydarzeniu load. Użytkownicy nie powinni nigdy zastanawiać się, czy ich interakcja, np. kliknięcie przycisku, została zarejestrowana. Przewijanie i animacje powinny być płynne. Wydajność wpływa na całe działanie aplikacji i na to, jak jest ona postrzegana przez użytkowników.
Chociaż wszystkie aplikacje mają różne potrzeby, audyty wydajności w Lighthouse są oparte na podstawowych wskaźnikach internetowych, a wysokie wyniki tych audytów zwiększają prawdopodobieństwo, że użytkownicy będą zadowoleni z korzystania z aplikacji. Możesz też użyć narzędzia PageSpeed Insights lub Raportu na temat użytkowania Chrome, aby uzyskać dane o wydajności aplikacji internetowej w rzeczywistych warunkach.
Jak
Zapoznaj się z naszym przewodnikiem na temat szybkiego wczytywania, aby dowiedzieć się, jak sprawić, by Twoja progresywna aplikacja internetowa szybko się uruchamiała i taką pozostała.
Działa w każdej przeglądarce
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ć w różnych przeglądarkach.
Skutecznym sposobem na to jest, jak pisze Jeremy Keith w książce Resilient Web Design, zidentyfikowanie podstawowych funkcji, udostępnienie ich przy użyciu najprostszej możliwej technologii, a następnie ulepszenie działania tam, gdzie jest to możliwe. W wielu przypadkach oznacza to rozpoczęcie od samego kodu HTML, aby utworzyć podstawowe funkcje, a następnie ulepszenie wrażeń użytkownika za pomocą CSS i JavaScript, aby zapewnić większe zaangażowanie.
Weźmy na przykład przesłanie formularza. Najprostszym sposobem wdrożenia tego rozwiązania jest formularz HTML, który przesyła żądanie POST. Następnie możesz ulepszyć działanie formularza za pomocą JavaScriptu, aby przeprowadzać weryfikację i przesyłać formularz za pomocą AJAX-a, co zwiększy wygodę użytkowników, którzy mogą z tego korzystać.
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órny koniec tego spektrum. Używaj wykrywania funkcji, aby zapewnić jak największej liczbie potencjalnych użytkowników możliwość korzystania z usługi, w tym tym, którzy używają przeglądarek i urządzeń, które jeszcze nie istnieją.
Jak
Resilient Web Design Jeremy'ego Keitha to doskonałe źródło informacji o tym, jak myśleć o projektowaniu stron internetowych w ramach tej progresywnej metodologii obejmującej różne przeglądarki.
Materiały dodatkowe
- Dobrym wprowadzeniem do tego tematu jest artykuł Understanding Progressive Enhancement (w języku angielskim) na stronie A List Apart.
- Artykuł Progressive Enhancement: What It Is, And How To Use It? w Smashing Magazine zawiera praktyczne wprowadzenie do tego zagadnienia i linki do bardziej zaawansowanych tematów.
- W artykule Implementing feature detection (Wdrażanie wykrywania funkcji) na stronie MDN omówiono, jak wykrywać funkcje przez bezpośrednie wysyłanie do nich zapytań.
Dostosowuje się do każdego rozmiaru ekranu
Użytkownicy mogą korzystać z Twojej progresywnej aplikacji internetowej na ekranach o dowolnym rozmiarze, a wszystkie jej treści są dostępne przy dowolnym rozmiarze obszaru wyświetlania.
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 Twoje treści mieściły się w widocznym obszarze, a wszystkie funkcje i elementy witryny były dostępne przy 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 obszaru wyświetlania. Możesz zmieniać układ treści w zależności od rozmiaru okna przeglądarki, a wszystkie treści powinny być dostępne w ten czy inny sposób. Jak pisze Luke Wroblewski w swojej książce Mobile First, zaczynanie od małych elementów i dostosowywanie projektu do większych ekranów może poprawić wygląd witryny:
„Urządzenia mobilne wymagają od zespołów programistów skupienia się tylko na najważniejszych danych i działaniach w aplikacji. Na ekranie o rozdzielczości 320 × 480 pikseli nie ma miejsca na zbędne elementy. Musisz ustalić priorytety”.
Jak
Istnieje wiele materiałów na temat projektowania responsywnego, w tym: oryginalny artykuł Ethana Marcotte’a, zbiór ważnych koncepcji z nim związanych, a także mnóstwo książek i prezentacji.
Aby zawęzić tę dyskusję do aspektów treści w projektowaniu responsywnym, zapoznaj się z tym artykułem:
- Projektowanie z myślą o treści
- Układy elastyczne typu „content-out”.
- 7 mitów na temat urządzeń mobilnych, które są równie istotne w przypadku widoków elastycznych witryn na małych ekranach, jak w przypadku wszystkich urządzeń mobilnych.
Wyświetlanie niestandardowej strony offline
Gdy użytkownicy są offline, pozostawienie ich w progresywnej aplikacji internetowej zapewnia większy komfort niż powrót 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 na konkretną platformę nigdy nie wyświetla pustej strony, gdy jest offline, a PWA nie powinna nigdy wyświetlać domyślnej strony offline przeglądarki. Zapewnienie niestandardowego działania w trybie 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 wymagającej połączenia, sprawia, że aplikacja internetowa jest postrzegana jako część urządzenia, na którym działa.
Jak
Podczas zdarzenia install w usłudze service worker możesz wstępnie zapisać w pamięci podręcznej niestandardową stronę offline, która będzie wyświetlana, gdy użytkownik przejdzie w tryb offline. Przeczytaj artykuł Tworzenie strony rezerwowej w trybie offline, aby dowiedzieć się, jak samodzielnie wdrożyć tę funkcję. Jeśli nie podasz żadnej strony, Chrome nadal będzie wyświetlać podstawową stronę offline.
Można zainstalować
Użytkownicy, którzy instalują lub dodają aplikacje na swoje urządzenia, częściej z nich korzystają.
Dlaczego
Zainstalowanie progresywnej aplikacji internetowej sprawia, że wygląda ona, działa i zachowuje się jak inne zainstalowane aplikacje. Uruchamia się ją w tym samym miejscu, w którym użytkownicy uruchamiają inne aplikacje. Działa w osobnym oknie aplikacji, niezależnie 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żowaną grupą odbiorców, a ich dane o zaangażowaniu często są porównywalne z danymi 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ż w przypadku typowych użytkowników.
Jak
Postępuj zgodnie z naszym przewodnikiem instalacji.
Lista kontrolna optymalnej progresywnej aplikacji internetowej
Aby utworzyć naprawdę świetną PWA, która będzie działać jak najlepsza aplikacja, potrzebujesz więcej niż tylko podstawowej listy kontrolnej. Lista kontrolna optymalnej progresywnej aplikacji internetowej dotyczy sprawienia, aby PWA wyglądała jak część urządzenia, na którym jest uruchomiona, przy jednoczesnym wykorzystaniu tego, co sprawia, że internet jest tak potężny.
Umożliwia korzystanie z aplikacji w trybie offline
Tam, gdzie połączenie nie jest bezwzględnie wymagane, aplikacja działa w trybie offline tak samo jak w trybie online.
Dlaczego
Oprócz niestandardowej strony offline użytkownicy oczekują, że aplikacje PWA będą działać w trybie offline. Na przykład aplikacje podróżnicze i linie lotnicze powinny mieć szczegóły podróży i karty pokładowe łatwo 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 zapisywać w pamięci podręcznej najnowsze treści, aby użytkownicy mogli je czytać offline. Użytkownicy oczekują też, że po przejściu w tryb offline pozostaną uwierzytelnieni, więc zaprojektuj uwierzytelnianie offline.
Aplikacja PWA działająca offline zapewnia użytkownikom wrażenia podobne do aplikacji.
Jak
Po ustaleniu, które funkcje mają działać w trybie offline, musisz udostępnić treści i dostosować je do tego trybu. Możesz używać IndexedDB, czyli systemu przechowywania danych NoSQL w przeglądarce, do przechowywania i pobierania danych, a także synchronizacji w tle, aby umożliwić użytkownikom wykonywanie działań w trybie offline i odkładać komunikację z serwerem do momentu, gdy użytkownik ponownie będzie mieć stabilne połączenie. Za pomocą service workerów możesz przechowywać inne rodzaje treści, takie jak obrazy, pliki wideo i pliki audio, do użytku offline oraz wdrażać bezpieczne, długotrwałe sesje, aby utrzymywać uwierzytelnianie użytkowników.
Z punktu widzenia użytkownika możesz używać ekranów szkieletowych, które dają użytkownikom poczucie szybkości i treści podczas wczytywania, a w razie potrzeby mogą powracać do treści z pamięci podręcznej lub wskaźnika offline.
W pełni dostępny
Wszystkie interakcje użytkowników są zgodne z najnowszym międzynarodowym standardem Web Content Accessibility Guidelines (WCAG).
Dlaczego
Większość użytkowników w pewnym momencie życia będzie chciała korzystać z Twojej progresywnej aplikacji internetowej w sposób zgodny z wytycznymi WCAG. Możliwości interakcji z Twoją progresywną aplikacją internetową i jej zrozumienia przez użytkowników są różne, a potrzeby mogą być tymczasowe lub trwałe. Dzięki temu, że Twoja progresywna aplikacja internetowa jest dostępna, może z niej korzystać każdy.
Jak
Dobrym punktem wyjścia jest wprowadzenie do dostępności stron internetowych przygotowane przez W3C. Większość testów ułatwień dostępu musi być przeprowadzana ręcznie. Kontrola ułatwień dostępu w Lighthouse, axe i Accessibility Insights mogą pomóc Ci zautomatyzować niektóre testy ułatwień dostępu. Ważne jest też, aby używać elementów poprawnych semantycznie zamiast tworzyć je samodzielnie, np. elementów <a> i <button>. Dzięki temu, gdy będziesz potrzebować bardziej zaawansowanych funkcji, spełnisz oczekiwania dotyczące ułatwień dostępu, np. kiedy używać strzałek, a kiedy kart.
A11Y Nutrition Cards zawiera doskonałe porady dotyczące niektórych popularnych składników.
Możliwość wyszukania
Twoja aplikacja PWA może być łatwo znaleziona w wyszukiwarce.
Dlaczego
Jedną z największych zalet internetu jest możliwość odkrywania witryn i aplikacji za pomocą wyszukiwarki. W rzeczywistości 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 zadbać o to, aby dla treści istniały kanoniczne adresy URL, a wyszukiwarki mogły indeksować Twoją witrynę. Jest to szczególnie ważne w przypadku renderowania po stronie klienta.
Jak
Zacznij od upewnienia się, że 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 widocznością progresywnej aplikacji internetowej.
Możesz też użyć narzędzi dla właścicieli witryn Binga lub Yandexa i rozważyć dodanie do PWA danych strukturalnych przy użyciu schematów z Schema.org.
Działa z dowolnym typem danych wejściowych
Twoja progresywna aplikacja internetowa jest tak samo użyteczna w przypadku myszy, klawiatury, rysika i dotyku.
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, aby metody wprowadzania danych nie zależały od rozmiaru ekranu, co oznacza, że duże widoczne obszary muszą obsługiwać dotyk, a małe widoczne obszary 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 odpowiednich przypadkach ulepszaj funkcje, aby umożliwić sterowanie za pomocą konkretnych gestów (np. przeciągnięcie w dół w celu odświeżenia).
Jak
Interfejs Pointer Events API zapewnia ujednolicony interfejs do obsługi różnych opcji wprowadzania danych i jest szczególnie przydatny do dodawania obsługi rysika. Aby obsługiwać zarówno dotyk, jak i klawiaturę, używaj prawidłowych elementów semantycznych (kotwic, przycisków, elementów sterujących formularza itp.) i nie odtwarzaj ich za pomocą niesemantycznego kodu HTML. Jeśli uwzględniasz interakcje, które aktywują się po najechaniu kursorem myszy, upewnij się, że można je też aktywować kliknięciem lub dotknięciem.
Zapewnia kontekst dla próśb o uprawnienia
Gdy prosisz o uprawnienia do korzystania z zaawansowanych interfejsów API, podaj kontekst i proś o nie tylko wtedy, gdy są potrzebne.
Dlaczego
Interfejsy API, które wywołują prośbę o uprawnienia, takie jak powiadomienia, geolokalizacja i dane logowania, są celowo zaprojektowane tak, aby przeszkadzać użytkownikowi, ponieważ zwykle są powiązane z zaawansowanymi funkcjami, które wymagają wyrażenia zgody. Wyświetlanie tych komunikatów bez dodatkowego kontekstu, np. podczas wczytywania strony, zmniejsza prawdopodobieństwo, że użytkownicy udzielą zgody, i zwiększa ich nieufność w przyszłości.
Zamiast tego wyświetlaj te prośby dopiero po wyjaśnieniu użytkownikowi, dlaczego potrzebujesz danego uprawnienia.
Jak
Artykuł Permission UX i The Right Ways to Ask Users for Permissions na UX Planet to dobre źródła informacji o tym, jak projektować prośby o przyznanie uprawnień, które, choć skupiają się na urządzeniach mobilnych, mają zastosowanie do wszystkich progresywnych aplikacji internetowych.
Zgodność ze sprawdzonymi metodami dotyczącymi prawidłowego kodu
Dbanie o kod źródłowy ułatwia osiąganie celów i wdrażanie nowych funkcji.
Dlaczego
Tworzenie nowoczesnej aplikacji internetowej wymaga wielkich nakładów pracy. Aktualizowanie aplikacji i utrzymywanie kodu w dobrej kondycji ułatwia wdrażanie nowych funkcji, które spełniają inne cele wymienione na tej liście kontrolnej.
Jak
Aby zapewnić prawidłowe działanie bazy kodu, wykonujemy szereg kontroli o wysokim priorytecie:
- Unikaj korzystania z bibliotek ze znanymi lukami w zabezpieczeniach.
- Sprawdź, czy nie używasz wycofanych interfejsów API.
- Usuń z bazy kodu niebezpieczne praktyki kodowania, takie jak
document.write()lub niepasywne odbiorniki zdarzeń przewijania. - Możesz nawet zastosować programowanie defensywne, aby mieć pewność, że Twoja progresywna aplikacja internetowa nie przestanie działać, jeśli nie uda się wczytać bibliotek analitycznych lub innych bibliotek innych firm.
- Rozważ wymaganie statycznej analizy kodu, np. lintingu, a także automatycznego testowania w wielu przeglądarkach i kanałach dystrybucji. Te techniki mogą pomóc w wykrywaniu błędów, zanim trafią one do wersji produkcyjnej.