Wraz z rozwojem rynku e-commerce rośnie rola i popularność Progressive Web Applications. Wykorzystanie tej technologii pozwala stworzyć szybko ładującą się stronę, przyjemną dla oka użytkowników. Dodatkowo można liczyć także na docenienie przez roboty indeksujące Google’a, zgodnie z polityką mobile first i offline first. W artykule pokażę, jak samodzielnie krok po kroku z pomocą Angulara stworzyć, a następnie skonfigurować i przetestować swoją PWA.

Co to jest PWA?

PWA (Progressive Web Application) jest tak naprawdę stroną internetową, która dzięki konfiguracji service workera oraz pliku manifest.json daje możliwości, z których możemy korzystać jako developerzy, aby stworzyć bardziej atrakcyjną stronę dla użytkownika końcowego. Technologia PWA umożliwia tworzenie aplikacji, która łączy w sobie zalety strony internetowej i aplikacji w telefonie. W tym krótkim artykule postaram się opisać konfigurację PWA przy użyciu Angulara, która jest bardzo prosta dzięki natywnemu wsparciu przez Angular CLI. Sama konfiguracja service workera nie ogranicza nas jednak tak naprawdę do użycia jakiegoś frameworka JavaScript, typu React czy Angular. Aby zacząć konfigurację, wystarczy właściwie strona WWW z JavaScript.

PWA – czy warto?

Ponad połowa internautów w Polsce przegląda strony WWW za pomocą urządzeń mobilnych, a posiadanie responsywnej, szybko ładującej się strony to obecnie być albo nie być w e-commerce. Wykorzystanie technologii Progressive Web Application sprawia, że roboty indeksujące Google’a spoglądają na taką stronę przychylniejszym okiem, przekłada się też na konkretne rezultaty – w niektórych przypadkach PWA pozwoliła podnieść współczynnik konwersji o 75% czy też obniżyć współczynnik odrzuceń o ok. 40%.

PWA – narzędzia dla developera

Istnieją liczne strony takie jak https://whatwebcando.today/, które zapewniają wsparcie dla developerów. W prosty sposób można uzyskać dostęp do komponentów poprzez JavaScript i service workera. Warto tutaj wspomnieć, że pełne wsparcie komponentów posiada jedynie Google Chrome na systemie Android. Niestety, iPhone z Safari ogranicza nas w niektórych miejscach. Wsparcie komponentów tak dynamicznie się zmienia, że nie warto tutaj poruszać różnic między przeglądarkami. W pierwszej części artykułu postaram się wytłumaczyć, jak w pełni skonfigurować oraz przetestować naszą aplikację. W dalszej części skupię się na innych komponentach, jak tryb offline, notyfikacje, geolokalizacja czy dostęp do plików.  Gotowi na przygodę z PWA? Zacznijmy!

Dodanie PWA do Angulara

Zaczynamy od zainstalowania aplikacji angularowej przez Angular CLI. Następnie należy wywołać komendę ng add @angular/pwa

Angular - PWA

Dzięki temu w naszym folderze zostaje dodanych kilka plików potrzebnych do uruchomienia PWA:

ngsw-config.json – plik konfiguracyjny, który pozwala na ustawienie reguł cache’owania danych. Więcej informacji o strategiach cache’owania można znaleźć tutaj: https://serviceworke.rs/caching-strategies.html

Angular PWA

Na konfiguracji tego pliku skupimy się w kolejnej części artykułu.

manifest.webmanifest – plik konfiguracyjny, który pozwala na ustawienie zachowania naszej aplikacji po zapisaniu przez użytkownika (orientacja, kolory, ikony).

PWA Angular

*.png – domyślne ikony, które będą wyświetlać się użytkownikowi po zapisaniu aplikacji na pulpicie ekranu.

Dodatkowo zostaną zaktualizowane pliki:

angular.json (ustawiona flaga ServiceWorker: true),

index.html – dodana linijka do wczytania manifestu,

