Redakcja
Czym jest PWA?
Progresywna aplikacja internetowa jest to aplikacja internetowa, która dzięki zastosowanym rozwiązaniom działa prawidłowo niezależnie od urządzenia, przeglądarki czy połączenia internetowego. Aplikacja ta może przypominać aplikację mobilną, ponieważ można ją pobrać na pulpit i działa w trybie offline.
Atrybuty aplikacji PWA
Aby aplikacja mogła być określana jako PWA powinna spełniać szereg atrybutów:
- Bezpieczeństwo - powinna szyfrować dane oraz zapewniać bezpieczeństwo przesyłu informacji.
- Szybkość - ładowanie zawartości strony powinno cechować się dużą szybkością.
- Responsywność - aplikacja powinna prawidłowo działać na różnych rozdzielczościach.
- Wsparcie dla różnych przeglądarek - powinna działać prawidłowo niezależnie od wykorzystywanego oprogramowania.
- Dostępność w trybie offline - funkcje aplikacji powinny być dostępne, gdy nie ma połączenia z siecią internetową.
- Możliwość instalacji - można zapisać aplikację na ekranie głównym urządzenia.
- Otrzymywanie powiadomień typu push – aplikacja powinna umożliwiać generowanie powiadomień typu push.
- Udostępnianie linków – aplikacja powinna umożliwiać udostępnianie linków do swoich podstron.
- Ułatwienia dostępu - zaleca się, aby aplikacja była zgodna z wytycznymi WCAG. Wytyczne te poprawiają dostępność strony m.in. dla osób z niepełnosprawnościami.
- SEO - powinna być prawidłowo zoptymalizowana pod kątem wyszukiwarek.
- Obsługa za pomocą dowolnego wejścia - powinna współpracować z różnymi metodami obsługi typu: mysz, klawiatura, dotyk, rysik.
- Uprawnienia - powinna prosić o uprawnienia tylko w wymagających tego sytuacjach. Taka prośba powinna być uzasadniona i powinna znajdować się w odpowiednim kontekście użycia aplikacji.
- Stosowanie sprawdzonych metod - powinna korzystać ze sprawdzonych metod tworzenia stron internetowych.
Powyższa lista pozwala zweryfikować, w jakim stopniu aplikacja jest zgodna z definicją PWA.
Kluczowymi składowymi progresywnych aplikacji są: service workers oraz manifest.json.
Service workers to narzędzie typu proxy, które nadaje aplikacjom takie funkcjonalności jak: działanie w trybie offline, wysyłanie notyfikacji push czy aktualizacja.
Plik manifest.json zawiera niezbędne informacje dotyczące możliwości uruchomienia aplikacji na pulpicie urządzenia. Plik ten może zawierać takie elementy jak: nazwa aplikacji, adres URL czy dane ikon.
Narzędzia do testów
Na rynku istnieją narzędzia, dzięki którym w automatyczny sposób jesteśmy w stanie zweryfikować poziom zgodności aplikacji z atrybutami PWA.
Jednym z najpopularniejszych i najłatwiej dostępnych narzędzi jest Lighthouse. Jest on dostępny z poziomu DevTools w przeglądarce Chrome.
Aby go uruchomić należy:
- Otworzyć DevToolsy (F12).
- Przejść do zakładki Lighthouse.
- Zaznaczyć odpowiednią kategorię.
- Wskazać urządzenie.
- Użyć przycisku "Wygeneruj raport".
Przykład dla strony twitter.com:
Strona twitter.com jest świetnym przykładem aplikacji spełniającej wymagania PWA. Poniżej wyniki analizy przeprowadzone narzędziem Lighthouse:
Jak widzimy wszystkie elementy możliwe do sprawdzenia zostały spełnione. Dodatkowo narzędzie zwróciło informację, że należy manualnie sprawdzić:
- czy witryna działa w różnych przeglądarkach,
- czy aplikacja działa szybko, niezależnie od połączenia internetowego,
- czy każda strona ma swój unikalny adres URL.
Za pomocą Lighthouse możemy sprawdzić również inne właściwości aplikacji, przydatne przy testach PWA, takie jak:
- wydajność,
- sprawdzone metody,
- ułatwienia dostępu,
- SEO.
Robi się to analogicznie jak powyższe testy, wybierając odpowiednią kategorię w opcjach.
Innym narzędziem przydatnymi do testów jest PWA builder znajdujący się na stronie https://www.pwabuilder.com/
Na stronie głównej podajemy adres strony, którą chcemy poddać analizie, po czym otrzymujemy wyniki:
Ostatnie narzędzie, które zaprezentujemy to PWA Testing Tool. Jest ono dostępne pod adresem https://www.seoreviewtools.com/pwa-testing-tool/.
Podobnie jak w poprzednim narzędziu wystarczy podać adres domeny i analiza zostanie wykonana.
Korzyści
Stosowanie PWA może mieć pozytywny wpływ na wartość biznesową aplikacji. W sieci możemy znaleźć przykłady różnych korzyści, które pojawiły się po przystosowaniu strony do standardów PWA, np.:
- większe zaangażowanie użytkowników,
- większa konwersja,
- zwiększone przychody z reklam,
- znaczne zmniejszenie rozmiaru aplikacji.
Podsumowanie
Tester ma do dyspozycji wiele narzędzi, które są dedykowane do weryfikacji stopnia zgodności aplikacji ze standardami PWA. Nie pozwalają one jednak na weryfikację wszystkich wytycznych. Część atrybutów należy zweryfikować manualnie lub wspomagając się narzędziami używanymi w innych rodzajach testów. Warto wykonać tego typu testy, ponieważ nawet pobieżna analiza, w oparciu o narzędzia, takie jak Lighthouse, da nam wiedzę na temat zgodności testowanej aplikacji z wytycznymi PWA.
