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

Progresywne aplikacje internetowe (PWA) opracowano i udoskonaliliśmy za pomocą nowoczesnych interfejsów API, co zapewnia większe możliwości, niezawodność i możliwość instalacji, a jednocześnie pozwalają docierać do każdego użytkownika w dowolnym miejscu i na dowolnym urządzeniu przy użyciu jednej bazy kodu. Aby zapewnić Ci jak najlepsze wrażenia, korzystaj z podstawowych i optymalnych list kontrolnych i rekomendacji.

Podstawowa lista kontrolna progresywnej aplikacji internetowej

Lista kontrolna progresywnej aplikacji internetowej zawiera informacje o tym, co sprawia, że z aplikacji mogą korzystać wszyscy użytkownicy, niezależnie od rozmiaru i rodzaju danych wejściowych.

Szybko się uruchamiają i nie zwalniają
Skuteczność odgrywa ważną rolę w sukcesie każdego reklamodawcy online, ponieważ skuteczne witryny angażują użytkowników i utrzymują ich uwagę w porównaniu z witrynami o niskiej skuteczności. Witryny powinny koncentrować się na optymalizacji pod kątem danych dotyczących skuteczności nastawionych na użytkownika.

Skuteczność odgrywa ważną rolę w sukcesie każdego użytkownika online, ponieważ strony o wysokiej skuteczności angażują użytkowników i utrzymują ich uwagę w porównaniu z witrynami o niskiej skuteczności. Witryny powinny koncentrować się na optymalizacji pod kątem danych dotyczących skuteczności nastawionych na użytkownika.

Dlaczego

Szybkość ma kluczowe znaczenie dla zachęcania użytkowników do korzystania z aplikacji. Gdy czas wczytywania strony rośnie z 1 sekundy do 10 sekund, prawdopodobieństwo tego, że użytkownik ją zrezygnuje, zwiększa się o 123%. Działanie nie kończy się na zdarzeniu load. Użytkownicy nigdy 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 cały proces – od tego, jak użytkownicy postrzegają Twoją aplikację, po rzeczywistą wydajność.

Chociaż wszystkie aplikacje mają różne potrzeby, audyty wydajności w Lighthouse opierają się na podstawowych wskaźnikach internetowych, a wysoki wynik w tych audytach zwiększa prawdopodobieństwo satysfakcji użytkowników. Możesz też skorzystać z PageSpeed Insights lub Raportu na temat użytkowania Chrome, aby uzyskać rzeczywiste dane o skuteczności swojej aplikacji internetowej.

Jak

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

Działa w dowolnej przeglądarce
Użytkownicy mogą korzystać z Twojej aplikacji internetowej przed jej zainstalowaniem w dowolnej przeglądarce.

Użytkownicy mogą korzystać z aplikacji internetowej przed jej zainstalowaniem w dowolnej przeglądarce.

Dlaczego

Progresywne aplikacje internetowe to przede wszystkim aplikacje internetowe, co oznacza, że muszą one działać w różnych przeglądarkach, a nie tylko w jednej.

Jak wynika z opinii Jeremy'ego Keitha w Resilient Web Design, najlepiej jest to osiągnąć, identyfikując główną funkcję, udostępniając ją przy użyciu najprostszej technologii i poprawiając wrażenia użytkowników w miarę możliwości. W wielu przypadkach oznacza to rozpoczęcie od samego języka HTML i utworzenie głównej funkcji, a następnie polepszenie wrażeń użytkownika za pomocą CSS i JavaScriptu, co zwiększy zaangażowanie użytkowników.

Weźmy na przykład przesłanie formularza. Najprostszym sposobem implementacji jest użycie formularza HTML, który przesyła żądanie POST. Po utworzeniu formularza możesz ulepszyć działanie JavaScriptu do weryfikacji formularzy i przesłać go za pomocą technologii AJAX, co zwiększy wygodę użytkowników, którzy go obsługują.

