Progressive Web Apps w 5 krokach – poradnik.

PWA to stosunkowo nowa technologia, kt贸ra zyskuje szybko coraz wi臋cej zwolennik贸w. Dzi臋ki niej mo偶esz nie tylko zmieni膰 Tw贸j sklep w aplikacj臋, ale te偶 spowodowa膰, 偶eby dzia艂a艂 offline! Zobacz, czym s膮 Progressive Web Apps i wykorzystaj ten rodzaj aplikacji w Twoim sklepie.

Niedawno pisali艣my o headless, jako o nowoczesnej technologii pozwalaj膮cej na oddzielenie sekcji frontendowej od backendowej. Dostosowanie aplikacji do tego podej艣cia wymaga du偶o pracy, poniewa偶 zasadniczo zmieniamy architektur臋 danego rozwi膮zania. Jednak Progressive Web Apps jest czym艣, co znacznie 艂atwiej mo偶na uzyska膰, a jednocze艣nie rozwi膮zaniem, kt贸re gwarantuje 艣wietne mo偶liwo艣ci.

Co to jest Progressive Web Apps?

PWA to poj臋cie, kt贸re powsta艂o w 2015 roku. Autorem tej nazwy jest Alex Russel 鈥 deweloper pracuj膮cy dla Google鈥檃. W 2015 roku napisa艂 artyku艂, kt贸ry mo偶na cz臋艣ciowo uzna膰 za manifest tego, czym jest Progressive Web Apps. Opisa艂 technologi臋, kt贸ra ju偶 istnia艂a 鈥 zebra艂 w jednym miejscu kilka za艂o偶e艅, kt贸re spe艂nia艂y strony, kt贸re stosowa艂y t臋 technologi臋 i przede wszystkim nazwa艂 je.

Czym jest wi臋c Progressive Web App? Jest to strona, kt贸ra spe艂nia wi臋kszo艣膰 z wyznacznik贸w PWA okre艣lonych przez Google鈥檃. Strona, 偶eby by膰 zakwalifikowana, jako PWA, musi spe艂ni膰 wi臋kszo艣膰 wymaga艅 zawartych poni偶ej:

  1. Strona musi by膰 obs艂ugiwana przez HTTPS;
  2. Musi by膰 responsywna (tj. dobrze si臋 wy艣wietla膰 na tabletach i smartfonach);
  3. Strona (aplikacja) powinna pokazywa膰 jakie艣 tre艣ci offline;
  4. Posiada plik Web App Manifest;
  5. Pierwsze 艂adowanie strony powinno by膰 szybkie, nawet przy s艂abym po艂膮czeniu (np. internecie 3G);
  6. Strona powinna by膰 przetestowana na r贸偶nych przegl膮darkach;
  7. Przej艣cia mi臋dzy stronami powinny by膰 szybkie i przypominaj膮ce aplikacje mobilne;
  8. Ka偶da podstrona powinna mie膰 osobny url.

Zwr贸膰cie uwag臋, 偶e nie napisali艣my, 偶e musi spe艂nia膰 wszystkie. Musi spe艂nia膰 ich wi臋kszo艣膰. W pewnym sensie jest to wi臋c spektrum, gdzie nasza strona, mo偶e by膰 bli偶ej albo dalej od bycia PWA. Poza 8 g艂贸wnymi za艂o偶eniami Google ma te偶 znacznie wi臋cej sugestii dla stron d膮偶膮cych do bycia Progressive Web Apps.

Progressive Web App, a dzia艂anie offline

Kiedy czyta艂e艣 powy偶sz膮 list臋, zapewne najciekawsze wyda艂o Ci si臋 dzia艂anie systemu offline. Rzeczywi艣cie 鈥 w dzisiejszych czasach strony mog膮 dzia艂a膰 bez obecno艣ci internetu. A przynajmniej cz臋艣ciowo.

