Progresywne aplikacje internetowe WordPress

Progressive Web App z WordPressem: Zalety i wady

Nasz partner z agencji giftGRÜN zbudował Progressive Web App (w skrócie: PWA) z WordPress dla Szpitala Uniwersyteckiego RWTH Aachen, który wspiera onboarding nowych pracowników. Rozmawialiśmy z Patrickiem Heinkerem o zaletach i wadach PWA w porównaniu z witrynami internetowymi i aplikacjami natywnymi.

Jak działa Progressive Web App

Patrick, jak dokładnie działa PWA i co z zarządzaniem danymi?

Zawartość jest przechowywana w WordPress i wyprowadzana za pomocą zwykłych szablonów. ServiceWorker zapewnia funkcjonalność w trybie offline. Przy pierwszym otwarciu strony ServiceWorker pobiera plik zip ze wszystkimi stronami, który jest generowany po stronie serwera.

Teraz, gdy strona jest wywoływana, wyświetlana jest strona, która już znajduje się w pamięci podręcznej. A ServiceWorker dba o aktualizację w tle, tak aby przy następnej wizycie pokazać nową zawartość, jeśli coś się zmieniło. Opcjonalnie, możesz również przeładować po aktualizacji, ale nie było to konieczne w naszym przypadku użycia.

Progresywne aplikacje internetowe WordPress
Zrzuty ekranu z progresywnej aplikacji internetowej dla Szpitala Uniwersyteckiego RWTH Aachen

Przechowywanie danych odbywa się całkowicie offline, jedynie w przypadku filmów i treści zewnętrznych wymagane jest połączenie z Internetem.

PWA vs Native App

Jakie są różnice, ale także zalety w porównaniu z aplikacjami natywnymi?

Aplikacje natywne są specyficzne dla danej platformy, często skomplikowane, a przez to drogie w implementacji. Ponadto, muszą one być dystrybuowane za pośrednictwem oficjalnych sklepów dla dużego zasięgu. PWA, z drugiej strony, mogą być instalowane bezpośrednio podczas odwiedzania strony za pomocą jednego przycisku.

Jednak Apple wciąż pozostaje nieco w tyle ze wsparciem funkcjonalności PWA. Ale to nic nowego wśród web deweloperów, że Safari nie obsługuje rzeczy, które są powszechne w innych przeglądarkach od lat...

Jak działa interakcja Progressive Web App z WordPressem?

Używamy WordPressa do przechowywania danych, ale także do tworzenia szablonów. Jest to normalna strona internetowa, z tą różnicą, że jej zawartość jest udostępniana w trybie offline za pomocą JavaScript ServiceWorker. I że zachowuje się prawie jak natywna aplikacja.

Istnieje również możliwość skorzystania z REST API strony WordPress i renderowania wszystkiego po stronie klienta, tak jak ma to miejsce w natywnych aplikacjach. Dla naszego przypadku użycia widzieliśmy tu jednak tylko dodatkowy wysiłek, który prawie nie przynosi żadnych korzyści.

Wdrażanie aplikacji Progressive Web App z WordPress

Jakie są podejścia, jeśli chcesz wdrożyć Progressive Web App z WordPress ?

Istnieje kilka wtyczek, które mogą zmienić stronę w Progressive Web App za pomocą jednego przycisku i kilku ustawień. Istnieją również usługi powiadomień push, które można wykorzystać do informowania wszystkich odwiedzających blog o nowych wpisach. Jednak te gotowe wtyczki są raczej przeznaczone do tego, by uczynić zwykły blog zdolnym do pracy w trybie offline i do wstępnego załadowania odpowiednich plików.

Po pobawieniu się z niektórymi z tych Plugins , przeszliśmy do naszego własnego rozwiązania. Zbudowaliśmy naszą funkcjonalność oddzielnie od Plugins , aby umożliwić, na przykład, pełne ładowanie zawartości strony poprzez zip wygenerowany przez serwer i aby być bardziej elastycznym w dostosowywaniu funkcji. Powiadomienia Push są zazwyczaj odwzorowywane za pomocą płatnych usług, ale równie dobrze mogą być budowane we własnym zakresie.

PWA: kompatybilność i ochrona danych

Jakie są potencjalne pułapki i jak je rozwiązałeś? A co z kwestią ochrony danych?

Jak to zwykle bywa z tworzeniem stron internetowych: każda przeglądarka działa inaczej i trzeba ją intensywnie testować na wszystkich urządzeniach. Apple odmawia pełnego wsparcia dla funkcjonalności PWA i ponownie wprowadza własne, specyficzne dla Apple meta-tagi, które odbiegają od standardu.

Model buforowania powinien być dobrany do danego przypadku użycia. ServiceWorkery mogą wyświetlać strony zbuforowane w ciągu milisekund i odświeżać je w tle. Jeśli jednak znajduję się na stronie z wiadomościami, użytkownik może woleć widzieć mały pasek oczekiwania na załadowanie najnowszej zawartości.

Ochrona danych była jednym z głównych powodów, dla których zdecydowaliśmy się na PWA. Treści użytkowników i ich postępy w nauce są przechowywane całkowicie offline. Serwer nigdy nie widzi, który użytkownik co wywołuje, ponieważ nie ma zalogowanych użytkowników. Nie można więc sprawdzić, czy nowy pracownik wszystko już przerobił, czy nawet nie zainstalował aplikacji.

Zalety i wady systemów

Jak zdecydować, która technologia jest najlepsza dla danego projektu?

Istnieją aplikacje, które mogą być wdrożone tylko poprzez aplikację natywną. Na przykład, jeśli klient koniecznie chce powiadomień push na iPhone, to nie ma innej drogi niż natywna. Z drugiej strony, produkcja PWA jest również znacznie tańsza od aplikacji natywnej ze względu na wykorzystanie technologii webowych i wyeliminowanie całej obsługi sklepu. Oczywiście, decydującą rolę odgrywa również dostępny budżet.

Czy macie jeszcze jakieś inne projekty PWA w przygotowaniu, o których możecie nam opowiedzieć?

Sporo - ale nie chcemy ich jeszcze zdradzać 😉 Tylko tyle: wielkie rzeczy można zrobić z PWA także w branży e-commerce.

Kilka słów o Tobie i Twojej agencji?

giftGRÜN jest agencją digitalową w grupie GRÜN. Nasza grupa przedsiębiorstw jest wiodącym na rynku dostawcą systemów zarządzania darowiznami i członkami w Niemczech. Większość naszych projektów polega na stworzeniu całościowego systemu dla naszych klientów, tj. połączenie naszego systemu ERP z serwisami internetowymi.

Wykonujemy wiele prac związanych z interfejsem, a także rozwijamy nasze własne motywy WordPress. Nasz zespół składa się z projektantów, front- i backendlerów oraz project managerów. Nasz ulubiony hoster jest oczywiście z Münster 🙂

Twoje pytania dotyczące Progressive Web Apps

Jakie masz pytania dotyczące Progressive Web Apps? Zapraszamy do skorzystania z funkcji komentarza. Chcesz być informowany o nowych artykułach na WordPress i WooCommerce ? Następnie śledź nas na Twitterze, Facebooku, LinkedIn lub poprzez nasz newsletter.

Spodobał Ci się ten artykuł?

Zostawiając opinię pomożesz nam udoskonalać publikowane przez nas treści.

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola wymagane oznaczone są *.