Jak przekonwertować swoją witrynę WordPress na PWA (Progressive Web App)?

Urządzenia mobilne są obecnie odpowiedzialne za ponad połowę globalnego ruchu internetowego i ten trend wciąż rośnie. W rezultacie, firmy nieustannie wdrażają nowe technologie, aby nadążyć za mobilną rewolucją i sprawić, by doświadczenie użytkownika z produktem było jak najbardziej nieskomplikowane i przyjazne, niezależnie od używanego urządzenia. Jednym z rozwiązań, które szturmem podbijają Internet, są Progressive Web Apps, czyli Progresywne Aplikacje Internetowe. Dzięki tej technologii Twoja witryna może działać na urządzeniu mobilnym prawie jak aplikacja natywna. A to z kolei jest pewnym sposobem na zapewnienie klientom lepszych doświadczeń ze stroną, zwiększenie ich zaangażowania i zwiększenie współczynnika konwersji. Wiele światowych marek z powodzeniem wykorzystuje PWA, więc dlaczego nie spróbować? Dodatkowo, jeśli Twoja witryna jest oparta na WordPressie, masz duże szczęście. Przejście na PWA może być tak proste, jak bułka z masłem, pod warunkiem, że wybierzesz do tego odpowiednie narzędzie. A my jesteśmy tutaj, aby właśnie Ci w tym pomóc – czytaj dalej, aby dowiedzieć się, jak zbudować WordPress PWA.

Czym jest Progressive Web App?

Jeśli kiedykolwiek korzystałeś z Twittera Lite, Tindera lub OLX, wiesz już, jak wygląda i jak działa PWA. Krótko mówiąc, jest to strona internetowa, która bardzo przypomina natywną aplikację mobilną, ale można uzyskać do niej dostęp w trybie offline, można ją dodać do ekranu głównego, ma własną ikonę i może wysyłać powiadomienia. Co więcej, nie trzeba jej instalować za pośrednictwem sklepu z aplikacjami i oparta jest na wspólnej bazie kodu dla wszystkich platform mobilnych i stacjonarnych. To sprawia, że sam proces rozwoju PWA jest szybszy i tańszy. Ponadto aplikacje PWA zajmują znacznie mniej miejsca i są błyskawicznie instalowane i aktualizowane.

Główne cechy PWA

Według Google, żeby aplikacja została sklasyfikowana jako PWA, musi posiadać określone atrybuty:

• Szybkość i niezawodność – powinna załadować się w niecałe 3 sekundy. Aplikacja powinna korzystać z danych z pamięci podręcznej i działać płynnie nawet przy wolnym połączeniu internetowym.
• Bezpieczeństwo – PWA powinno być obsługiwane wyłącznie przez HTTPS.
• Możliwość działania w dowolnej przeglądarce – obecnie wszystkie główne przeglądarki obsługują PWA (Firefox na komputer wymaga zainstalowanego dodatkowego rozszerzenia).
• Responsywny rozmiar ekranu – cała zawartość strony powinna być dostępna niezależnie od rozmiaru widocznego obszaru.
• Niestandardowa strona offline — użytkownicy nie powinni spotykać się ze zwykłą pustą stroną podczas uzyskiwania dostępu do aplikacji w trybie offline.
• Możliwość zainstalowania – użytkownicy częściej angażują się w aplikacje, które można uruchamiać niezależnie od przeglądarki.

Idealny PWA powinien być również w pełni dostępny (zgodnie z rekomendacjami WCAG 2.0), możliwy do znalezienia w wyszukiwarce i kompatybilny z każdym urządzeniem wejściowym.

Wymagania dla WordPress PWA

Jedną z (wielu) zalet WordPressa jest to, że nie trzeba kodować całej witryny WP od zera, aby zmienić ją na PWA. Istnieje kilka metod konwersji witryny WordPress na progresywną aplikację internetową, które wkrótce omówimy. Niezależnie od preferowanego podejścia, przed przystąpieniem do pracy należy jednak zawsze spełnić określone warunki:

• Wersja PHP – 5.3 lub nowsza
• Wersja WordPress – 3.5.0 lub nowsza
• Strona musi być zabezpieczona za pomocą HTTPS
• Motyw używany w witrynie WordPress musi być responsywny i kompatybilny zarówno z urządzeniami mobilnymi, jak i stacjonarnymi.

Zmiana witryny WordPress w Progresywną Aplikację Internetową

Po spełnieniu powyższych warunków możesz przejść do konwersji WordPress na PWA. Możesz to zrobić ręcznie lub skorzystać z wtyczek – każda z tych metod ma swoje zalety.

Ręczne tworzenie PWA na WordPress

W porównaniu z wieloma innymi projektami informatycznymi, samodzielne budowanie PWA to stosunkowo niedrogie przedsięwzięcie. Wymaga ono jednak od programisty użycia konkretnych bibliotek i frameworków JavaScript, przez co sam proces nie jest prosty i zakończy się sukcesem tylko wtedy, gdy zostanie zrealizowany przez profesjonalistę. Ale jeśli praca zostanie wykonana dobrze, możesz otrzymać bardziej dopracowany i wyrafinowany produkt końcowy, z możliwością dalszych ulepszeń.
Przyjrzyjmy się więc technologiom, które najczęściej używane są do budowania PWA WordPress.

Angular

Jeden z najpopularniejszych frameworków opartych na TypeScript. Zapewnia bardzo sprawny i prosty proces dodawania nowych funkcjonalności, co znacznie skraca czas poświęcony na budowę aplikacji. Niektóre funkcje zostały uwzględnione w Angularze, szczególnie z myślą o rozwoju PWA. Dodatkowo, prężnie rozwijająca się społeczność Angulara oferuje cenne wsparcie, a sam framework jest regularnie aktualizowany przez Google.

Komentarz eksperta

Autor

Robert Juszczyk

Managing Partner Develtio

Framework Angular został stworzony z myślą o skalowalnych i interaktywnych aplikacjach internetowych. Te aplikacje są w stanie przechowywać i przetwarzać ogromne ilości danych, zawierają własny system routingu i zapewniają użytkownikom dobre „wyczucie” aplikacji i płynną interakcję. Jeśli chcesz stworzyć responsywną stronę internetową, która bardzo przypomina natywną aplikację mobilną, powinieneś skorzystać z technologii PWA, stworzonej z pomocą frameworku Angular.

React

Kolejny znany framework JS wykorzystywany do tworzenia aplikacji jedno- i wielostronicowych. Wielu programistów ceni React za dobrze napisaną i obszerną dokumentację, ogromną pulę dostępnych bibliotek i nieporównywalną elastyczność podczas tworzenia stron renderowanych po stronie serwera oraz klienta. Podobnie jak Angular, React jest wspierany przez dużą i pomocną społeczność.

Czy wiesz,
że możesz odmienić
swój biznes?

Zacznijmy już teraz

POROZMAWIAJMY

Vue.js

Framework JavaScript o otwartym kodzie źródłowym, często używany jest do tworzenia jednostronicowych aplikacji i interfejsów użytkownika. Lekki i łatwy w użyciu Vue.js oferuje błyskawiczne renderowanie oraz umożliwia szybkie dostarczanie finalnej wersji aplikacji. Ze względu na swój charakter, Vue.js stanowi doskonały wybór dla mniejszych projektów o krótkich terminach realizacji.

Poza trzema głównymi frameworkami wspomnianymi powyżej, również inne technologie i narzędzia mogą być używane do tworzenia progresywnych aplikacji webowych:

• Polymer
• Ionic
• Lighthouse
• PWA Builder by Microsoft
• Magento PWA Studio

Korzystanie z wtyczek do budowania WordPress PWA

Jeśli zależy Ci na czasie, a nie masz umiejętności (ani pieniędzy), aby ręcznie zbudować swoje PWA na WordPressie – nie przejmuj się. Jak zwykle w przypadku WordPressa, istnieje co najmniej jedna wtyczka, która pomoże Ci rozwiązać wszelkie problemy, jakie możesz mieć ze swoją witryną. W rzeczywistości istnieje kilka wtyczek przeznaczonych do konwersji witryn WordPress na PWA.