Aplikacje PWA wykorzystuj膮 narz臋dzie, kt贸re si臋 nazywa Service Worker oraz nasz膮 przegl膮dark臋, do przechowywania znacznej ilo艣ci danych. Dodatkowo obecnie przegl膮darki s膮 w stanie przelicza膰 znaczn膮 liczb臋 danych, o kt贸re wcze艣niej trzeba by艂o pyta膰 serwer. Strony PWA podczas pierwszego wej艣cia cache鈥檜j膮 wi臋c du偶o informacji i przy ka偶dym kolejnym wej艣ciu pozwalaj膮 na pobranie tych tre艣ci z przegl膮darki. Dzieje si臋 tak w przypadku kiedy sie膰 nie jest dost臋pna albo ma gorsz膮 jako艣膰.

Co to pozwala osi膮gn膮膰? No c贸偶 鈥 strony na kt贸rych ju偶 byli艣my, mog膮 dzia艂a膰 w pe艂ni. Strony, na kt贸rych nie byli艣my (np. karty produktu), mog膮 posiada膰 ju偶 niekt贸re informacje, ale zamiast zdj臋cia posiada膰 wype艂nienie. Wreszcie niekt贸re systemy potrafi膮 umo偶liwi膰 z艂o偶enie zam贸wienia nawet bez dost臋pu do sieci (formalnie sk艂adane jest ono w momencie uzyskania po艂膮czenia). 呕eby zobaczy膰 taki sklep w akcji, warto zapozna膰 si臋 z Polymer Project 鈥 trzeba wej艣膰 na t臋 stron臋, odrobin臋 eksplorowa膰, a nast臋pnie wy艂膮czy膰 internet i zobaczy膰 co si臋 dalej dzieje.

Stworzenie “pseudo” aplikacji

Jednym z punkt贸w PWA jest tzw. manifest. W tym pliku deklaruje si臋 r贸偶ne elementy dotycz膮ce naszej aplikacji, mi臋dzy innymi to, czy nie chcemy, 偶eby by艂a ona dost臋pna, jako aplikacja na telefonie. W praktyce wygl膮da to nast臋puj膮co: Wchodzimy na stron臋, aplikacja pyta nas, czy chcemy doda膰 j膮 na naszym pulpicie, a po zaakceptowaniu pojawia si臋 u nas na smartfonie ikonka sklepu. Ikonka mo偶e nas przenosi膰 do specjalnej wersji strony mobilnej, m.in. z pomini臋ciem wszystkich g贸rnych/dolnych element贸w przegl膮darki (np. paska url). Dzi臋ki temu nasz sklep ma 100% uwagi naszych u偶ytkownik贸w.

W manife艣cie mo偶na zadeklarowa膰 jak ma w艂膮cza膰 si臋 nasza aplikacja (np. w pionie czy w poziomie, jak膮 ma mie膰 ikonk臋, jakie ma mie膰 t艂o, czy ma si臋 otwiera膰 w przegl膮darce).

Najwi臋ksz膮 zmian臋 niesie to dla producent贸w aplikacji mobilnych. Nie ma ju偶 potrzeby anga偶owania dw贸ch zespo艂贸w programist贸w (do technologii iOS i Android). Nie ma te偶 potrzeby wydawania kolejnych funduszy na aplikacj臋 mobiln膮. Strona zbudowana w tym podej艣ciu przychodzi razem z ni膮.

Ciekawostk膮 jest te偶 艂atwo艣膰 aktualizacji. W przypadku aplikacji tradycyjnej u偶ytkownik musi pobra膰 uaktualnienie, aplikacj臋 PWA wystarczy jednak w艂膮czy膰. Je偶eli tylko b臋dzie po艂膮czenie z internetem 鈥 pobierze najnowsz膮 wersj臋.

Anga偶uj膮ce aplikacje

W rozumieniu Google鈥檃 aplikacja PWA powinna spe艂nia膰 3 za艂o偶enia. By膰 dost臋pna, szybka i anga偶uj膮ca. Ostatni punkt dotyczy nie tylko za艂o偶enia, 偶e strona powinna otwiera膰 si臋 w pe艂ni rozwini臋tym oknie, mie膰 zwinne i ciekawe dla u偶ytkownika animacje, ale te偶 dotyczy to anga偶owania u偶ytkownik贸w na tyle, 偶eby wracali do naszej witryny.