Pamiętaj, że użytkownicy mogą wyświetlać Twoją witrynę w różnych przeglądarkach i na różnych urządzeniach. Nie można po prostu dążyć do najwyższej grupy odbiorców. Wykorzystując wykrywanie funkcji, możesz zapewnić przydatne funkcje jak największej liczbie potencjalnych użytkowników, także tych korzystających z przeglądarek i urządzeń, których obecnie nie ma.

Jak

Artykuł Resilient Web Design, przygotowany przez Jeremy'ego Keitha, jest świetnym źródłem wiedzy na temat projektowania stron internetowych w tej progresywnej metodologii, która działa w różnych przeglądarkach.

Materiały dodatkowe

Dostosowana do każdego rozmiaru ekranu
Użytkownicy mogą korzystać z PWA na ekranie o dowolnym rozmiarze, a cała zawartość jest dostępna w dowolnym rozmiarze widocznego obszaru.

Użytkownicy mogą korzystać z PWA na ekranie o dowolnym rozmiarze, a cała zawartość jest dostępna w dowolnym rozmiarze widocznego obszaru.

Dlaczego

Urządzenia są różnych rozmiarów, a użytkownicy mogą korzystać z aplikacji w różnych rozmiarach, nawet na tym samym urządzeniu. Dlatego ważne jest, aby zawartość witryny nie tylko mieściła się w widocznym obszarze, ale też aby wszystkie funkcje i treści dostępne w witrynie były przydatne niezależnie od rozmiaru widocznego obszaru.

Zadania, które użytkownicy chcą wykonywać, oraz treści, do których mają dostęp, nie zależą od rozmiaru widocznego obszaru. Zawartość widocznego obszaru możesz zmieniać według rozmiaru ekranu. Wszystkie elementy powinny się tam znaleźć w taki czy inny sposób. Jak pisze Luke Wroblewski w swojej książce „Mobile First”, rozpoczęcie działalności od małych kroków i rozwijanie działalności na odwrót może poprawić wygląd witryny:

> W przypadku urządzeń mobilnych zespoły zajmujące się tworzeniem oprogramowania muszą skupić się tylko na > najważniejszych danych i działaniach w aplikacji. Na ekranie o rozdzielczości 320 x 480 pikseli po prostu nie ma miejsca na zbędne elementy. Trzeba określić priorytety.

Jak

Dostępnych jest wiele materiałów na temat projektowania responsywnego, w tym oryginalny artykuł Ethana Marcotte'a, zbiór ważnych koncepcji, a także mnóstwo książek i omawianych rozmów. Aby zawęzić dyskusję do aspektów związanych z treścią projektowania elastycznego, możesz się przyjrzeć projektowaniu ukierunkowanym na treść i układom elastycznym z zawartością strony. Lekcje z serii Seven Deadly Mobile Myths autorstwa Josha Clarka dotyczą głównie urządzeń mobilnych, ale równie dobrze sprawdzają się w przypadku niewielkich widoków elastycznych witryn, jak i mobilnych.

Udostępnia niestandardową stronę offline
Gdy użytkownicy są offline, przechowywanie ich w aplikacji PWA zapewnia wygodniejsze korzystanie z nich niż powrót do domyślnej strony offline w przeglądarce.

Gdy użytkownicy są offline, przechowywanie ich w aplikacji PWA zapewnia wygodniejszą obsługę niż wracanie do domyślnej strony offline przeglądarki.

Dlaczego

Użytkownicy oczekują, że zainstalowane aplikacje będą działać niezależnie od stanu połączenia. Aplikacja na danej platformie nigdy nie wyświetla pustej strony, gdy jest offline, a progresywna aplikacja internetowa nigdy nie powinna wyświetlać domyślnej strony offline przeglądarki. Dzięki niestandardowym działaniu trybu offline – zarówno wtedy, gdy użytkownik otwiera adres URL, który nie został zapisany w pamięci podręcznej, jak i gdy próbuje użyć funkcji wymagającej połączenia, możesz czuć, jakby działanie było częścią urządzenia, na którym działa.

