Progresywne aplikacje internetowe (PWA) są tworzone i ulepszane za pomocą nowoczesnych interfejsów API, aby zapewnić większą funkcjonalność, niezawodność i możliwość instalacji, a także dostępność dla każdej osoby, w dowolnym miejscu i na dowolnym urządzeniu przy użyciu jednej bazy kodu. Aby zapewnić użytkownikom jak najlepsze wrażenia, skorzystaj z list kontrolnych i rekomendacji podstawowych oraz optymalnych.
Lista kontrolna podstawowej progresywnej aplikacji internetowej
Lista kontrolna progresywnej aplikacji internetowej zawiera informacje o tym, co sprawia, że aplikacja może być instalowana i używana przez wszystkich użytkowników niezależnie od rozmiaru lub typu danych wejściowych.
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.
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ą. Optymalną listą kontrolną PWA jest podczas pobierania aplikacji PWA sprawia wrażenie, że jest częścią urządzenia, nad tym, co sprawia, że internet jest potężny.
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.