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.
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.
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
- Dobrym wstępem do tego tematu jest materiał z serii Apartament na temat rozumienia progresywnego ulepszania.
- Postępowe udoskonalanie kanału Smashing Magazine: co to jest i jak z niego korzystać? zawiera praktyczne wprowadzenie i linki do bardziej zaawansowanych tematów.
- W MDN znajdziesz artykuł o implementowaniu wykrywania funkcji, w którym omówiono, jak wykryć funkcję za pomocą bezpośredniego zapytania.
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.
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.
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.
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.
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.
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.
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.
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.
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.