Jak

Podczas zdarzenia install skryptu service worker możesz zapisać niestandardową stronę offline w pamięci podręcznej do późniejszego użycia. Jeśli użytkownik przejdzie w tryb offline, możesz odpowiedzieć, wysyłając niestandardową stronę offline w pamięci podręcznej. Skorzystaj z naszej niestandardowej próbki strony offline, aby zobaczyć przykład działania i dowiedzieć się, jak wdrożyć go samodzielnie.

Możliwość zainstalowania
Użytkownicy, którzy instalują lub dodają aplikacje na swoim urządzeniu, zwykle z nich korzystają.

Użytkownicy, którzy instalują lub dodają aplikacje na swoich urządzeniach, częściej z nich korzystają.

Dlaczego

Zainstalowanie progresywnej aplikacji internetowej sprawia, że może ona wyglądać i działać tak samo jak wszystkie inne zainstalowane aplikacje. Uruchamia się w tym samym miejscu, w którym użytkownicy uruchamiają swoje inne aplikacje. Działa w osobnym oknie aplikacji (innym niż przeglądarka) i pojawia się na liście zadań, tak jak inne aplikacje.

Dlaczego użytkownicy mają instalować Twoją aplikację PWA? Z tego samego powodu warto, aby użytkownik instalował aplikację ze sklepu z aplikacjami. Użytkownicy, którzy instalują Twoje aplikacje, to najbardziej zaangażowani odbiorcy i mają wyższe wskaźniki zaangażowania niż typowi użytkownicy, często na równi z użytkownikami aplikacji na urządzeniach mobilnych. Te dane to m.in. więcej ponownych wizyt, dłuższe spędzanie czasu w witrynie i wyższe współczynniki konwersji.

Jak

Z naszego przewodnika do instalacji dowiesz się, jak udostępnić aplikację PWA do zainstalowania, jak sprawdzić, czy można ją zainstalować, i spróbuj zrobić to samodzielnie.

Optymalna progresywna aplikacja internetowa – lista kontrolna

Aby stworzyć naprawdę świetną progresywną aplikację internetową, która wygląda jak najlepsza w swojej klasie aplikacja, potrzebujesz czegoś więcej niż tylko podstawowej listy kontrolnej. Optymalna lista kontrolna progresywnych aplikacji internetowych ma sprawić, że aplikacja PWA będzie działać tak, jakby była częścią urządzenia, na którym działa, a jednocześnie wykorzystać wszystkie zalety internetu.

Możliwość korzystania z trybu offline
Gdy połączenie nie jest bezwzględnie wymagane, aplikacja działa tak samo zarówno offline, jak i online.

Gdy połączenie nie jest bezwzględnie wymagane, aplikacja działa tak samo zarówno offline, jak i online.

Dlaczego

Użytkownicy oczekują nie tylko niestandardowej strony offline, ale też progresywnych aplikacji internetowych, których można używać w trybie offline. Na przykład aplikacje turystyczne i lotnicze powinny mieć łatwy dostęp do szczegółów podróży i kart pokładowych także offline. Aplikacje muzyczne, wideo i podcasty powinny umożliwiać odtwarzanie offline. Aplikacje społecznościowe i aplikacje z wiadomościami powinny buforować najnowsze treści, aby użytkownicy mogli je czytać offline. Użytkownicy oczekują też uwierzytelniania w trybie offline, dlatego projektuj pod kątem uwierzytelniania offline. PWA offline zapewnia użytkownikom realistyczne środowisko.

Jak

