Progressive Web Apps (PWA): czym są i jak je wdrożyć

Czym są Progressive Web Apps lub PWA?

Progressive Web Apps to technologiczne połączenie aplikacji natywnych i znanych nam aplikacji webowych opartych na HTML5. PWA przybyły, by wypełnić lukę technologiczną między aplikacjami a stronami internetowymi.

Google był jednym z głównych orędowników zachęcających do rozwijania tego typu technologii. Aby lepiej zrozumieć ich cechy, musimy mówić o aplikacjach, które muszą być niezawodne, szybkie i angażujące.

Cechy, które muszą mieć Progressive Web Apps

Aby koncept PWA był wystarczająco jasny i wyjaśniony, zanurzmy się w niezbędne cechy, które te technologie muszą mieć.

Oczywiście mówimy w kategoriach ogólnych. Stąd każdy model biznesowy/usługowy dostosuje swoje cele do potrzeb własnej grupy docelowej.

Szybkość

Czas to pieniądz, nie tylko dla Google'a, ale dla wszystkich tych biznesów, gdzie wolne ładowanie ich produktów może spowodować, że użytkownicy porzucą potencjalny zakup.

Google od dawna podkreśla tę przesłankę. Narodziny projektu AMP miały ten cel, a teraz PWA dołączają do potrzeby szybkiego dostępu do informacji z aplikacji.

Użytkownicy dziś nie mają cierpliwości; nie czekają, aż strona w pełni się załaduje. 53% użytkowników nie poczeka dłużej niż 3 sekundy na załadowanie strony, według Think with Google

Niezawodne

Gdy mówimy o niezawodności, mamy na myśli gwarancje działania strony. Dzięki temu, co znane jest jako Service Workers, problemy z połączeniem sieciowym nie powinny zapobiegać ładowaniu PWA.

Instalowalne

PWA mogą być zainstalowane bez konieczności chodzenia do Chrome Store, Apple Store czy któregokolwiek z istniejących sklepów aplikacji. Pamiętaj, że nie są to aplikacje natywne, więc możemy uzyskać do nich dostęp bez przechodzenia przez te sklepy.

Instalacja zachowuje się po prostu jak skrót; nie potrzebuje miejsca, by przechowywać różne pliki.

Różne urządzenia: mobile i desktop

Baza kodu jest ujednolicona między oboma urządzeniami, co oznacza, że techniki responsywnego designu mają zastosowanie zarówno do mobile, jak i desktopa.

Zalety i wady PWA

Niektóre zalety zostały już wymienione powyżej przy wyjaśnianiu cech aplikacji progresywnych. Ale jest znacznie więcej powodów, by rozważyć użycie tej technologii w naszym biznesie.

• ›Oszczędności zasobów
• ›Brak konieczności instalacji
• ›Bardzo wysoka szybkość ładowania
• ›Powiadomienia push bezpośrednio na smartfony
• ›Działa na wszystkich systemach operacyjnych
• ›Poprawione bezpieczeństwo
• ›Mniej pracy nad rozwojem i utrzymaniem niż aplikacja natywna.
• ›Bardziej ekonomiczna niż aplikacja natywna.

Wady

• ›Wymaga połączenia internetowego.
• ›Nie wszystkie przeglądarki obsługują PWA.
• ›Wysokie zużycie baterii

Czym jest Service Worker?

Wracając krótko do strony technicznej, musimy mówić o pewnych aspektach, bez których aplikacje progresywne nie mogłyby funkcjonować. Service workers to skrypty działające w tle, wykonujące żądania do aplikacji webowych, cache lub samej sieci.

Ważną rzeczą, o której powinniśmy wiedzieć, jest to, że Service Workers mogą działać tylko, jeśli masz certyfikat SSL i serwujesz je przez https.

Teraz zobaczmy to wszystko na przykładzie: strona BMW i jego PWA.

Przykład PWA: BMW

Próbowałem napisać artykuł bez wchodzenia w aspekty techniczne, a teraz zobaczymy przykład aplikacji, który pomoże lepiej zrozumieć koncept PWA.

Jeśli wejdziemy na stronę BMW, możemy zobaczyć, że mają bardzo atrakcyjny design, priorytetyzując wizualność, ale poza mówieniem o designie, zobaczmy, z jakim typem strony mamy do czynienia.

Pozornie to „normalna" strona, ale jeśli pogrzebiesz w kodzie, mamy pierwszą niespodziankę. Rzeczywiście, to strona w całości opracowana w AMP, nie tylko wersja mobilna.

Ale przejdźmy do tematu dnia.

Gdy już jesteśmy na stronie, przejdźmy do paska „dostosuj i kontroluj" Chrome'a.

