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

Szybkość działania odgrywa ważną rolę w sukcesie każdej witryny internetowej, 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 fakcie wydłużenie czasu wczytywania strony z 1 do 10 sekund powoduje wzrost prawdopodobieństwa rezygnacji użytkownika o 123%. Wydajność możesz zatrzymać się na zdarzeniu load. Użytkownicy nie powinni się zastanawiać, czy ich interakcja (np. kliknięcie przycisku) została zarejestrowana. Przewijanie i animacje powinny być płynne. Wydajność wpływa na wygodę korzystania z aplikacji – zarówno i jak użytkownicy go postrzegają.

Chociaż każda aplikacja ma różne potrzeby, audyty wydajności w Narzędzie Lighthouse opiera się na podstawowych wskaźnikach internetowych, Wysoka pozycja w tych audytach sprawi, że użytkownicy z większym prawdopodobieństwem i przyjemnego korzystania. 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

Postępuj zgodnie z naszym przewodnikiem po krótkim czasie wczytywania, aby: dowiedz się, co zrobić, aby Twoja aplikacja PWA uruchamiała się i nieprzerwanie.

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

Dlaczego

Progresywne aplikacje internetowe to najpierw aplikacje internetowe, co 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 w języku HTML, aby utworzyć główne funkcje i zwiększyć wygodę użytkowników za pomocą CSS i JavaScript, by zwiększyć zaangażowanie odbiorców.

Weźmy na przykład przesłanie formularza. Najprostszym sposobem wdrożenia jest użycie formularza HTML, który przesyła żądanie POST. Po utworzeniu można zwiększyć wygodę korzystania z JavaScriptu, weryfikacji i przesłania formularza za pomocą technologii AJAX użytkownikom, którzy mogą ją obsługiwać.

Użytkownicy odwiedzają Twoją witrynę na różnych urządzeniach i w różnych przeglądarkach. Nie możesz kierować reklam tylko na górną część tego spektrum. Używaj wykrywanie cech, by zapewnić użyteczność usług w jak najszerszym możliwym zakresie grupę potencjalnych użytkowników, w tym korzystających z przeglądarek i urządzeń które jeszcze nie istnieją.

Jak

Elastyczne projektowanie witryn Jeremy'ego Keitha to znakomity zasób wyjaśniający, jak myśleć o projektowaniu stron internetowych tę metodologię progresywną w różnych przeglądarkach.

Materiały dodatkowe

• A List Apart Stopniowe udoskonalenia to dobre wprowadzenie do tematu.
• Magazyn Smashing Stopniowe doskonalenie – co to jest i jak z niego korzystać? zawiera praktyczne wprowadzenie i linki do bardziej zaawansowanych tematów.
• MDN Wdrażanie wykrywania funkcji o tym, jak wykryć cechę, wysyłając bezpośrednie zapytanie.

Użytkownicy mogą korzystać z aplikacji PWA na ekranach o dowolnym rozmiarze, a cała jej zawartość dostępne w widocznym obszarze.

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, upewnij się, że nie tylko pasuje do widocznego obszaru, ale też wszystkie elementy funkcje i treść w witrynie mogą być użyte w przypadku wszystkich rozmiarów 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ć kolejność treści na o różnych rozmiarach widocznego obszaru. Wszystko to powinno znajdować się w jednym miejscu, innego użytkownika. 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:

Ze względu na specyfikę urządzeń mobilnych zespoły programistów muszą skupiać się na najważniejszych danych i czynnościach w aplikacji. Po prostu na ekran o rozdzielczości 320 x 480 pikseli nie zawiera zbędnych, . Musisz ustalić priorytety.

Jak

Istnieje wiele materiałów na temat projektowania responsywnego, w tym wersja oryginalna artykuł Ethana Marcotte'a, zbiór ważnych koncepcji a także książki i mnóstwo prelekcji. Aby zawęzić stron w kontekście aspektów projektowania responsywnego, odnosi się projektowanie stawiające na treści i układy elastyczne bez treści. Choć zajmujemy się głównie urządzeniami mobilnymi, 7 śmiertelnych mitów na temat reklamy mobilnej (Josh Clark) są równie skuteczne w przypadku małych wyświetleń reklam elastycznych. witryn na urządzenia mobilne.

Gdy użytkownicy są offline, pozostanie 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 połączenia stanu. Aplikacja na danej platformie nigdy nie wyświetla pustej strony, gdy offline, więc aplikacja PWA nigdy nie powinna wyświetlać domyślnej strony offline przeglądarki. Niestandardowe działanie offline, zarówno gdy użytkownik przechodzi do Adres URL, który nie został zbuforowany i gdy użytkownik próbuje użyć funkcji, która wymaga połączenia, pozwala korzystać z internetu jak na którym działa.

Jak

Podczas zdarzenia install skryptu service worker można wstępnie buforować niestandardową stronę offline, która będzie wyświetlana, 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 swoich urządzeniach, zwykle z nich korzystają więcej aplikacji.

Dlaczego

Po zainstalowaniu progresywnej aplikacji internetowej będzie ona wyglądać, działać i działać wszystkich innych zainstalowanych aplikacji. Aplikacja jest uruchamiana w tym samym miejscu, w którym uruchamiają ją użytkownicy. z innych aplikacji. Uruchamia się w osobnym oknie aplikacji, niezależnie od w przeglądarce i pojawi 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 dorównuje zaangażowaniu 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

