Prawdziwa rozmowa: PWA dla e-commerce i wyzwania budowania jednego

W 2016 r. handel elektroniczny osiągnął kamień milowy: urządzenia mobilne wyprzedziły komputery stacjonarne i laptopy jako najpopularniejszy sposób przeglądania Internetu.

Sklepy internetowe nie mogły już dłużej traktować swoich mobilnych użytkowników po namyśle. Teraz doświadczenie mobilne jest najważniejszym aspektem witryn e-commerce.

Sklepy internetowe zareagowały na tę zmianę, czyniąc swoje witryny responsywnymi, co oznacza, że ​​automatycznie dostosowują się do mniejszych ekranów urządzeń mobilnych.

Wiele sklepów opracowało również własne aplikacje natywne na urządzenia mobilne, ponieważ aplikacje natywne mają funkcjonalność offline i są szybsze niż witryny responsywne. Szybkość jest szczególnie ważna dla doświadczenia mobilnego — według Google 53% użytkowników mobilnych opuści stronę, jeśli ładowanie potrwa dłużej niż trzy sekundy.

Kolejna zaleta aplikacji natywnych? Użytkownicy mogą zainstalować dla nich ikonę na ekranie głównym, dzięki czemu Twoja marka będzie zawsze świeża i będzie generować większą sprzedaż w Twoim sklepie.

Ale natywne aplikacje również mają problemy. Po pierwsze, są niewygodne. Użytkownicy muszą je wyszukać na platformie dystrybucyjnej, takiej jak Apple App Store lub Google Play, a następnie pobrać, aby z nich korzystać.

Co to jest PWA?

Rozwiązaniem tych problemów są progresywne aplikacje internetowe (PWA).

Aplikacje PWA działają jako połączenie responsywnych witryn i aplikacji natywnych. Jak natywna aplikacja, są szybkie, działają w trybie offline i można je skonfigurować jako ikonę na ekranie głównym. Ale w przeciwieństwie do aplikacji natywnej nie trzeba ich pobierać ze sklepu z aplikacjami. Dostęp do aplikacji PWA można uzyskać, klikając łącze lub wprowadzając adres URL w pasku adresu przeglądarki, tak jak w przypadku każdej innej witryny.

Chcesz zrobić PWA dla swojego sklepu internetowego? Należy mieć świadomość, że jest to bardzo złożony i kosztowny proces, który wymaga koordynacji między zespołami inżynierskimi i wieloma dostawcami technologii. Koszty początkowe mogą wynosić od 250 000 do ponad 1 000 000 USD w zależności od złożoności kompilacji oraz dodatkowe 3000 do 10 000 USD w miesięcznych opłatach za subskrypcję w zależności od dostawców.

Poniżej opiszemy wszystko, co jest wymagane do stworzenia PWA.

Technologie wymagane do tworzenia aplikacji PWA

Biorąc pod uwagę zaawansowane możliwości PWA, nie powinno dziwić, że ich opracowanie może być trudne i czasochłonne. W proces zaangażowanych jest wiele różnych technologii, a sprzedawcy e-commerce muszą znaleźć ekspertów dla każdej z tych technologii i często muszą zatrudniać wielu dostawców, aby zbudować swoje PWA.

W szczególności następujące osiem technologii stanowi podstawę PWA:

1. Bezgłowy PIM/OMS

Każdy sklep internetowy potrzebuje systemu zarządzania informacją o produktach (PIM) lub systemu zarządzania zamówieniami (OMS). Służy jako zaplecze Twojej witryny, umożliwiając edycję aukcji i śledzenie zapasów, zamówień i wysyłek w czasie rzeczywistym.

Aby utworzyć PWA, Twój PIM lub OMS również musi być bezgłowy, co oznacza, że ​​możesz podłączyć go do oddzielnego systemu, aby zapewnić sobie interfejs użytkownika/interfejs.

Na szczęście popularne platformy PIM i OMS zainwestowały w dostosowanie swoich systemów do handlu bezgłowego. Shopify, BigCommerce i Magento mają solidne interfejsy programowania aplikacji (API), które umożliwiają połączenie ich technologii z innym systemem.

2. Warstwa oprogramowania pośredniego

Warstwa oprogramowania pośredniego jest potrzebna do przesyłania danych z zaplecza e-commerce do frontonu sklepu i na odwrót.

Interfejsy API dostarczane przez Shopify, BigCommerce itp. to zasadniczo zarysy, które informują programistów, jak zintegrować swoją platformę z inną. Middleware to oprogramowanie współpracujące z interfejsem API w celu ułatwienia komunikacji między dwiema platformami.

3. CDN

Jak wspomniano powyżej, szybkość jest wszystkim, jeśli chodzi o PWA. Użytkownicy mobilni po prostu nie będą tolerować słabej wydajności.

Odległość fizyczna odgrywa kluczową rolę w szybkości witryny. Im dalej użytkownik znajduje się od jednego z Twoich serwerów, tym dłużej trwa ładowanie elementów w Twojej witrynie.

