Blog

24.06.2019
Aktualizacje

Jak działa sklep online PWA? Sprawdź u nas!

Jak działa sklep online PWA? Sprawdź u nas!

PWA, czyli Progressive Web Apps to nadchodząca rewolucja w e-commerce. Nie wiesz, jak będą działać sklepy w technologii PWA? U nas możesz już to sprawdzić.

 

Dziś liczy się szybkość - ładowania się strony, przesyłu informacji, połączenia internetowego. Rośnie też znaczenie smartfonów, których używamy do sprawdzania informacji i załatwiania codziennych spraw. W zasadzie 60% działań w internecie odbywa się dziś na telefonach komórkowych. Korzystając z internetu na smartfonach łapiemy się jednak na tym, że często musimy czekać na załadowanie się strony. Jeżeli nie załaduje się w kilka sekund - opuszczamy ją. Dotyczy to zarówno Onetu, Twojego sklepu internetowego jak i porównywarki hoteli.


Być może dlatego m.in. Washington Post, OLX i Trivago zdecydowały się na uruchomienie swojej witryny jako PWA - strony internetowej, która działa jak aplikacja.

 

Czym jest i jak działa PWA?


Wiesz czym jest technologia PWA? Przejdź tutaj i zobacz, jak może wyglądać Twój sklep jako aplikacja na desktopie i smartfonie.


Jeżeli korzystasz z WhatsApp lub Facebook Messenger na telefonie, wiesz, że nawet w razie braku internetu jesteś w stanie otworzyć aplikację, przeczytać poprzednie konwersacje i napisać nową wiadomość. Zostanie ona wysłana automatycznie, gdy smartfon znowu połączy się z siecią.

 

Gdy otworzysz przeglądarkę bez dostępu do internetu, nie wyświetlą się żadne treści. Są też aplikacje mobilne, które otworzysz i również nie masz dostępu do żadnych akcji (np. linie lotnicze, zakupy itp.). Czyli w zasadzie nie ma z nich żadnego pożytku.

 

PWA łączy w sobie najelpsze rozwiązania webowe i mobilne. Jest stroną internetową, którą można zainstalować jak aplikację mobilną, ale zajmuje bardzo mało miejsca i dodatkowo działa offline.

 

PWA określa się jako technologię hybrydową. Jakie ma cechy?

Jest niezawodna. Musi działać nawet, gdy tracimy dostęp do sieci. Część treści aplikacji zostaje zapamiętana w pamięci podręcznej, dzięki czemu zawartość ładuje się, a działania synchronizują się, gdy telefon znowu połączy się z internetem. Dzięki temu nie stracimy np. zapisanego koszyka. Aplikacje mają się szybko ładować nawet przy bardzo wolnym połączeniu 2G.

 

Jest niezależna. Nie potrzebuje przeglądarki, a dodatkowo musi działać na każdym urządzeniu.

 

Jest responsywna. Musi dobrze wyglądać na każdym urządzeniu i szybko się wczytywać.

 

Jest szybka i łatwa w instalacji. Plik instalacyjny jak i sama aplikacja są bardzo lekkie. Dla porównania aplikacja mobilna Rossmann zajmuje 24,3 MB. Aby ją zainstalować należy wejść do sklepu Google lub Apple i pobrać. Instalacja trwa od 1-2 minut. Aplikację progresywną pobieramy z przeglądarki, instalacja trwa kilka sekund. PWA AtomStore zajmuje tylko 254 kB pamięci.

 

Jest łatwa w dotarciu do użytkowników. Aplikacje PWA wykorzystują głównie powiadomienia PUSH. Pozwalają informować o zmianach i nowościach na stronie.

 

Dlaczego PWA jest naszą przyszłością?

Na początek zadajmy sobie pytanie - jak wygląda rynek aplikacji mobilnych i jak użytkownicy z nich korzystają. 90% akcji podejmowanych na smartfonie użytkownicy dokonują w aplikacjach (bankowych, społecznościowych, transportowych itp.). Mimo że na telefonie mamy nawet od 60 do 90 aplikacji, to korzystamy w zasadzie tylko z trzech - Facebook, Google Maps oraz YouTube. Poświęcamy im 77% calkowitego czasu spędzanego nad ekranem smartfonu. Dla innych nie zostaje już zbyt dużo miejsca.

 

