Zalety aplikacji jednostronicowych i progresywnych aplikacji internetowych: Usprawnianie CX

Korzyści płynące z aplikacji jednostronicowych stają się coraz bardziej oczywiste, ponieważ wrażenia klientów wymagają od dostawców handlu elektronicznego szybkich i niezawodnych interakcji z nimi.

W ciągu ostatnich 20 lat większość stron internetowych została zbudowana w ten sam sposób – z wykorzystaniem HTML, CSS i JavaScript. Technologie te z biegiem czasu stały się bardziej zaawansowane, ale zasada pozostała w dużej mierze taka sama: użytkownik wchodzi w interakcję ze stroną internetową, a przeglądarka użytkownika wywołuje serwer sieciowy, który z kolei odpowiada kolejną partią kodu HTML, CSS i JavaScript, który jest następnie ładowany i wyświetlany w przeglądarce.

(Uff, to dużo.)

Ten proces najczęściej obejmuje odświeżanie strony, chociaż niektóre technologie, takie jak AJAX, umożliwiają programistom zmianę niektórych treści bez odświeżania całej strony. Z tego powodu większość witryn działa i zachowuje się wyraźnie jak witryna internetowa, a nie aplikacja.

Większość stron internetowych ma również ściśle powiązaną warstwę zaplecza i prezentacji, co oznacza, że ​​nie ma rzeczywistego oddzielenia między frontem a tyłem witryny, ponieważ obie są częścią jednej monolitycznej aplikacji.

Jak aplikacje jednostronicowe i progresywne aplikacje internetowe mogą poprawić wrażenia klientów

W ciągu ostatniej dekady natywne aplikacje na iOS i Androida stały się powszechnym miejscem dla prawie nas wszystkich. Aplikacje te zachowują się inaczej niż rzeczywiste strony internetowe, zapewniając użytkownikom zupełnie inne i często bardziej satysfakcjonujące wrażenia.

Strony nie odświeżają się po naciśnięciu linku lub przycisku, zmiany ładują się znacznie szybciej, a wrażenia są często znacznie lepsze niż w przypadku analogicznej witryny mobilnej. W przypadku natywnej aplikacji e-commerce, gdy użytkownik kliknie link, aplikacja wykona połączenie z serwerem zaplecza, ale zamiast tego serwera zwracającego warstwę prezentacji HTML, CSS i JavaScript, jest to po prostu wysyłanie wymaganych surowych danych, a aplikacja zarządza sposobem ich wyświetlania użytkownikowi.

Na przykład, jeśli użytkownik kliknie produkt, aby wyświetlić jego szczegóły, aplikacja zadzwoni do serwera zaplecza, prosząc o szczegóły tego produktu, a serwer odpowie ciągiem danych zawierającym takie elementy, jak nazwa produktu, jego cenę i link do obrazu, ale nie trzeba również wysyłać kodu HTML, CSS ani JavaScript, aby określić sposób wyświetlania.

Sama aplikacja jest warstwą prezentacji, więc nie potrzebuje tego z serwera zaplecza. Jest to znacznie szybsze i pozwala aplikacji wyświetlić klientowi szczegóły produktu bez odświeżania strony. Technologia ta daje programistom swobodę budowania bezproblemowej i płynnej obsługi klienta bez ograniczeń tradycyjnego modelu.

Czy nie byłoby wspaniale, gdyby doświadczenie przypominające aplikację można było zapewnić za pośrednictwem przeglądarki internetowej, dzięki czemu rozróżnienie między aplikacją natywną a witryną internetową zacierałoby się?

Tu właśnie wkraczają aplikacje jednostronicowe (SPA) i progresywne aplikacje internetowe (PWA).

Co to jest aplikacja jednostronicowa?

SPA to aplikacja napisana w języku JavaScript, która działa w przeglądarce internetowej i generalnie nie wymaga odświeżania strony w celu wyświetlenia nowych informacji.

Gdy użytkownik po raz pierwszy odwiedza witrynę, aplikacja wraz z zasobami prezentacji (HTML, CSS i niektóre skrypty) są ładowane do przeglądarki. Od tego momentu użytkownik znajduje się na jednej stronie internetowej, a aplikacja ładuje odpowiednią treść i zmienia sposób wyświetlania w razie potrzeby.