app.module.ts

Angular screen PWA

Dzięki temu nasza aplikacja wie, że gdy uruchomimy ją w trybie produkcyjnym, service worker powinien zostać zarejestrowany do naszej przeglądarki.

Jak sprawdzić działanie PWA?

Niestety samo uruchomienie aplikacji przez Angular CLI nie pozwoli nam sprawdzić, czy service worker działa poprawnie. Możemy jednak w łatwy sposób to obejść, uruchamiając zbudowaną przez siebie aplikację lokalnie. Można to zrobić łatwo w dwóch krokach.

  1. Budujemy aplikację w trybie produkcyjnym: ng build –prod
  2. Uruchamiamy http-server (jeżeli nie mamy zainstalowanego lokalnie to najpierw: npm i http-server -g) komenda: http-server ./dist/pwa-test -o

Pamiętajmy, że po dist należy wprowadzić swoją nazwę aplikacji. Po wpisaniu komendy powinna uruchomić się nasza strona internetowa. Aby sprawdzić poprawność service workera i manifestu, użyjemy wbudowanych narzędzi w Google Chrome. Po uruchomieniu Developers Tools przechodzimy do zakładki Application.

Angular PWA

W menu bocznym Service Worker powinniśmy zobaczyć informację, że nasz service worker został odnaleziony i jest poprawnie zainstalowany.

W zakładce Manifest znajdziemy z kolei informację, czy domyślna konfiguracja (kolory, ikony oraz nazwa) jest zaimportowana poprawnie.

Angular PWA

Wszystkie te dane są zaczytywane z plików, które zostały wygenerowane przez Angular CLI po zbudowaniu aplikacji. Znajdują się one w folderze /dist/NazwaAplikacji.

Angular PWA

Dzięki pozytywnemu wgraniu manifestu oraz Service Workera nasza aplikacja pozwala na korzystanie w pełni z komponentów na urządzeniu mobilnym czy komputerze.

Mamy PWA – co dalej?

Dzięki domyślnej konfiguracji możemy jedynie zapisać naszą aplikację na telefonie czy komputerze. Aby to zrobić, na komputerze wystarczy kliknąć ikonę plusika obok adresu strony internetowej.

Angular PWA

Nazwa oraz ikona są pobierane z pliku manifest.

Po zapisaniu nasza strona internetowa będzie zachowywać się jak aplikacja, a użytkownik nie jest świadomy, że uruchamia stronę internetową w przeglądarce. Po uruchomieniu aplikacji (po zapisaniu) powinno nam się wyświetlić tak wyglądające okno:

Angular screen

Jak widać na zdjęciu, znikł cały górny pasek z adresem, dodatkami oraz zakładkami. Użytkownik nie jest świadomy, że aplikacja uruchomiła się w przeglądarce.

Udało nam się skonfigurować aplikację startową w Angularze, tak aby zachowywała się jak Progressive Web Application. Użytkownik korzystający z naszej strony może na razie jedynie ją zapisać. W kolejnych krokach możemy dodać trochę kodu do naszej aplikacji, tak aby poinformować użytkownika o nowych wersjach naszej strony czy umożliwić korzystanie z niej w trybie offline. W kolejnych artykułach rozwinę temat PWA, pisząc o tym, jak rozwinąć naszą nowo powstałą aplikację o nowe funkcjonalności.

Podsumowanie

Stworzenie i konfiguracja PWA nie są trudne. W sieci pojawia się coraz więcej publikacji o możliwościach technologii, która już teraz jest nazywana frontendową rewolucją. Nic dziwnego – Progressive Web Application pozwała w łatwy sposób stworzyć przyjazną i szybko ładującą się stronę. Dla developerów to sygnał, że wykorzystując technologię PWA, wdrażają rozwiązanie, które przyniesie konkretne, mierzalne rezultaty.

Autorem wpisu jest:
Michał Wójcik