Sieci dostarczania treści (CDN), takie jak Fastly, obsługują dziesiątki serwerów i centrów danych, które są rozmieszczone na całym świecie. Właściciele sklepów mogą uzyskać dostęp do infrastruktury CDN, aby poprawić szybkość swojej witryny w zamian za cykliczną opłatę.

4. SSR

Renderowanie po stronie serwera (SSR) to kolejna technika używana do poprawy wydajności programów PWA.

Dzięki SSR strony są w pełni renderowane na serwerze, a następnie wysyłane do przeglądarki użytkownika, co skutkuje szybszym czasem ładowania strony i lepszym komfortem użytkowania.

SSR ma również zalety optymalizacji pod kątem wyszukiwarek (SEO). Wyszukiwarki nie są w stanie skutecznie indeksować aplikacji, które renderują się w przeglądarce użytkownika (jest to również znane jako renderowanie po stronie klienta lub CSR), ale nie mają problemu z SSR. Krótkie czasy ładowania pomagają również SEO, ponieważ zachęca odwiedzających do pozostania w Twojej witrynie zamiast wycofywania się. Zwiększenie średniej ilości czasu, jaką ludzie spędzają w Twojej witrynie, poprawi Twoją pozycję w rankingach wyszukiwania.

Nie da się przecenić znaczenia SEO. Czterdzieści trzy procent ruchu w witrynach e-commerce pochodzi z bezpłatnych wyników wyszukiwania — to znacznie więcej niż jakiekolwiek inne źródło. W rzeczywistości jest to więcej niż ruch bezpośredni (20%), płatne reklamy w wyszukiwarce (18%) i marketing e-mailowy (4%) łącznie.

Bez wysokich pozycji w wynikach wyszukiwania Twój sklep może nie otrzymać takiego ruchu, jaki jest potrzebny do przetrwania. SSR zwiększy Twoją prędkość, poprawi rankingi wyszukiwania i zwiększy ruch w Twoim sklepie.

5. Pracownik serwisu

Service Worker to skrypt, który tworzy pamięć podręczną, a następnie w razie potrzeby pobiera zasoby z tej pamięci podręcznej. Działa w tle przeglądarki, niezależnie od strony — w ten sposób PWA mogą działać, nawet gdy nie ma połączenia z Internetem.

6. Powłoka aplikacji

Pamięć podręczna utworzona przez Service Worker umożliwia również korzystanie z powłoki aplikacji, która jest minimalnym kodem wymaganym dla interfejsu użytkownika PWA. Powłoka aplikacji przyspiesza PWA, ponieważ przechowuje zawartość statyczną w pamięci podręcznej i jest gotowa, więc wystarczy załadować tylko zawartość dynamiczną.

7. Manifest aplikacji internetowej

Aby przeglądarka wiedziała, co zrobić, gdy użytkownik kliknie ikonę ekranu głównego aplikacji PWA, potrzebna jest pewna ilość informacji. Manifest aplikacji sieci Web zawiera te informacje, w tym link do obrazu ikony aplikacji PWA, a także link do samego programu PWA.

8. Witryna sklepowa

Na koniec musisz napisać niestandardowy kod sklepu przy użyciu frameworka React lub Vue dla swojego PWA. To tutaj użytkownicy faktycznie wchodzą w interakcję z Twoją witryną, co sprawia, że ​​jej opracowanie jest szczególnie ważne, czasochłonne i kosztowne.

Po prostu nie możesz pozwolić sobie na oszczędzanie na tym aspekcie swojej aplikacji. Nieatrakcyjny lub trudny w nawigacji projekt spowoduje, że stracisz potencjalną sprzedaż i odciągnie odwiedzających do konkurencji.

Dolna linia

Tradycyjna metoda tworzenia aplikacji PWA może być niewykonalna dla małych i średnich firm.

Aby to zrobić we własnym zakresie, musiałbyś zapłacić za dużo więcej godzin pracy od swoich programistów. Ponadto twoi obecni programiści mogą nie mieć umiejętności wymaganych do zbudowania PWA. W takim przypadku musisz dodać do listy płac nowych, wysoko wykwalifikowanych pracowników. Czy możesz sobie na to pozwolić?

Inną opcją jest zlecanie niektórych lub wszystkich tych zadań programistycznych zewnętrznym dostawcom. Ale znowu, to spory wydatek. Oprócz kosztów stworzenia aplikacji PWA musisz wziąć pod uwagę, że z czasem będziesz musiał płacić za dużo konserwacji i zarządzania.

Nie da się tego obejść — opracowanie PWA w tradycyjny sposób naprawdę by Cię kosztowało.

Adam Ritchie jest niezależnym pisarzem mieszkającym w Silver Spring w stanie Maryland. Obecnie pisze dla Shogun, a jego poprzedni klienci to Groupon, Clutch i New Theory.