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 się skupiać 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 zmienia się z 1 do 10 sekund, prawdopodobieństwo tego, że użytkownik zostanie odrzucone, wzrasta o 123%. Wydajność 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łą wygodę korzystania z aplikacji – od tego, jak użytkownicy postrzegają aplikację, po jej rzeczywistą wydajność.
Chociaż wszystkie aplikacje mają różne potrzeby, audyty wydajności w Lighthouse opierają się na podstawowych wskaźnikach internetowych. 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ę, co zrobić, aby Twoja aplikacja 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.
Dlaczego
Progresywne aplikacje internetowe to przede wszystkim aplikacje internetowe, a to oznacza, że muszą one działać w różnych przeglądarkach, a nie tylko w jednej z nich.
Jak mówią Jeremy Keith w Resilient Web Design, skuteczny sposób to określenie głównej funkcjonalności, udostępnienie tej funkcji za pomocą najprostszej technologii i poprawa wrażeń 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ą języków CSS i JavaScript, co zwiększy ich atrakcyjność.
Weźmy na przykład przesłanie formularza. Najprostszym sposobem implementacji jest użycie formularza HTML, który przesyła żądanie POST. Po zdobyciu tych umiejętności możesz ulepszyć obsługę JavaScriptu w celu weryfikacji formularza i przesłać go za pomocą technologii AJAX, co ułatwi jego obsługę użytkownikom.
Pamiętaj, że użytkownicy mogą wyświetlać Twoją witrynę na różnych urządzeniach i w różnych przeglądarkach. Nie można kierować reklam na górny koniec spektrum. Wykorzystując wykrywanie funkcji, możesz zapewnić przydatne funkcje jak największej liczbie potencjalnych użytkowników, również 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 metodzie obejmującej różne przeglądarki.
Materiały dodatkowe
- Dobrym wstępem do tego tematu jest materiał z serwisu Zrozumienie progresywnego ulepszania przygotowany przez zespół List Apart.
- Artykuł Progressive Ulepszenia: Co to jest, i jak z niego korzystać? na kanale Smashing Magazine zawiera praktyczne wprowadzenie i linki do bardziej zaawansowanych tematów.
- W MDN znajdziesz artykuł Implementowanie wykrywania funkcji, w którym omówiono, jak wykryć funkcję za pomocą bezpośredniego zapytania.
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.
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 tak ważne jest, aby zawartość witryny nie tylko mieściła się w widocznym obszarze, ale też aby wszystkie jej funkcje i treści można było używać we wszystkich rozmiarach widocznego obszaru.
Zadania, które użytkownicy chcą wykonać, i treści, do których chcą mieć dostęp, nie zależą od rozmiaru widocznego obszaru. Zawartość widocznego obszaru można zmieniać według rozmiaru, tak by wszystkie elementy były łatwo dostępne. Jak stwierdził Łukasz Wroblewski w swojej książce „Mobile First”: rozpoczęcie działalności od małych kroków i wprowadzanie dużych zmian, a nie na odwrót, może poprawić wygląd witryny:
W przypadku urządzeń mobilnych zespoły programistów muszą skupiać się tylko na najważniejszych danych i działaniach w aplikacji. Na ekranie o rozdzielczości 320 x 480 pikseli nie ma miejsca na zbędne elementy. Trzeba określić priorytety.
Jak
Istnieje wiele materiałów na temat projektowania responsywnego, w tym oryginalny artykuł Ethana Marcotte'a, zbiór ważnych koncepcji, a także książki i dyskusje. Aby zawęzić tę 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ą treści. 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.
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 jest zapisany w pamięci podręcznej, jak i gdy próbuje użyć funkcji wymagającej połączenia, dzięki temu 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ć, używając spersonalizowanej strony offline zapisanej w pamięci podręcznej. Możesz skorzystać z naszej niestandardowej przykładowej 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ą.
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, niezależnie od przeglądarki i pojawia się na liście zadań, tak jak inne aplikacje.
Dlaczego użytkownicy mają instalować Twoją aplikację PWA? Z tego samego powodu zależy nam, aby użytkownik instalował aplikację ze sklepu. Użytkownicy, którzy instalują Twoje aplikacje, to najbardziej zaangażowani odbiorcy i mają wyższe dane o zaangażowaniu 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 po instalacji dowiesz się, jak umożliwić instalację aplikacji PWA i 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 progresywnej aplikacji internetowej powinna sprawić, że aplikacja PWA będzie działać jak część urządzenia, na którym działa, a jednocześnie wykorzystać to, co sprawia, że internet jest pełen możliwości.
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.
Dlaczego
Użytkownicy oczekują nie tylko niestandardowej strony offline, ale też progresywnych aplikacji internetowych, których można używać offline. Na przykład aplikacje turystyczne i lotnicze powinny udostępniać szczegóły podróży i karty pokładowe także w trybie offline. Aplikacje muzyczne, wideo i podcasty powinny umożliwiać odtwarzanie offline. Aplikacje społecznościowe i wiadomości powinny buforować najnowsze treści, aby użytkownicy mogli je czytać offline. Użytkownicy oczekują możliwości uwierzytelnienia w trybie offline, dlatego projektuj pod kątem uwierzytelniania offline. PWA offline zapewnia użytkownikom prawdziwe środowisko aplikacji.
Jak
Gdy określisz, które funkcje Twoi użytkownicy spodziewają się pracy offline, musisz udostępnić swoje treści i dostosować je do kontekstu offline. Dodatkowo możesz używać IndexedDB, czyli systemu pamięci NoSQL w przeglądarce, do przechowywania i pobierania danych, a także synchronizacji w tle, która umożliwia użytkownikom wykonywanie działań w trybie offline i opóźnia komunikacji z serwerem do czasu, gdy użytkownik odzyska stabilne połączenie. Skrypty service worker mogą też służyć do przechowywania innych rodzajów treści, np. obrazów, plików wideo i audio, do użytku w trybie offline. Z perspektywy użytkownika można wykorzystać szkieletowe ekrany, które dają użytkownikom poczucie szybkości i treści podczas wczytywania, 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.
Dlaczego
Większość osób w którymś momencie będzie chciała skorzystać z Twojej aplikacji PWA zgodnie z wymaganiami dotyczącymi ułatwień dostępu WCAG 2.0. Interakcja użytkowników z PWA i ich zrozumienie istnieją w szerokim spektrum, a potrzeby mogą być tymczasowe lub stałe. Udostępniając aplikację PWA, masz pewność, że będzie ona przydatna dla wszystkich.
Jak
Na początek opublikowany przez W3C przewodnik Introduction to Web Accessibility (Wprowadzenie do ułatwień dostępu w internecie). Większość testów
ułatwień dostępu trzeba wykonać ręcznie. Narzędzia takie jak kontrole 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 pod względem semantycznym, zamiast odtwarzać 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ą świetne porady na temat niektórych typowych elementów.
Można je znaleźć przez wyszukiwanie
Twoją aplikację PWA można wykryć w wyszukiwarce.
Dlaczego
Jedną z największych zalet internetu jest możliwość odkrywania witryn i aplikacji za pomocą wyszukiwarki. Jak się okazuje, ponad połowa całego ruchu w witrynie pochodzi z bezpłatnych wyników wyszukiwania. Aby użytkownicy mogli znaleźć Twoją aplikację PWA, musisz sprawdzić, czy 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ł niepowtarzalny, opisowy tytuł i metaopis. Następnie możesz skorzystać z Google Search Console i audytów 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. Możesz także umieścić w PWA uporządkowane dane, korzystając ze 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.
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 obszary – klawiatury i myszy. Postaraj się, aby Twoja aplikacja i wszystkie jej funkcje obsługiwały dowolną metodę wprowadzania tekstu, z której może korzystać użytkownik. W razie potrzeby ulepszaj też sposoby działania, 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 odpowiednich elementów semantycznych (kotwic, przycisków, elementów sterujących formularza itp.) i nie przebudowuj ich za pomocą niesemantycznej 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.
Dlaczego
Interfejsy API, które aktywują prośbę o przyznanie uprawnień, np. powiadomienia, geolokalizacja czy dane logowania, zostały celowo zaprojektowane w taki sposób, aby przeszkadzały użytkownikowi, ponieważ zwykle są zwią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 zwiększą zaufanie do nich w przyszłości. Zamiast tego aktywuj te prośby tylko po podaniu użytkownikowi zgodnego z kontekstem uzasadnienia, dlaczego potrzebujesz tych uprawnień.
Jak
Artykuł Uprawnienia i opracowanie na stronie UX Planet Właściwe sposoby uzyskiwania od użytkowników uprawnień to dobre materiały, z których dowiesz się, jak projektować prompty dotyczące uprawnień, które chociaż są przeznaczone na urządzenia mobilne, mają 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.
Dlaczego
Stworzenie nowoczesnej aplikacji internetowej wymaga wielkich nakładów pracy. Dbanie o aktualność aplikacji i prawidłowy stan bazy kodu ułatwia udostępnianie nowych funkcji, które realizują inne cele wymienione na tej liście kontrolnej.
Jak
Przeprowadzamy szereg kontroli o wysokim priorytecie, aby zapewnić sprawne działanie bazy kodu: unikając używania bibliotek ze znanymi lukami w zabezpieczeniach, nie używaj wycofanych interfejsów API, nie usuwamy z bazy kodu internetowych wzorców antywzorców (np. używając document.write() lub niepasywnych detektorów zdarzeń przewijania), a nawet kodując defensywnie, aby Twoja aplikacja PWA nie ulegała awarii w przypadku problemów z załadowaniem analityki lub innych bibliotek innych firm. Rozważ wprowadzenie statycznej analizy kodu, takiej jak lintowanie, a także automatyczne testowanie w wielu przeglądarkach i kanałach wersji. Pomagają one wychwytywać błędy
przed ich wprowadzeniem do produkcji.