Jak mogłeś zobaczyć, otworzyło się okno z treścią strony BMW. Porównując obie treści, widzimy, że są praktycznie identyczne.

Obraz strony w przeglądarce (Chrome)

Obraz strony w PWA desktop

Deweloperom BMW udało się zachować identyczny wygląd wizualny. Gdy zaakceptujemy „instalację" PWA w naszym folderze aplikacji Chrome lub nawet na pulpicie (w zależności od OS, obecnie używam MacOS), pobrany został skrót do PWA.

Jeśli czujemy się przytłoczeni instalowaniem aplikacji i chcemy odinstalować, wystarczy przejść do okna naszej wersji PWA, kliknąć po prawej stronie, tak samo jak w Chrome, i wybrać odinstaluj.

W wersji mobilnej jest to praktycznie podobne. Gdy wchodzimy na stronę z wersją PWA, otrzymujemy powiadomienie, by „utworzyć skrót."

Wchodząc na stronę z PWA; zobaczymy opcję utworzenia skrótu.

Jeśli zaakceptujemy, zobaczymy ikonę PWA na naszym mobilnym pulpicie.

DevTools, by dowiedzieć się więcej o PWA

W tym momencie chcę zanurzyć się w przykłady, by wyjaśnić koncepty i cechy tego typu aplikacji.

W tym celu użyjemy narzędzia deweloperskiego, które zapewnia Chrome (DevTools). Otwieramy inspektor prawym przyciskiem i przechodzimy do Application.

Chrome Devtools

App Manifest (Web Application Manifest)

Manifest to mały plik JSON z podstawowymi aspektami stylu, który dostarcza przeglądarce, by uniknąć gwałtownych zmian.

Przykład Manifestu (JSON)

Service Workers

Jak wyjaśnialiśmy wcześniej, teraz możemy zobaczyć, o co chodzi. Widzimy plik JS i w nim skrypty, których używa. Service Worker jest zainstalowany w przeglądarce. Będziemy mieli kilka z innych aplikacji webowych.

Jedną z głównych funkcji tego typu kodu jest zapewnienie, że zawsze serwowana jest ta sama wersja (kontroluje cache), nawet jeśli otworzymy inną kartę.

Jak wdrożyć PWA w WordPressie?

Choć jeśli rozwinęliśmy naszą stronę z naszym własnym kodem, będziemy musieli wykonać sporo ręcznej pracy, sytuacja będzie zupełnie inna, jeśli rozwinęliśmy naszą stronę w WordPressie. Jeśli tak jest, mamy do dyspozycji kilka wtyczek, które pozwolą nam włączyć technologię PWA w parę kliknięć. Wersja PWA SEO Alive jest w istocie wynikiem działania tej wtyczki, którą polecamy.

Najpopularniejsze wtyczki do wdrożenia PWA w WordPressie.

PWA w marketingu

Dla tych z nas, którzy pracują w marketingu, Progressive Web Apps mogą pomóc nam osiągnąć cele, jakie ma na uwadze każdy dział marketingu, by rozwinąć markę.

Lojalność i sprzedaż

Jeden z celów najgorzej obrabianych przez niektóre marki. Wszyscy znamy niskie zaangażowanie, jakie marki telefonów komórkowych mają w obsługę swoich klientów, by dać przykład.

Powiadomienia push w PWA to jedno z działań, które najlepiej działa i przyczynia się do generowania sprzedaży.

Badanie przeprowadzone przez Gartner na temat PWA daje nam serię bardzo interesujących statystyk dotyczących Lancome i Alibaba; Lancome raportuje 17% wzrost konwersji, 51% w sesjach z urządzeń mobilnych i 52% na iOS. Alibaba (grupa, do której należy Aliexpress) poprawiła swój wskaźnik konwersji o 76%.

Choć mówiliśmy o 2 globalnych gigantach, posiadanie aplikacji na telefonie, gdzie czas ładowania i wykonania nie jest przeszkodą, plus szanowanie dobrego designu, zostało udowodnione, że zwiększa wskaźnik konwersji.

Podsumowując, można powiedzieć, że PWA coraz bardziej się rozprzestrzeniają, głównie wśród dużych marek. W Hiszpanii prawdopodobnie zajmie nam trochę czasu, by zdać sobie sprawę z ogromnego potencjału tej technologii, ale prędzej czy później zostanie ona wdrożona.

Każda technologia ułatwiająca nawigację mobilną ma duże znaczenie; spędzamy wiele godzin z naszymi smartfonami, a ostatecznie dostęp zarówno do treści, jak i produktów to biznes.

Referencje

• ›Dokumentacja Google'a o PWA