Joomla PWA - co powinieneś wiedzieć?

PWA czyli Progressive Web Apps to aplikacje mobilne, które działają za pośrednictwem przeglądarki internetowej, a oferują podobny UX co aplikacje natywne. Jest to stosunkowo nowa technologia zapoczątkowana przez Google, która ma zmienić dotychczasowe podejście do tworzenia tego typu aplikacji.

Różnice pomiędzy natywną aplikacją, a PWA

Natywna aplikacja jest z reguły tworzona używając specyficznego języka programowania dla danej platformy. W przypadku Androida jest to Java, a w przypadku iOS jest to Swift. W ostatnim czasie pojawiły się również nowe technologie typu React Native, ktore pozwalają na tworzenie aplikacji na różne platformy używając jednego języka programowania. Wciąż jednak stworzenie natywnej aplikacji wymaga bardzo dobrej znajomości programowania i dużego zasobu czasu bądź gotówki. W przypadku PWA sprawa jest dużo prostsza, ponieważ każdą istniejącą stronę lub aplikację webową możemy przekształcić w aplikację PWA. W efekcie mamy jedną bazę i kod źródłowy, który może być wykorzystywany na wielu platformach.

Korzyści PWA

• podstrony aplikacji są widoczne w wynikach wyszukiwania Google
• można zainstalować i uruchamiać ze skrótu na pulpicie
• można linkować do dowolnego adresu URL aplikacji
• może działać w trybie offline
• są responsywne, dostosowują się do ekranów desktopów, tabletów oraz telefonów
• umożliwiają na interakcję z użytkownikiem np. za pomocą powiadomień

Wady PWA

• brak dostępu do wielu funkcji w telefonie takich jak Bluetooth, NFC, itd.
• słabe wsparcie po stronie iOS np. brak dostępu do systemu powiadomień
• starsze urządzenia mogą nie pozwalać na pełne wykorzystanie możliwości PWA

Etapy tworzenia aplikacji PWA

Uruchomienie HTTPS

Każda strona powinna korzystać z protokołu https ze względów bezpieczeństwa, ale wciąż jest wiele stron, które używa zwykłego protokołu http. W przypadku aplikacji PWA używanie protokołu https jest wymogiem koniecznym.

Utworzenie manifestu

Jest to prosty plik JSON, który definiuje podstawowe parametry naszej aplikacji PWA takie jak dostępne ikony, orientacja ekranu, kolor ekranu powitalnego czy możliwość instalacji na pulpicie.

Jak dodać manifest do strony internetowej.

Rejestracja service workera

Service worker jest to skrypt, który przeglądarka uruchamia w tle, pozwalający na przechwytywanie i obsługiwanie żądań sieciowych w obrębie danej strony internetowej.

Service worker jest punktem startowym dla funkcji, dzięki którym nasza strona internetowa będzie działać jak aplikacja natywna. Takimi funkcjami jest np. Cache API, które pozwala na działanie aplikacji w trybie offline czy Notification API I Push API, dzięki którym możemy odbierać I wyświetlać powiadomienia użytkownikowi.

Wprowadzenie do service workera.

Wykorzystanie Cache API

Jest to system, który w połączeniu z Service Workerem umożliwia przechowywanie wybranych żądań w pamięci podręcznej co przekłada się na szybsze ładowanie aplikacji oraz działanie w trybie offline.

Podczas pracy z Cache API, najważniejszy jest wybór strategii cachowania ponieważ ma one kluczowe znaczenie jeżeli chodzi o działanie naszej aplikacji w trybie offline.

Wyróżniamy kilka popularnych strategii cachowania, o których więcej dowiesz się pod tym odnośnikiem.

Optymalizacja szybkości ładowania

Aplikacja PWA musi działać w każdych warunkach, nawet przy słabszym sygnale lub łączu internetowym. Dlatego tak ważne jest aby nasza aplikacja była dobrze zoptymalizowana.

Tutaj dowiesz się więcej jak zoptymalizować stronę opartą na Joomla.

Audyt za pomocą Lighthouse

Google jako główny twórca aplikacji PWA dostarcza również znakomite narzędzie do ich audytowania.

Aby uruchomić Ligthouse w Chrome wystarczy uruchomić narzędzia dla developerów skrótem CTRL + Shift + I dla Windows lub Command + Option + I dla MacOS. Następnie przejź do zakładki Audits.

Więcej o Lighthouse.

Powyższe podsumowanie stanowi zarówno wstęp do PWA, jak też mini przewodnik po progresywnym ulepszaniu serwisów opartych na Joomla!. Mamy nadzieję, że chociaż trochę przybliżyliśmy kwestię zagadnienia Joomla PWA. W miarę możliwości i upływu czasu będziemy aktualizować zawarte tutaj informacje.