Super Progressive Web Apps

Ta popularna i uznana wtyczka WordPress PWA pozwala ustawić niestandardową stronę offline, utworzyć powiadomienie „Add to Home Screen”, włączyć agresywne buforowanie i wiele więcej. Super PWA jest darmowy, ale z jego płatną wersją PRO otrzymujesz dodatek Call To Action, analitykę danych, Pre-Loader, a także aplikację Android APK APP i generator kodów QR. Biorąc pod uwagę ciągłe wsparcie ze strony twórców i przytłaczająco pozytywne recenzje użytkowników, z całego serca zachęcamy do wypróbowania Super PWA.

PWA for WP & AMP

Tę wtyczkę polecamy ze względu na jej bogatą w funkcje zawartość i ciągłe aktualizacje od twórców. PWA for WP & AMP obsługuje Multisite, śledzenie UTM, strategię buforowania i oferuje banery aplikacji, a także konfigurowalne ekrany powitalne. Jest to projekt typu open source i można go używać za darmo. W płatnej wersji Premium otrzymujesz dodatkowe funkcje, takie jak Call to Action, Pull to Refresh, wielojęzyczną kompatybilność i wiele innych.

Progressive WordPress (PWA)

Najpierw małe ostrzeżenie – ta wtyczka nie została przetestowana z trzema ostatnim dystrybucjami WordPressa. Istnieje więc pewne ryzyko, że podczas korzystania z niej mogą wystąpić jakieś problemy. Niemniej jednak zdecydowaliśmy się umieścić na naszej liście Progressive WordPress (PWA) ze względu na jej jasny i przejrzysty interfejs, obsługę powiadomień push i bardzo przychylne recenzje użytkowników. Wtyczka jest również prosta w użyciu.

Bonusowa wtyczka: OneSignal – Web Push Notifications

OneSignal nie pomoże w konwersji strony na PWA, ale na pewno doda funkcję ważną dla budowania zaangażowania użytkowników, czyli – targetowane powiadomienia push. Możesz ustawić wysyłanie powiadomień za każdym razem, gdy nowy post pojawi się na Twojej stronie internetowej lub niezależnie od publikacji, w ustalonych odstępach czasu. Twoi goście będą otrzymywać powiadomienia nawet po opuszczeniu witryny PWA. Warto pamiętać, że nie wszystkie wtyczki do konwersji PWA WordPress obsługują OneSignal, więc jeśli potrzebujesz tej funkcji, sprawdź najpierw kompatybilność wtyczek. Dzięki OneSignal możesz bezpłatnie wysyłać wiadomości nawet do 10 000 subskrybentów. Warto jednak wiedzieć, że wtyczka nie jest jednym narzędziem do zarządzania powiadomieniami push – równie dobrze możesz je włączyć za pomocą Push API. Chociaż samodzielny proces ich aktywowania, jest znacznie trudniejszy i bardziej czasochłonny.

Podsumowanie

Czy myślisz nad zbudowaniem swojej Progresywnej Apki Webowej na WordPressie od podstaw, czy jednak wolisz postawić na wtyczki? Niezależnie od Twojego podejścia, jedyną rzeczą, która ostatecznie się liczy po przejściu na PWA, jest to, że Twoja witryna będzie cieszyła się większym zaangażowaniem odwiedzających. PWA oferuje jeszcze więcej – pozwala żyć Twojej witrynie poza przeglądarką, a jej użytkownicy odnoszą wrażenie, że korzystają z natywnej aplikacji. To jednak wciąż tylko wrażenie, bo PWA nie posiada wszystkich cech aplikacji natywnej. Warto pamiętać, że PWA nie współpracuje z czujnikami zbliżeniowymi, kamerami ani Smart Lock i nie może wchodzić w interakcje z innymi aplikacjami tak, jak robią to aplikacje natywne. Ale jeśli nie potrzebujesz tych specyficznych funkcji, PWA okaże się doskonałym rozwiązaniem, które zapewni Ci przewagę nad rywalami biznesowym w świecie mobile.