Gdy określisz, które funkcje użytkownicy spodziewają się pracy offline, musisz udostępnić swoje treści i dostosować je do kontekstu offline. Możesz też używać IndexedDB, systemu pamięci NoSQL w przeglądarce, do przechowywania i pobierania danych, a także synchronizacji w tle, która pozwala użytkownikom na wykonywanie działań w trybie offline i odraczanie komunikacji z serwerem do momentu ponownego uzyskania stabilnego połączenia przez użytkownika. Skrypty service worker mogą też służyć do przechowywania innych rodzajów treści, takich jak obrazy, pliki wideo i pliki audio, do użytku w trybie offline, a także do wdrażania bezpiecznych, długotrwałych sesji w celu uwierzytelniania użytkowników. Z perspektywy użytkownika można zastosować szkieletowe ekrany, które podczas wczytywania pokazują użytkownikom szybkość i treści, a w razie potrzeby mogą wrócić do treści w pamięci podręcznej lub wskaźnika offline.

jest w pełni dostępny.
Wszystkie interakcje użytkowników spełniają wymagania WCAG 2.0 dotyczące ułatwień dostępu.

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

Dlaczego

Większość osób w którymś momencie będzie chciała korzystać z Twojej aplikacji PWA zgodnie z wymaganiami dotyczącymi ułatwień dostępu WCAG 2.0. Zdolność ludzi do interakcji z Twoją aplikacją PWA i jej rozumienia jest ograniczona, a potrzeby mogą być tymczasowe lub stałe. Udostępniając aplikację PWA, zyskujesz pewność, że będzie ona przydatna dla wszystkich.

Jak

Na początek zapoznaj się z publikacją W3C pt. Introduction to Web Accessibility (Wprowadzenie do ułatwień dostępu w internecie). Większość testów ułatwień dostępu trzeba przeprowadzać ręcznie. Narzędzia takie jak audyty ułatwień dostępu w Lighthouse, axe i Accessibility Insights pomogą 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. a i button. Dzięki temu, gdy zajdzie potrzeba utworzenia bardziej zaawansowanych funkcji, zostaną spełnione oczekiwania dotyczące ułatwień dostępu (np. kiedy należy używać strzałek, a kiedy kart). Karty żywieniowe A11Y zawierają doskonałe porady na ten temat dotyczące niektórych często używanych komponentów.

Można je znaleźć przez wyszukiwanie
PWA można łatwo znaleźć w wyszukiwarce.

PWA można łatwo znaleźć w wyszukiwarce.

Dlaczego

Jedną z największych zalet internetu jest możliwość odkrywania witryn i aplikacji za pomocą wyszukiwarki. Ponad połowa całego ruchu w witrynie pochodzi z bezpłatnych wyników wyszukiwania. Aby użytkownicy mogli znaleźć Twoją aplikację PWA, musisz upewnić się, że istnieją kanoniczne adresy URL dla treści i czy wyszukiwarki mogą indeksować witrynę. Dotyczy to zwłaszcza renderowania po stronie klienta.

Jak

Najpierw zadbaj o to, aby każdy adres URL miał unikalny, opisowy tytuł i metaopis. Następnie możesz skorzystać z Google Search Console i kontroli optymalizacji witryn pod kątem wyszukiwarek (SEO) w Lighthouse, aby debugować i rozwiązywać problemy z wykrywalnością aplikacji PWA. Możesz też użyć narzędzi dla webmasterów dostępnych w usługach Bing lub Yandex i uwzględnić w swojej aplikacji PWA uporządkowane dane za pomocą schematów ze Schema.org.

Działa z każdym typem wprowadzania
Z PWA można w takim samym stopniu korzystać z myszy, klawiatury, rysika i ekranu dotykowego.

Z PWA można w takim samym stopniu korzystać z myszy, klawiatury, rysika i ekranu dotykowego.

Dlaczego

Urządzenia udostępniają różne metody wprowadzania, a użytkownicy powinni mieć możliwość łatwego przełączania się między nimi podczas korzystania z aplikacji. Co ważne, metody wprowadzania nie powinny zależeć od rozmiaru ekranu, co oznacza, że duże obszary muszą obsługiwać dotyk, a małe widoczne obszary muszą obsługiwać klawiatury i myszy. Postaraj się, aby Twoja aplikacja i wszystkie jej funkcje obsługiwały dowolne metody wprowadzania, których może użyć użytkownik. W razie potrzeby warto też ulepszać doświadczenia, aby umożliwić korzystanie z elementów sterujących zależnych od danych wejściowych (np. przez przeciąganie, aby odświeżyć).

