Magento PWA Studio – czym jest i jak działa?

Co to jest PWA i jak szybko może stać się aplikacją natywną?-

 

Jak często pobierasz nowe aplikacje na swój telefon? Czy zdarza Ci się dokonać zakupu online z ich pomocą? Zazwyczaj użytkownicy Internetu robią zakupy lub czytają newsy, korzystając z konkretnej strony internetowej w przeglądarce. Jest to dla nich o wiele szybsze i wygodniejsze rozwiązanie niż pobieranie i „zapychanie” pamięci swojego telefonu kolejną aplikacją. Tak zrodził się pomysł wdrożenia PWA. Przedsiębiorcy z branży eCommerce, widząc, że lepiej od aplikacji natywnych konwertują te webowe, coraz częściej decydują się na rozwiązania, które imitują aplikacje natywne w aplikacjach webowych. Co to jest i jak działa Magento PWA Studio? Tłumaczymy poniżej.

Co to jest PWA?

 

PWA, czyli Progressive Web Application, to jeden z kierunków, w którym podąża współczesny web development. Rozwiązanie to gwarantuje, że na jakimkolwiek urządzeniu Twoja strona będzie wykorzystywać jego pełny potencjał. Chodzi tu głównie o urządzenia mobilne, na których PWA ma zdecydowanie więcej możliwości, których użytkownik nie doświadczyłby na stronie internetowej na desktopie.

 

Progressive Web App jest aplikacją webową, która wykorzystuje nowoczesne technologie i wzorce projektowe. To rozwiązanie jest szybkie, bezpieczne, responsywne, zgodne ze wszystkimi przeglądarkami, a do tego, po odpowiedniej implementacji, może działać także offline.

Jak to działa?

 

To po prostu aplikacja webowa, która po dodaniu dodatkowych elementów wygląda jak natywna aplikacja. Najważniejszymi jej wyróżnikami są:

 

• responsywność,


• niezawodne działanie niezależne od przeglądarki i urządzenia, z których korzysta użytkownik,


• możliwość działania w offline,


• płynność interfejsu użytkownika.

Aby mieć dostęp do wszystkich funkcjonalności, jakie daje PWA, należy wdrożyć mechanizmy Service Worker, które są uruchamiane przez przeglądarkę skryptów. Zapewnia to płynne działanie strony bez interakcji z użytkownikiem - czyli nawet po jej zamknięciu. Dzięki tym mechanizmom możesz dokładnie określić, które zasoby powinny trafić do pamięci podręcznej, a co należy pobrać z serwera. Umożliwia to:

 

• szybsze ładowanie strony,


• szczegółowy zapis danych,


• synchronizację w tle.

 

Bardzo ważną częścią tej technologii jest także Web App Manifest, który poza opcją określenia nazwy aplikacji i ikony, umożliwia dodanie jej do ekranu głównego urządzenia. 

 

PWA, TWA i aplikacja natywna - o co tu chodzi?

 

Aplikacje natywne, aby być w pełni sprawne,  muszą powstać w dwóch wersjach - na iOS i na Android. Progressive Web Application  natomiast jest nowoczesną technologią, w której tworzy się responsywne strony internetowe, doskonale działające w wersji mobile.  W przypadku nieskomplikowanych aplikacji to właśnie PWA może okazać się dużo lepszym rozwiązaniem - jest o wiele tańsze we wdrożeniu oraz w instalacji przez użytkownika. Nie trzeba szukać aplikacji w Google Play lub App Store, wystarczy otworzyć stronę i zapisać ją na ekranie głównym urządzenia, z którego korzystasz.

 

Decydując się na takie rozwiązanie, możesz zatem uniezależnić się od sklepów z aplikacjami, ale, co ważne, nie musisz. PWA współgra bowiem z rozwiązaniem zanym TWA (Trusted Web Activity) - TWA to kontener do “opakowania” stron typu PWA, dzięki któremu mogą one bez problemu trafić na Google Play Store i App Store. Co więcej, opakowany w TWA e-sklep daje  możliwość wysyłania powiadomień PUSH na iOS, dzięki czemu możemy informować użytkowników Apple o nowościach, promocjach czy rabatach w naszym e-sklepie. ) To istotne, ponieważ dzięki dostępnym ocenom i komentarzom w sklepie Google lub App Store potencjalny użytkownik ma pewność, że aplikacja spełnia jego wymagania. Ma to szczególne znaczenie w przypadku e-biznesów, dla których bezpieczeństwo i wiarygodność pełnią bardzo ważną rolę, np. w branży FinTech.




