Pierwsze kroki
Progresywne aplikacje internetowe to wciąż strony internetowe z udoskonalonymi funkcjami i możliwościami. Nie są one powiązane z konkretnym stosem technologicznym i możesz zacząć od zera z nową witryną lub zaktualizować dotychczasową bez modernizacji. Z tego przewodnika dowiesz się, jak utworzyć prawidłową implementację wzorca PWA. Oto kilka strategii na dobry początek:
Pozwól na instalację
Zacznij od małych kroków. To podejście obejmuje rozpoczęcie od podstawowego pliku manifestu, prostej strony offline i skryptu service worker do wyświetlania strony offline oraz buforowania niektórych kluczowych elementów CSS i JavaScriptu. Dzięki kluczowym elementom CSS i pamięci podręcznej JavaScriptu Twoja aplikacja internetowa będzie gotowa do pracy w trybie offline i jednocześnie poprawi jej wydajność.
Wyróżnij funkcję
Wybierz jedną nową funkcję – taką jak powiadomienia push lub obsługa plików – która będzie miała znaczny wpływ na użytkowników lub Twoją firmę. Dzięki temu możesz zacząć korzystać z PWA bez wprowadzania zbyt wielu zmian naraz.
Utwórz prostą wersję
Wykorzystanie istniejącej sekcji aplikacji lub konkretnej ścieżki użytkownika, takiej jak odtwarzanie filmu czy dostęp do karty pokładowej, i zapewnij jej, aby działała ona od początku do końca jako aplikacja PWA działająca w trybie offline – samodzielna lub w kontekście. Umożliwia to eksperyment przy niskich kosztach i pozwala przemyśleć sposób obsługi aplikacji PWA dla użytkowników.
Zacznij od podstaw
Jeśli zmieniasz wygląd swojej witryny lub zaczynasz od zera, ta strategia będzie dla Ciebie odpowiednim wyborem. Ułatwia on wbudowywanie wzorców projektowych PWA niż w przypadku innych strategii, w szczególności umożliwia korzystanie z wszystkich możliwości mechanizmów Service Worker od samego początku.
Uaktualnianie aplikacji sklepu
Dzięki możliwości publikowania aplikacji PWA w sklepach z aplikacjami można dodać ją do programu uruchamiającego PWA i przesłać do sklepu, np. Sklepu Google Play lub Sklepu Windows. Jeśli masz już aplikację na określoną platformę, możesz ją zastąpić aplikacją PWA opublikowaną w sklepie.
Dzięki temu obecni użytkownicy będą mogli uaktualnić aplikację PWA, a nowi użytkownicy będą nadal mogli z niej korzystać i instalować ją z poziomu przeglądarki lub sklepów z aplikacjami. Dostępna jest też jedna aplikacja dla wszystkich, co pozwala zaoszczędzić czas, oszczędzić czas i zwiększyć wygodę użytkowników.
Lista kontrolna PWA
Progresywna aplikacja internetowa to strona internetowa, dlatego pojawia się pytanie: kiedy staje się ona progresywną aplikacją internetową? Odpowiedź nie jest taka prosta, ponieważ koncepcja PWA nie odnosi się do określonej technologii ani stosu. PWA jest tylko wzorcem obejmującym różne elementy techniczne.
Chociaż nie ma unikalnych reguł dla wszystkich przeglądarek, dostępny jest zestaw zaleceń o nazwie Lista kontrolna progresywnej aplikacji internetowej, która pomoże Ci utworzyć progresywną aplikację internetową, którą użytkownicy pokochają.
Podstawowe wymagania
PWA dotyczą wszystkich urządzeń – od urządzeń mobilnych po komputer. Dlatego podstawowa lista kontrolna progresywnej aplikacji internetowej zawiera informacje o tym, co należy zrobić, aby aplikacja była łatwa do zainstalowania i niezawodna dla wszystkich użytkowników, niezależnie od rozmiaru ekranu czy rodzaju danych wejściowych.
Najważniejsze wymagania:
Szybko się uruchamiają i nie zwalniają
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.
Działa w dowolnej przeglądarce
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 z nich. Nie wszystkie przeglądarki muszą jednak działać tak samo. Pewne funkcje mogą nie być obsługiwane przez jedną z przeglądarek, a w celu zapewnienia ich bezproblemowego korzystania z aplikacji zastępczej.
Dostosowana do każdego rozmiaru ekranu
Użytkownicy mogą korzystać z aplikacji PWA na ekranie o dowolnym rozmiarze, a cała treść jest dostępna w dowolnym rozmiarze widocznego obszaru.
Udostępnia niestandardową stronę offline
Gdy użytkownicy są offline, przechowywanie ich w aplikacji PWA zapewnia bardziej płynną obsługę i natywne środowisko niż w przypadku domyślnej strony offline przeglądarki.
Możliwość zainstalowania
Użytkownicy, którzy instalują lub dodają aplikacje na ekranach głównych, częściej z nich korzystają, a po zainstalowaniu aplikacji PWA może ona korzystać z dodatkowych funkcji, aby zapewnić użytkownikom lepsze wrażenia.
Optymalne cechy PWA
Aby stworzyć naprawdę świetną progresywną aplikację internetową, która wygląda jak najlepsza w swojej klasie, potrzebujesz czegoś więcej niż główna lista kontrolna. Optymalna lista kontrolna progresywnej aplikacji internetowej powinna sprawić, że Twoja aplikacja PWA będzie działać sprawnie i niezawodnie, a jednocześnie wykorzystać potencjał stron internetowych.
Możliwość korzystania z trybu offline
Pozwalając użytkownikom na korzystanie z PWA w trybie offline, umożliwiasz im korzystanie z aplikacji. W tym celu wskaż funkcje, które nie wymagają połączenia, tak aby użytkownicy mieli dostęp do niektórych funkcji.
jest w pełni dostępny.
Upewnij się, że wszystkie treści i interakcje w aplikacji są zrozumiałe dla czytników ekranu, do których można używać tylko klawiatury, jest zaznaczone, a kontrast kolorów jest silny. Udostępniając aplikację PWA, masz pewność, że będzie ona przydatna dla wszystkich.
Wykorzystuje zaawansowane funkcje, jeśli są dostępne
Od przesyłania wiadomości push, przez WASM i WebGL po dostęp do systemu plików, selektory kontaktów i integrację ze sklepami z aplikacjami. Dostępne są narzędzia do tworzenia wydajnych i głęboko zintegrowanych aplikacji PWA. Dzięki temu możesz stworzyć w pełni funkcjonalne aplikacje, które wcześniej były zarezerwowane tylko dla aplikacji platformowych, a użytkownicy mogą zabrać je ze sobą w dowolne miejsce.
jest wykrywalna za pomocą wyszukiwania,
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ć Twoją witrynę.
Działa z każdym typem wprowadzania
Użytkownicy powinni mieć możliwość łatwego przełączania się między typami danych wejściowych, a metody wprowadzania nie powinny zależeć od rozmiaru ekranu.
Zapewnia kontekst dla próśb o przyznanie uprawnień
Prośby o uprawnienia, takie jak powiadomienia, geolokalizacja i dane logowania, wywołuj tylko po podaniu uzasadnienia zgodnego z kontekstem, aby zwiększyć szanse na zaakceptowanie promptów przez użytkownika.
postępuje zgodnie ze sprawdzonymi metodami dotyczącymi prawidłowego tworzenia kodu;
Pamiętaj o aktualizowaniu aplikacji i dbaniu o prawidłową bazę kodu, co ułatwia wprowadzanie nowych funkcji, które realizują inne cele wymienione na tej liście kontrolnej.