Front-End Developer od 10 lat, a od ponad dwóch lat współpracuje z JCommerce. Prywatnie miłośnik gier planszowych oraz spontanicznych wyjazdów za granicę.

Dodaj komentarz

Komentarze:

Skontaktuj się z nami

Chcesz dowiedzieć się więcej o naszych usługach? Napisz do nas – odpowiemy na każdą wiadomość.

Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma, w celach handlowych.
Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma, w celach marketingowych.
Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma w celach rekrutacyjnych.
Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma na potrzeby przyszłych rekrutacji.
W związku z obowiązującymi przepisami dotyczącymi ochrony danych osobowych tj. Ustawą o ochronie danych osobowych z dnia 10 maja 2018 roku, jak również treścią Rozporządzenia Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (RODO), informujemy, że: 1. Administratorem danych osobowych jest JCommerce Sp. z o.o. z siedzibą w Katowicach, ul. Ściegiennego 3, 40-114 Katowice (KRS: 00007393418).
2. Powyższe dane osobowe przetwarzane będą przez JCommerce Sp. z o.o. – w zależności od udzielonych przez Panią/Pana zgód (podstawa prawna przetwarzania: art. 6 ust. 1 pkt a) RODO):
• w celach handlowych,
• w celach marketingowych,
• w celach rekrutacyjnych;
• w celach przyszłych rekrutacji.
3. Podanie powyższych danych osobowych nie jest wymogiem ustawowym, umownym lub warunkiem zawarcia umowy. Nie jest Pan/Pani zobowiązany/a do podania powyższych danych osobowych, jednak brak ich podania uniemożliwi realizacje ww. celu.
4. Posiada Pan/ Pani prawo dostępu do treści swoich danych, w tym otrzymania ich kopii i ich sprostowania, usunięcia, ograniczenia przetwarzania, prawo do przenoszenia danych, prawo do sprzeciwu wobec przetwarzania, prawo do cofnięcia zgody w dowolnym momencie, jeśli została udzielona. Wycofanie zgody nie wpływa jednak na zgodność z prawem przetwarzania, którego dokonano na podstawie zgody przed jej wycofaniem; oświadczenie o cofnięciu zgody na przetwarzanie danych osobowych należy złożyć w siedzibie JCommerce Sp. z o.o. lub przesłać na adres mailowy zgody@jcommerce.pl. Cofnięcie zgody na przetwarzanie danych osobowych skutkuje brakiem możliwości realizacji ww. celów przetwarzania;
5. Dane osobowe są udostępniane przez JCommerce Sp. z o.o. upoważnionym pracownikom i osobom współpracującym z JCommerce Sp. z o.o. na podstawie umów cywilnoprawnych, przez których realizowany jest cel przetwarzania;
6. Wszelkie pytania dotyczące ochrony danych osobowych oraz realizacje przysługujących praw, prosimy kierować na adres odo@jcommerce.pl;
7. W zależności od udzielonej zgody, dane osobowe będą przetwarzane przez czas niezbędny do realizacji ww. celów przetwarzania. W przypadku wniesienia sprzeciwu, JCommerce Sp. z o.o. przestanie przetwarzać Pani/Pana dane w ww. celu, chyba że będzie w stanie wykazać, że w stosunku do tych danych istnieją ważne prawnie uzasadnione podstawy, które są nadrzędne wobec Pana/Pani interesów, praw i wolności, lub niezbędne do ewentualnego ustalenia, dochodzenia lub obrony roszczeń;
8. Nie przekazujemy Pani/Pana danych poza teren Europejskiego Obszaru Gospodarczego oraz do organizacji międzynarodowych.
9. Pani/Pana dane osobowe nie podlegają zautomatyzowanemu podejmowaniu decyzji, w tym profilowaniu.
10. Ma Pani/Pan prawo wniesienia skargi do organu nadzorczego gdy uzna Pan/Pani, iż przetwarzanie ww. danych osobowych narusza przepisy ogólnego rozporządzenia o ochronie danych osobowych z dnia 27 kwietnia 2016 r.
Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma, w celach handlowych.
Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma, w celach marketingowych.
Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma w celach rekrutacyjnych.
Niniejszym wyrażam zgodę na przetwarzanie przez JCommerce Sp. z o.o. moich danych osobowych (dalej „dane osobowe”), takich jak: imię i nazwisko, adres e-mail, nr telefonu, firma na potrzeby przyszłych rekrutacji.
W związku z obowiązującymi przepisami dotyczącymi ochrony danych osobowych tj. Ustawą o ochronie danych osobowych z dnia 10 maja 2018 roku, jak również treścią Rozporządzenia Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (RODO), informujemy, że: 1. Administratorem danych osobowych jest JCommerce Sp. z o.o. z siedzibą w Katowicach, ul. Ściegiennego 3, 40-114 Katowice (KRS: 00007393418).
2. Powyższe dane osobowe przetwarzane będą przez JCommerce Sp. z o.o. – w zależności od udzielonych przez Panią/Pana zgód (podstawa prawna przetwarzania: art. 6 ust. 1 pkt a) RODO):
• w celach handlowych,
• w celach marketingowych,
• w celach rekrutacyjnych;
• w celach przyszłych rekrutacji.
3. Podanie powyższych danych osobowych nie jest wymogiem ustawowym, umownym lub warunkiem zawarcia umowy. Nie jest Pan/Pani zobowiązany/a do podania powyższych danych osobowych, jednak brak ich podania uniemożliwi realizacje ww. celu.
4. Posiada Pan/ Pani prawo dostępu do treści swoich danych, w tym otrzymania ich kopii i ich sprostowania, usunięcia, ograniczenia przetwarzania, prawo do przenoszenia danych, prawo do sprzeciwu wobec przetwarzania, prawo do cofnięcia zgody w dowolnym momencie, jeśli została udzielona. Wycofanie zgody nie wpływa jednak na zgodność z prawem przetwarzania, którego dokonano na podstawie zgody przed jej wycofaniem; oświadczenie o cofnięciu zgody na przetwarzanie danych osobowych należy złożyć w siedzibie JCommerce Sp. z o.o. lub przesłać na adres mailowy zgody@jcommerce.pl. Cofnięcie zgody na przetwarzanie danych osobowych skutkuje brakiem możliwości realizacji ww. celów przetwarzania;
5. Dane osobowe są udostępniane przez JCommerce Sp. z o.o. upoważnionym pracownikom i osobom współpracującym z JCommerce Sp. z o.o. na podstawie umów cywilnoprawnych, przez których realizowany jest cel przetwarzania;
6. Wszelkie pytania dotyczące ochrony danych osobowych oraz realizacje przysługujących praw, prosimy kierować na adres odo@jcommerce.pl;
7. W zależności od udzielonej zgody, dane osobowe będą przetwarzane przez czas niezbędny do realizacji ww. celów przetwarzania. W przypadku wniesienia sprzeciwu, JCommerce Sp. z o.o. przestanie przetwarzać Pani/Pana dane w ww. celu, chyba że będzie w stanie wykazać, że w stosunku do tych danych istnieją ważne prawnie uzasadnione podstawy, które są nadrzędne wobec Pana/Pani interesów, praw i wolności, lub niezbędne do ewentualnego ustalenia, dochodzenia lub obrony roszczeń;
8. Nie przekazujemy Pani/Pana danych poza teren Europejskiego Obszaru Gospodarczego oraz do organizacji międzynarodowych.
9. Pani/Pana dane osobowe nie podlegają zautomatyzowanemu podejmowaniu decyzji, w tym profilowaniu.
10. Ma Pani/Pan prawo wniesienia skargi do organu nadzorczego gdy uzna Pan/Pani, iż przetwarzanie ww. danych osobowych narusza przepisy ogólnego rozporządzenia o ochronie danych osobowych z dnia 27 kwietnia 2016 r.