Czym jest projekt Magento PWA Studio?


Magento PWA Studio wprowadzono na rynek eCommerce w 2018 roku. Jest to rozwiązanie, dzięki któremu wdrożysz własny sklep na PWA w oparciu o Magento 2.3 i nowsze. Magento PWA Studio wykorzystuje nowoczesną technologię i biblioteki do tworzenia frameworków zgodnie z regułą rozszerzalności Magento.

Zalety Magento PWA Studio

1. Wydajna i lekka aplikacja

• Lepsze mechanizmy cache


• Przeglądarka nie pobiera całego szablonu strony, tylko potrzebne elementy. 


• Brak potrzeby wczytywania wszystkich skryptów.

 

Natywne rozwiązanie	PWA Studio
Przy każdym odświeżeniu pobiera ok. 2,5 MB assetów (JavaScript, CSS).	Przy każdym odświeżeniu pobiera mniej niż 1 MB assetów (JavaScript, CSS).
Uruchomienie karty produktu na załadowanym listingu pobiera ok. 2,5 MB kodu JavaScript.	Uruchomienie karty produktu na załadowanym listingu pobiera ok. 48KB kodu JavaScript.

 

2. Wykorzystanie GrahpQL

 

• Nowe pola i typy mogą być dodawane bez naruszenia zgodności z istniejącymi komunikatami, brak konieczności wersjonowania.


• Pozwala tworzyć elastyczne zapytania, zwraca wyłącznie wymagane dane.


• Jest w stanie zwracać kilka różnych informacji z różnych źródeł za pomocą jednego komunikatu.


• Wykorzystanie Apollo GraphQL do komunikacji pozwala na cachowanie zapytań po stronie przeglądarki.

3. Lepszy user experience - szybsze działanie aplikacji poprzez wczytywanie tylko potrzebnych elementów zamiast całej strony.

4. Server-site Rendering (SSR) polega na wcześniejszym wyrenderowaniu strony dla robotów, aby nie miały problemu z odczytaniem każdej strony.

5. Opcja pracy w trybie offline.

6. Aktualizacje nie wymagają za każdym razem modyfikacji backendu, więc można modyfikować niezależnie sam front.

7. Bezpieczeństwo - wykorzystuje sprawdzone rozwiązania od Adobe.

8. Stack technologiczny łatwy do utrzymania w przyszłości.


9. Silna społeczność PWA.

 

10. PWA jest wieloplatformowe i umożliwia napisanie jednej aplikacji na różne przeglądarki oraz, dzięki wsparciu TWA, na różne urządzenia  urządzenia mobilne.

Wady Magento PWA Studio:

1. API GraphQL nie pokrywa jeszcze wszystkich funkcjonalności Magento. Należy więc dorobić brakujące endpointy.


2. Nie wszystkie moduły w pełni umożliwiają ich wykorzystanie, jeżeli backendowo moduł wspiera GraphQL, to konieczne jest dorobienie części frontowej.

Aplikacja mobilna sklepu bez aplikacji mobilnej? To możliwe.

Najlepszym dowodem na działanie aplikacji PWA jest współpraca Fast White Cat z marką Kontigo. Nasz Partner potrzebował usprawnić działanie swojego e-sklepu na urządzeniach mobilnych. Challenge polegał na tym, aby spełnić oczekiwania Kontigo i stworzyć aplikację mobilną… bez tworzenia aplikacji mobilnej. 

Zamiast pisania na nowo aplikacji mobilnej, Kontigo wzięło pod uwagę naszą rekomendację i zdecydowało się zaufać zespołowi Fast White Cat w kwestii nowego, innowacyjnego podejścia do aplikacji, czyli Progressive Web Application - PWA. Sprawdź, jak za pomocą PWA stworzyliśmy w Fast White Cat szybszą i tańszą alternatywę dla klasycznej aplikacji mobilnej i pokonaliśmy technologię!



Zamierzasz wdrożyć rozwiązania PWA w swoim e-biznesie? Skontaktuj się z nami - info@fastwhitecat.com