Z pomoc膮 przychodz膮 nam powiadomienia push. Dzi臋ki PWA mo偶emy powiadomi膰 naszych u偶ytkownik贸w o nowej promocji, artykule, opuszczonym koszyku lub czymkolwiek innym, co przywr贸ci jego zainteresowanie. Powiadomienia push s膮 dost臋pne ju偶 w du偶ej cz臋艣ci przegl膮darek (m.in. Firefox czy Chrome) i s膮 kolejnym kana艂em dotarcia do Klienta. S膮 troch臋 jak wys艂anie mailingu, tylko z mniejsz膮 ilo艣ci膮 tekstu.

Czy warto stosowa膰 Progressive Web Apps?

Czy warto stosowa膰 PWA?Odpowiadaj膮c bardzo kr贸tko 鈥 warto. Jest to podej艣cie ewidentnie kierowane do urz膮dze艅 mobilnych, kt贸re obecnie zaczynaj膮 by膰 popularniejsze od desktopowych. Co wi臋cej, jest to podej艣cie, kt贸re za cel stawia sobie bezpiecze艅stwo i szybko艣膰 dzia艂ania, a tak偶e 艂atwo艣膰 u偶ytkowania 鈥 cechy stron, kt贸re ceni膮 sobie zar贸wno Google, jak i u偶ytkownicy.

Wdro偶e艅 opartych na PWA nie ma jeszcze zbyt du偶o, jednak te, kt贸re ju偶 to zrobi艂y, mog膮 pochwali膰 si臋 zazwyczaj dobrymi wynikami. M.in. jest to AliExpress, kt贸re po wdro偶eniu PWA zwi臋kszy艂o 艣redni膮 konwersj臋 o 104%, a 82% dla samych urz膮dze艅 system贸w iOS. Jest to te偶 Forbes, kt贸ry po wprowadzeniu Progressive Web Apps zwi臋kszy艂 liczb臋 sesji per u偶ytkownik o 43%. Jest to te偶 Housing.com. OLX. Twitter. Ca艂kiem sensowne portfolio.

G艂贸wne problemy

G艂贸wnymi problemami wydaj膮 si臋 by膰 dwie rzeczy. Po pierwsze 鈥 nie wszystkie przegl膮darki wspieraj膮 PWA. Na szcz臋艣cie Safari ju偶 do艂膮czy艂a, przynajmniej cz臋艣ciowo, do gry w okolicach marca 2018, jednak dalej nie wszystkie przegl膮darki wspieraj膮 wszystkie funkcje. Po drugie, pod niekt贸rymi wzgl臋dami tradycyjne aplikacje dalej wygrywaj膮 鈥 potrafi膮 czerpa膰 mniej baterii, a co wi臋cej 鈥 maj膮 dost臋p do niekt贸rych funkcji telefonu, kt贸rych PWA nie mo偶e wykorzysta膰 (np. Bluetooth czy NFC).

Mamy nadziej臋, 偶e artyku艂 zainteresowa艂 Ci臋 i masz ju偶 lepsze zrozumienie, czym jest Progressive Web Apps i jakie przewagi daje to podej艣cie. Czy widzisz zastosowanie w Twoim sklepie?

[x]

Ta strona u偶ywa cookies

Wyra偶am zgod臋 na przetwarzanie moich danych osobowych zawartych w plikach cookies (zar贸wno sesyjnych jak i trwa艂ych) przez Orba sp. z o.o. z siedzib膮 w Warszawie, w celu dostosowania tre艣ci strony internetowej do moich preferencji, optymalizacji korzystania ze stron internetowych, tworzenia anonimowych statystyk, kt贸re umo偶liwiaj膮 zrozumienie sposobu korzystania u偶ytkownika ze stron internetowych.

Akceptuj臋