Podobnie jak aplikacja natywna, gdy użytkownik kliknie łącze, aplikacja wywołuje serwer zaplecza, który z kolei wysyła wymagane dane w postaci ciągu, który zazwyczaj nie zawiera żadnych zasobów prezentacji, ponieważ zostały one już ładowane, gdy użytkownik po raz pierwszy odwiedził witrynę.

Ponieważ użytkownik jest zasadniczo tylko na jednej stronie internetowej, tak naprawdę nie ma koncepcji odświeżania strony. Zamiast tego aplikacja zmienia stronę, aby w razie potrzeby wyświetlać inne informacje.

SPA są na ogół całkowicie oddzielone od aplikacji zaplecza i interfejsów do zaplecza za pomocą zestawu interfejsów API. Często znajduje się na własnym serwerze i może być wdrażany osobno. W pewnym sensie jest dość agnostyczny w stosunku do aplikacji zaplecza, ponieważ po prostu wysyła i odbiera dane do iz niej – traktując ją jak system innej firmy.

Wszyscy używamy SPA już od jakiegoś czasu, prawdopodobnie nawet nie zdając sobie z tego sprawy. Facebook, Gmail, Twitter, LinkedIn i Instagram (między innymi) używają SPA zamiast swoich stron internetowych.

Jeśli odwiedzisz teraz którąś z tych witryn, zauważysz, że zachowują się one bardziej jak natywna aplikacja niż tradycyjna witryna. Strony rzadko, jeśli w ogóle, odświeżają się podczas interakcji z nimi i są bardzo szybkie. Klikanie łączy i przycisków zmienia oglądaną zawartość, ale elementy, takie jak nagłówek i stopka, prawie nigdy nie są odświeżane po początkowym załadowaniu.

Zalety aplikacji jednostronicowych

Największą i najbardziej oczywistą zaletą SPA jest to, jak można je wykorzystać do poprawy obsługi klienta, pozwalając projektantom i programistom zapewnić wrażenia podobne do aplikacji i nie ograniczać się do tradycyjnego podejścia polegającego na ponownym ładowaniu stron.

Wymaga to nowego sposobu projektowania i myślenia, ponieważ normalne zasady nie mają już zastosowania, ale korzyści dla doświadczenia użytkownika mogą być ogromne.

SPA zazwyczaj ładują zawartość znacznie szybciej niż standardowe witryny internetowe, ponieważ wiele zasobów prezentacji (HTML, CSS) jest ładowanych tylko raz. Interakcje z aplikacją wymagają jedynie wywołania serwera zaplecza w celu pobrania niewielkich ilości danych, a nie w pełni uformowanych stron HTML/CSS. Aplikacja może wtedy szybko wyświetlić zmienione dane bez konieczności ponownego ładowania strony.

Ponieważ SPA jest całkowicie oddzielone od aplikacji zaplecza, może być wdrażane osobno, co może mieć bardzo dużą zaletę. Mała zmiana front-endu nie będzie wymagała wdrożenia całej aplikacji, co może być dość dużym zadaniem i czasami wymaga przestoju.

Wady SPA

Jednym z największych wyzwań związanych z używaniem SPA jest wpływ, jaki ma na SEO. Ponieważ nie zawsze mają one tradycyjną strukturę odrębnych stron, z których każda ma odrębny adres URL, może to powodować problemy z indeksowaniem treści przez wyszukiwarki. Można temu jednak przeciwdziałać za pomocą technik, takich jak renderowanie po stronie serwera i zapewnienie, że kliknięcia generują unikalne adresy URL.

Z biegiem czasu staje się to również coraz mniej problemem, ponieważ boty wyszukiwarek są zmieniane, aby radzić sobie z SPA. W końcu Google jest jedną z firm, które je wspierają.

Niektóre SPA ładują się trochę podczas pierwszej wizyty, ponieważ zasoby aplikacji i prezentacji są ładowane przy pierwszym wyświetleniu strony.

Jest to bardzo zauważalne w przypadku SPA, takich jak Gmail, gdzie mają duży obraz ładowania podczas pierwszej wizyty na stronie. Problemowi temu można przeciwdziałać za pomocą renderowania po stronie serwera i wydajnego programowania, aby zapewnić, że początkowe obciążenie aplikacji i zasobów nie będzie zbyt duże.

Co to jest progresywna aplikacja internetowa?

