Co to jest PWA i dlaczego powinieneś się przejmować?

PWA (Progressive Web Aplication) to technologia pozwalająca na wykorzystanie posiadanego portalu webowego jako aplikacji. Jest to stosunkowo nowe technologia, a częstym problemem nowych technologii jest ryzyko związane z zastosowaniem ich w praktyce i biznesie. Nowe i wychwalane rzeczy są ciekawe. Nie jest to jednak wystarczający powód, by stosować daną technologię w biznesie . Na szczęście PWA ma zdecydowanie więcej do zaoferowania. To co lubię na temat tej technologii to brak konieczności stosowania AppStore, Google Play oraz opłacania ich prowizji. Oznacza to koniec z uciążliwym procesem aktualizacji oraz utrzymania aplikacji zgodnie z zasadami tych sklepów. Korzystając z PWA użytkownicy instalują Twoją aplikację przy użyciu specjalnego linku albo pod czas wizyty na stronie. Nic prostrzego. Aplikacja nie zostanie odrzucona, nie przechodzi przez wewnętrzne procesy dostawców – wprowadzanie zmian nie różni się prawie od zwykłego zbudowania aplikacji. Dzięki temu, że PWA to responsywne rozwiązanie – raz napisany kod będzie skalowalny i świetnie dopasowany do każdego ekranu. W pewnym sensie korzystając z PWA zmniejszamy ryzyko i zagrożenia podczas tworzenia aplikacji Webowych.

Google wyjaśnia, że na PWA (Progressive Web App) składa się kilka podstawowych konceptów.

1. PWA powinno być niezależne – różne prędkości internetu nie powinny powodować błędów
2. Powinno być szybkie – zdjęcia i zawartość powinny być „lazy-loaded” , czyli załadowane wraz z przewinięciem do miejsca ich występowania na stronie oraz przechowywane w pamięci urządzenia.
3. PWA powinno być “angażujące”. Mam tu na myśli fakt, iż powinno się zachowywać jak natywna aplikacja mobilna. Co przede wszystkim oznacza możliwość zainstalowania na ekranie telefonu, czy tabletu.
4. I na koniec PWA, jak sama nazwa wskazuje, powinno być progresywne → adoptować się do nowych funkcjonalności jak są dostępne i dalej działać prawidłowo, gdy nie są wspierane.

Google Lighthouse

Google dostarcza zautomatyzowane narzędzie, dzięki któremu istnieje możliwość zbadania aplikacji i upewnienia się, że jej zawartość spełnia wspomniane wyżej podpunkty. Narzędzie to ocenia aplikację w skali od 0 do 100 i informuje, co należy zmienić, aby ten wynik poprawić.Do tych czynności może należeć:

1. dostarczane treści poprzez HTTPS
2. poprawa czasu ładowania strony
3. dodanie manifestu i innych plików wymaganych do zainstanowania aplikacji.

Gdzie szukać przykładów?

Budowanie swojego PWA wymaga zapoznanie się z przykładami i poznanie najlepszych produktów tego typu na rynku. Myśląc tymi kategoriami należy przytoczyć takie przykłady jak Instagram, Facebook, Uber, Starbucks oraz duże sklepy internetowe jak Mohito, czy portale – Olx, Onet, albo Google Maps. Przykładów jest dużo, a co za tym idzie, inspiracji, wzorów i protoplastów również nie brakuje.

Ale dlaczego PWA?

Nie prowadzę dużej firmy, nie potrzebuję portalu jak Starbucks, czy Instagram. Tworzę strony internetowe dla klientów. Strony, które mają być wyjątkowe i profesjonalne. Niekiedy jednak klienci pragnęliby otrzymać aplikację mobilną do swojego portalu. Proces tworzenia tych aplikacji jest skomplikowany, długotrwały, a co za tym idzie kosztowny.Zbudowanie i dostarczenie standardowej aplikacji mobilnej wymaga:

1. Posiadania konta dewelopera (Apple – 100$ rocznie, a Google – 25$ jednorazowo),
2. Zrozumienia, stworzenia i zainstalowania profili urządzeń, które się planuje wspierać,
3. Stworzenia i zainstalowania odpowiednich certyfikatów podpisujących, które są używane do kodowania aplikacji i poświadczenia o jej autorstwie,
4. Zdecydowania jakie urządzenia będą wspierane,
5. Oczywiście napisania, zaprojektowania i zbudowania aplikacji,
6. Podpisania aplikacji wcześniej stworzonym certyfikatem,
7. Spakowania aplikacji i udostępnienia w każdym sklepie