Druga kwestia to fakt, że aplikację najpierw trzeba zainstalować na telefonie. Czy wiesz, że ponad 75% użytkowników włącza aplikację tylko raz, zaraz po jej ściągnięciu? I nigdy do niej nie wraca? Życie aplikacji bywa okrutnie krótkie. Ale aplikacje potrafią być pożeraczami pamięci i transferu danych, a w trybie offline i tak najczęściej nie działają. Dlatego klienci ich nie instalują.

 

PWA, które ma posiadać funkcje aplikacji natywnej, działać w trybie offline, zajmować bardzo mało miejsca w pamięci stanie się niedługo standardem w rozwiązaniach mobilnych. Warto dodać, że progresywne aplikacje mają duże wsparcie ze strony giganta - Google.

 

To e-commerce pierwszy zacznie wprowadzać PWA w życie użytkowników

Aplikacje zakupowe nie należą do najczęściej ściąganych ze sklepów Google/Apple. O ile w ogóle e-commerce’y posiadają aplikacje mobilne (oprócz największych brandów). PWA to szansa dla wielu sklepów online, które nie zdecydują się na aplikację mobilną. Ładowanie strony z listingiem potrwa o milisekundy. Załadowanie zdjęć, płynność i angażujące notyfikacje push oraz fakt, że aplikacja zakupowa może działać bez podłączenia do sieci i zapisać koszyk zakupowy, wpływają pozytywnie na doświadczenie użytkowników.

 

Jak będzie wyglądać PWA? Przetestuj na naszym demo

Od miesięcy pracujemy na progresywną wersją szablonu, która pozwoli naszym Klientom korzystać z możliwości PWA. Trudno znaleźć jednak e-commerce, który działa w tej technologii. Uruchomiliśmy aplikację, która oddaje idee PWA. Teraz sam możesz zobaczyć i poznać, co praktycznie kryje się pod Progressive Web Applications.

 

Jak włączyć PWA w AtomStore?

 

1. Załóż konto na https://www.atomstore.pl/popros-o-dostep. Jest bezpłatne i nie zobowiązuje Cię do niczego.

2. Zaloguj się do Panelu administratora demo. Przejdź do Ustawienia → Konfiguracja sklepu → Wygląd sklepu → PWA Tuning.

3. Włącz PWA Tuning, a następnie rozwiń listę.

4. W wersji demo dane są już uzupełnione. W wersji dla sklepów poniższe informacje należy przygotować.

5. Zapisz nowe ustawienia.

 




6. Wyloguj się z Panelu administratora i przejdź na stronę https://demo.atomstore.pl. Na desktopie przejdź do konfiguracji przeglądarki (w Chrome trzy kropki w prawym górnym rogu) i wybierz “Otwórz w aplikacji Demo AtomStore”. Na pulpicie pojawi się skrót “Demo AtomStore”.

 


 

7. Na smartfonie wejdź na https://demo.atomstore.pl. Na dole ekranu pojawi się komunikat, czy chcesz dodać aplikację do pulpitu. Wybierz tak, a następnie włącz demo AtomStore z pulpitu smartfona. Jeżeli komunikat się nie pojawił, wejdź w ikonę Ustawienia przeglądarki (trzy kropki w Chrome) i wybierz opcję "Dodaj do ekranu głównego". W przypadku iOS należy dodać je za pośrednictwem opcji Udostępnij → Dodaj do ekranu początkowego.

 

 

Możesz porównać działanie obu aplikacji na różnych urządzeniach - ich czas ładowania się, płynność czy wygodę. Na tym etapie aplikacja realizuje tylko część założeń technologii PWA. Testowane demo nie spełnia swoich funkcji w trybie offline (zawartość sklepu nie zostanie załadowana). W przyszłości ta opcja będzie dostępna.

 

O zmianach w wersji demo oraz uruchomieniu usługi przejścia na PWA dla sklepów online, będzie informować na bieżąco. Tymczasem, życzymy miłych testów :)

 

AtomStore to platforma e-commerce klasy premium. Tworzymy dedykowane sklepy internetowe oraz systemy B2B. Oferujemy kompleksowe wdrożenia od A do Z, sklepy mobilne w technologii responsive web design, integracje z programami Comarch Optima, XL, WF-Mag, Subiekt.
Wspólnie rozwiązujemy problemy polskiego e-handlu!

Znajdź nas na:

  • Blog
  • Facebook
  • Youtube
  • Linked in
  • iab