Postępuj zgodnie z naszym przewodnikiem po instalacji. , by dowiedzieć się, jak umożliwić instalację aplikacji PWA.

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

Dlaczego

Oprócz udostępniania niestandardowej strony offline użytkownicy oczekują, że PWA będzie można używać w trybie offline. Na przykład aplikacje związane z podróżami i liniami lotniczymi powinny zawierać informacje o podróży szczegółowe dane i karty pokładowe są łatwo dostępne w trybie offline. Aplikacje do odtwarzania muzyki, filmów i podcastów powinny umożliwiać odtwarzanie offline. Media społecznościowe aplikacje 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 wrażenia zbliżone do tych, jakie daje aplikacja.

Jak

Gdy ustalisz, które funkcje powinny działać offline, musisz udostępnić swoje treści i dostosować je do trybu offline, kontekstach. Możesz użyć IndexedDB, w systemie pamięci NoSQL w przeglądarce do przechowywania i pobierania danych; synchronizacja w tle aby umożliwić użytkownikom podejmowanie działań w trybie offline i opóźnić komunikację z serwerem dopóki użytkownik nie uzyska stabilnego połączenia. Możesz też skorzystać z usługi do przechowywania innych rodzajów treści, takich jak obrazy, pliki wideo plików audio, do użytku offline oraz implementowania bezpieczne, długotrwałe sesje aby uwierzytelniać 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 pewnym momencie życia chce korzystać z PWA w określony sposób objęte programem WCAG 2.0. związanych z ułatwieniami dostępu. Ludzkie wchodzenie w interakcję że Twoja aplikacja PWA istnieje na różne sposoby, i potrzeby mogą być tymczasowe nie można zmienić. Udostępniając swoją PWA, sprawiasz, że będzie ona przydatna dla wszystkich.

Jak

W3C Wprowadzenie do ułatwień dostępu w internecie to dobry punkt wyjścia. Większość testów dostępności musi być przeprowadzana ręcznie. Narzędzia, takie jak Ułatwienia dostępu audyty w Lighthouse, axe, i statystyki ułatwień dostępu może pomóc w zautomatyzowaniu niektórych testów ułatwień dostępu. Ważne jest też, aby używać elementów poprawnych semantycznie, zamiast je odtwarzać; samodzielnie, np. 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 należy użyć strzałek, a kiedy kart). Karty odżywcze A11Y zawierają to doskonałe wskazówki dotyczące niektórych powszechnych elementów.

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

Dlaczego

Jedną z największych zalet internetu jest to, witryn i aplikacji za pomocą wyszukiwania. 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

Na początek sprawdź, czy każdy adres URL ma unikalny, opisowy tytuł i metaopis. Następnie możesz użyć funkcji Google Search Console i kontroli optymalizacji witryn pod kątem wyszukiwarek (SEO). w Lighthouse. 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. Tak samo co najważniejsze, metody wprowadzania nie powinny zależeć od rozmiaru ekranu, duże widoczne muszą obsługiwać dotyk, a małe – klawiatury i myszy. Jeśli możesz, upewnij się, że Aplikacja i wszystkie jej funkcje obsługują użycie dowolnej metody wprowadzania użytkownika. W odpowiednich przypadkach ulepszaj funkcje, aby umożliwić dla konkretnych danych wejściowych (np. „przeciągnij, aby odświeżyć”).

Jak

Pointer Events API ujednolicony interfejs do pracy z różnymi opcjami wprowadzania; szczególnie dobrze sprawdza się w przypadku dodawania obsługi rysika. Do obsługi obu funkcji i klawiatury, sprawdź, czy używasz prawidłowych elementów semantycznych (kotwice, przyciski, elementy sterujące formularzem itp.) i nie przebudowuj 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 aktywują prośbę o przyznanie uprawnień, na przykład powiadomienia, geolokalizację i dane logowania, są celowo zaprojektowane w taki sposób, aby przeszkadzały użytkownikowi ponieważ są one zwykle powiązane z zaawansowanymi funkcjami, które wymagają zgody na wykorzystanie danych. wywoływanie tych promptów bez dodatkowego kontekstu, np. przy wczytaniu strony, tym większe prawdopodobieństwo, że użytkownicy nie zaakceptują tych uprawnień niezaufać im w przyszłości. Zamiast tego aktywuj te prompty dopiero po upływie podając w kontekście użytkownika uzasadnienie, dlaczego jest ono potrzebne uprawnienia.

Jak

Interfejs uprawnień artykuł i UX Planet Właściwe sposoby zwracania się do użytkowników z prośbą o uprawnienia to dobre zasoby dotyczące projektowania promptów uprawnień, które ale nie skupia się na urządzeniach mobilnych, i stosuj do wszystkich aplikacji 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

Istnieje wiele kontroli o wysokim priorytecie, które zapewniają dobry stan codebase:

• Unikaj używania bibliotek ze znanymi lukami w zabezpieczeniach.
• Sprawdź, czy nie używasz przestarzałych interfejsów API.
• Usuń z bazy kodu niebezpieczne praktyki programistyczne (takie jak używanie document.write() lub niepasywne zdarzenie przewijania słuchaczy),
• 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 pomaga wychwytywać błędy przed wprowadzeniem ich do produkcji.