Jeżeli uważasz, że to wszystko, to niestety muszę Cię zmartwić. Przed udostępnieniem aplikacji publicznie należy jeszcze dostarczyć sporo plików i informacji, a są to:

1. Pliki graficzne i wideo prezentujące Twoją aplikację w wielu rozdzielczościach i na wiele urządzeń
2. Ikony do aplikacji w wielu rozdzielczościach
3. Formularz decydujący o prawidłowym zakresie wieku odbiorcy
4. Cenę za aplikację (na Google, gdy cena aplikacji to 0zł-nigdy nie można zarabiać na niej)
5. Politykę prywatności i pozostałe dokumenty prawnicze

Okay… Zakładając, że te kroki zostały zakończone i wszystkie pliki dostarczone → można wysłać wniosek o sprawdzenie aplikacji i czekać.W przeszłości proces ten trwał tygodnie. Pomimo faktu, iż został znacznie skrócony, to nie ma nad nim kontroli. Jeżeli cokolwiek zostało zapomniane – aplikacja zostanie odrzucona i wniosek należy składać ponownie. Zdarzyć się może, że pomimo prawidłowego wypełnienia wniosku zostanie on oddalony – na to nie ma rady.

Z pomocą przychodzi PWA!

PWA (Progressive Web Aplication) to nic innego, jak aplikacja, którą widzimy w przeglądarce. Przygotowanie jej jest zwykle poprzedzone stworzeniem i opublikowaniem standardowej strony internetowej (aplikacji przygotowanej w technologii Angular). W przypadku, gdy posiadasz taki portal, to możemy od razu przystąpić to pracy, ale jeżeli go nie posiadasz – z chęcią stworzymy wszystko od zera.Całą pracę rozpoczynamy od przeprowadzenia audytu przy użyciu w/w narzędzia Google Lighthouse. Jest to świetny portal, który w moment poinformuje co należy zmienić i poprawić w stronie, aby udostępnić użytkownikowi możliwość zainstalowania strony jako aplikacji. Mogą to być poprawki związane z informacją o braku połączenia z internetem, o braku wsparcia dla JavaScript i wiele więcej.

Jakie są korzyści poboczne z utworzenia PWA?

Przede wszystkim zwiększa się prędkość ładowania strony oraz poprawia sposób dostarczania aktualizacji. Zaraz po rozpoczęciu pracy w PWA ustalamy jaki sposób wizualizacji nowej wersji będzie odpowiedni. Standardowo wybierana jest bezwiedna aktualizacja. Dzięki niej użytkownik nie będzie rozpraszany, a nowa zawartość zostanie pobrana automatycznie. Treści, które nie ulegają zmianie są przechowywane na urządzeniu docelowym. Dodatkowo zastosowanie PWA daje możliwość używania aplikacji nawet wtedy, gdy urządzenie pozostaje offline. Wystarczy jednorazowe pobranie treści, aby zapisać i przechowywać je na urządzeniu. Funkcjonalności wymagające połączenia z serwerem zostaną w miarę możliwości wyłączone, a użytkownik może zostać poinformowany o braku dostępu i konieczności podłączenia do sieci.

Powiadomienia PUSH

Każda aplikacja mobilna posiada powiadomienia push. Są to notyfikacje wysyłane na ekran użytkowników w momencie wystąpienia zdarzenia. Wraz z rozwojem PWA pojawiła się również możliwość wysyłania powiadomień do użytkowników nawet, gdy nie znajdują się oni na stronie. Ta rewolucja spowodowała nagły i szybki wzrost popularności PWA. Niestety na dzień dzisiejszy możliwość ta jest wspierana przez wszystkie przeglądarki z wyjątkiem Safari na iOS. Wiadomo jedynie, że deweloperzy Apple pracują nad taką możliwością, jednakże nie jest ona dostępne jeszcze. Nie jest to jednak problem bez rozwiązania. Na dzień dzisiejszy istnieją rozwiązania tymczasowe dla użytkowników iOS – powiadomienia Messenger lub SMS.Wszyscy szczęśliwi posiadacze Androida mogą się już cieszyć pełnią (prawie 😀 ) funkcjonalności aplikacji mobilnej w swojej przeglądarce właśnie dzięki zastosowaniu PWA!