PWA jest trochę trudne do zdefiniowania, ponieważ nie jest to jakaś konkretna technologia, ale bardziej metodologia tworzenia lub zbiór zasad, które razem sprawiają, że strona internetowa lub aplikacja jest mniej lub bardziej PWA.

Termin PWA został pierwotnie ukuty przez Google, który stworzył listę kontrolną, aby zdefiniować, co tworzy PWA. Między innymi Google określiło, że PWA musi być:

• Bezpieczny – obsługiwany pod https
• Responsywne – dopasuj do każdego formatu
• Możliwość pracy w trybie offline – wykorzystanie pracowników usług do buforowania stron
• Szybko – w stanie szybko się ładować na połączeniach 3G
• App-like – używanie trybu i wyglądu powłoki aplikacji, aby poczuć się jak aplikacja
• Instalowalna – użyj pliku manifestu, aby umożliwić dodanie aplikacji do ekranu głównego
• Angażowanie – za pomocą narzędzi takich jak powiadomienia push
• Progressive – działa we wszystkich przeglądarkach, ale jest coraz lepszy w nowoczesnych przeglądarkach

Jak widać, niektóre elementy listy kontrolnej są nieco niejasne lub subiektywne. Widać też, że niektóre z nich brzmią podobnie do SPA. Tradycyjną stronę HTML/CSS można przekształcić w PWA, podobnie jak SPA. SPA nie jest automatycznie PWA, ale ma pewne funkcje, które popychają go w tym kierunku.

Zdezorientowany?

Zalety PWA

Podobnie jak w przypadku SPA, jedną z największych zalet PWA jest poprawa obsługi klienta, nadając mu wrażenie aplikacji i wypełniając lukę między tradycyjną witryną mobilną a natywną aplikacją na iOS lub Androida.

Funkcje, takie jak możliwość zapisywania na ekranie głównym lub możliwość buforowania stron przez pracowników usług, mogą sprawić, że witryna będzie wyglądać trochę jak aplikacja natywna.

PWA są również bardzo szybkie, ponieważ jest to jedna z kluczowych zasad na liście kontrolnej.

System operacyjny Android daje przeglądarkom dostęp do sprzętu urządzenia mobilnego. co pozwala na takie rzeczy, jak powiadomienia push i korzystanie ze skanowania NFC, co może naprawdę poprawić CX.

Wady PWA

Największą wadą PWA jest brak wsparcia ze strony Apple. Aby jak najlepiej wykorzystać PWA, naprawdę musi działać na urządzeniu z Androidem, ponieważ system operacyjny Android daje przeglądarkom dostęp do znacznej liczby funkcji na urządzeniu, podczas gdy Apple poważnie to ogranicza. Powoli się to poprawia, ale przed nami jeszcze długa droga.

Kolejną wadą jest brak jasnej definicji, która może podlegać interpretacji.

SPA i PWA to przyszłość tworzenia stron internetowych

Chociaż ta technologia wciąż nie jest w pełni mainstreamowa dla większości witryn e-commerce, to niewątpliwie jest to przyszłość tworzenia witryn internetowych.

Podczas gdy SPA to specyficzna technologia, którą można wykorzystać do zbudowania aplikacji e-commerce, PWA to ogólnie strony internetowe zbudowane zgodnie z metodologią opracowaną przez Google, która ich zdaniem zapewnia najlepszą obsługę klienta.

Każdy, kto tworzy SPA, powinien starać się jak najlepiej spełnić listę kontrolną PWA, aby zapewnić jak najlepsze CX. Technologie te dają projektantom i programistom większą swobodę w doświadczeniu użytkownika i podróżach, umożliwiając im odejście od tradycyjnego modelu strona po stronie.

Wielu dostawców oprogramowania, takich jak SAP i IBM, intensywnie inwestuje w tworzenie frontendów SPA dla swoich platform e-commerce i podejrzewam, że w ciągu kilku lat większość witryn e-commerce zostanie zbudowana w ten sposób, przy użyciu frameworków JavaScript, takich jak Angular, Vue lub Reaguj.

Coraz mniej witryn e-commerce będzie budowanych przy użyciu tradycyjnego modelu HTML/CSS, a przepaść między witrynami internetowymi a aplikacjami natywnymi będzie coraz mniejsza, aż do momentu, w którym trudno będzie je odróżnić.

Co w niepewnych czasach składa się na świetne CX? Dołącz do ekspertów podczas dyskusji.