Jak

Interfejs Pointer Event API zapewnia ujednolicony interfejs do pracy z różnymi opcjami wprowadzania. Jest szczególnie przydatny, jeśli chodzi o obsługę rysika. Jeśli chcesz obsługiwać zarówno dotyk, jak i klawiaturę, użyj prawidłowych elementów semantycznych (kotwic, przycisków, elementów sterujących formularza itp.) i nie twórz ich ponownie za pomocą niesemantycznego kodu HTML (co jest dobre w przypadku ułatwień dostępu). Jeśli uwzględnisz interakcje, które aktywują się po najechaniu kursorem, upewnij się, że mogą się też aktywować po kliknięciu.

Zapewnia kontekst dla próśb o przyznanie uprawnień
Prosząc o zgodę na korzystanie z zaawansowanych interfejsów API, podaj kontekst i pytaj tylko wtedy, gdy ten interfejs API jest potrzebny.

Prosząc o zgodę na korzystanie z zaawansowanych interfejsów API, podaj kontekst i pytaj tylko wtedy, gdy ten interfejs API jest potrzebny.

Dlaczego

Interfejsy API, które aktywują prośbę o przyznanie uprawnień, takie jak powiadomienia, geolokalizacja czy dane logowania, zostały celowo zaprojektowane w taki sposób, aby przeszkadzały użytkownikowi, ponieważ zazwyczaj są powiązane z zaawansowanymi funkcjami, które wymagają zgody. Aktywowanie tych próśb bez dodatkowego kontekstu, np. podczas wczytywania strony, zmniejsza prawdopodobieństwo, że użytkownicy zaakceptują te uprawnienia, i w przyszłości bardziej budzą zaufanie do nich. Zamiast tego aktywuj te prośby tylko po podaniu użytkownikowi zgodnego z kontekstem uzasadnienia, dlaczego potrzebujesz tych uprawnień.

Jak

Artykuł na temat UX i artykułu Właściwe sposoby proszenia użytkowników o uprawnienia w witrynie UX Planet to dobre materiały, z których dowiesz się, jak projektować prośby o uprawnienia, które choćby były dostosowane do urządzeń mobilnych, miały zastosowanie do wszystkich aplikacji PWA.

postępuje zgodnie ze sprawdzonymi metodami dotyczącymi prawidłowego tworzenia kodu;
Dbanie o zdrowie bazy kodu ułatwia osiąganie celów i udostępnianie nowych funkcji.

Dbanie o dobry stan bazy kodu ułatwia osiąganie celów i udostępnianie nowych funkcji.

Dlaczego

Stworzenie nowoczesnej aplikacji internetowej wymaga wielkich nakładów pracy. Aktualizowanie aplikacji i utrzymywanie bazy kodu w dobrym stanie ułatwia udostępnianie nowych funkcji, które spełniają inne cele wymienione na tej liście kontrolnej.

Jak

Przeprowadzamy szereg procesów o wysokim priorytecie, aby zapewnić sprawne działanie bazy kodu: należy unikać używania bibliotek ze znanymi lukami w zabezpieczeniach, nie używać wycofanych interfejsów API, usuwać z bazy kodu internetowych wzorców antywzorców (np. używać interfejsu document.write() lub niepasywnych detektorów zdarzeń przewijania), a nawet kodować defensywnie tak, aby usługa PWA nie przestała działać, jeśli statystyki lub inne biblioteki innych firm nie załadują się. Rozważ wprowadzenie statycznej analizy kodu, takiej jak lintowanie, a także automatyczne testowanie w wielu przeglądarkach i kanałach wersji. Te techniki pomagają wychwytywać błędy przed ich wprowadzeniem do produkcji.