Beneficiile aplicațiilor cu o singură pagină și ale aplicațiilor web progresive: Îmbunătățirea CX

Publicat: 2019-06-06

Beneficiile aplicațiilor cu o singură pagină au devenit din ce în ce mai clare pe măsură ce experiența clienților impune furnizorilor de comerț electronic să ofere interacțiuni rapide și fiabile cu aceștia.

În ultimii 20 de ani, majoritatea site-urilor web au fost construite în același mod - cu utilizarea HTML, CSS și JavaScript. Aceste tehnologii au devenit mai avansate în timp, dar principiul a rămas în mare parte același: un utilizator interacționează cu o pagină web și browserul utilizatorului efectuează un apel către un server web care, la rândul său, răspunde cu un alt lot de HTML, CSS și JavaScript, care este apoi încărcat și afișat în browser.

(Uf. Sunt multe.)

Acest proces implică cel mai frecvent reîmprospătarea paginii, deși unele tehnologii, cum ar fi AJAX, permit dezvoltatorilor să modifice un anumit conținut fără a reîmprospăta întreaga pagină. Din acest motiv, majoritatea site-urilor web acționează și se comportă distinct ca un site web, mai degrabă decât ca o aplicație.

Majoritatea site-urilor web au, de asemenea, un back-end și un strat de prezentare strâns cuplat, ceea ce înseamnă că nu există o separare reală între partea din față și cea din spate a unui site web, deoarece ambele fac parte dintr-o singură aplicație monolitică.

Cum aplicațiile cu o singură pagină și aplicațiile web progresive pot îmbunătăți experiența clienților

În ultimul deceniu, aplicațiile native iOS și Android au devenit un loc comun pentru aproape toți dintre noi. Aceste aplicații se comportă diferit față de site-urile web reale, oferind utilizatorilor o experiență foarte diferită și adesea mai satisfăcătoare.

Paginile nu se reîmprospătează atunci când se apasă un link sau un buton, modificările se încarcă mult mai repede și experiența este adesea mult mai bună decât site-ul mobil echivalent. În cazul unei aplicații native de comerț electronic, atunci când un utilizator dă clic pe un link, aplicația va efectua un apel către un server back-end, dar în loc să returneze acel server layer-ul de prezentare HTML, CSS și JavaScript, este pur și simplu trimiterea datelor brute necesare, iar aplicația gestionează modul în care acestea sunt afișate utilizatorului.

De exemplu, dacă un utilizator face clic pe un produs pentru a vedea detaliile acestuia, aplicația va apela serverul back-end solicitând detaliile produsului respectiv, iar serverul va răspunde cu un șir de date care conține elemente precum numele produsului, preț și un link către o imagine, dar nu trebuie să trimită nici HTML, CSS sau JavaScript pentru a defini modul în care va fi afișată.

Aplicația în sine este stratul de prezentare, deci nu are nevoie de nimic de la serverul back-end. Acest lucru este mult mai rapid și permite aplicației să afișeze detaliile produsului către client fără a reîmprospăta o pagină. Tehnologia oferă dezvoltatorilor libertatea de a construi o experiență fluidă și fluidă pentru clienți, fără constrângerile modelului tradițional.

Nu ar fi grozav dacă ar putea fi oferită o experiență asemănătoare aplicației printr-un browser web, astfel încât distincția dintre o aplicație nativă și un site web să devină neclară?

Aici intervin aplicațiile cu o singură pagină (SPA) și aplicațiile web progresive (PWA).

Ce este o aplicație cu o singură pagină?

Un SPA este o aplicație scrisă în JavaScript care rulează într-un browser web și, în general, nu necesită o reîmprospătare a paginii pentru a afișa informații noi.

Când un utilizator vizitează pentru prima dată site-ul web, aplicația, împreună cu resursele de prezentare (HTML, CSS și unele scripturi) sunt încărcate în browser. Din acest moment, utilizatorul se află pe o singură pagină web, iar aplicația încarcă conținutul relevant și modifică afișarea după cum este necesar.

La fel ca o aplicație nativă, atunci când un utilizator face clic pe un link, aplicația apelează serverul back-end, care la rândul său trimite datele necesare într-un șir, care în general nu include niciuna dintre resursele de prezentare, așa cum au fost deja încărcat atunci când utilizatorul a vizitat prima dată site-ul web.

Deoarece utilizatorul se află în esență doar pe o singură pagină web, nu există cu adevărat un concept de reîmprospătare a unei pagini. În schimb, aplicația modifică pagina pentru a afișa informații diferite atunci când este necesar.

SPA-urile sunt, în general, complet decuplate de aplicația și interfețele back-end la back-end printr-un set de API-uri. Acesta va sta adesea pe propriul server și poate fi implementat separat. Într-un fel, este destul de agnostic față de aplicația back-end, deoarece pur și simplu trimite și primește date către și de la ea – tratând-o ca pe un sistem terță parte.

Cu toții folosim SPA-uri de ceva vreme, probabil fără să ne dăm seama. Facebook, Gmail, Twitter, LinkedIn și Instagram (printre multe altele) folosesc toate SPA-urile în locul site-urilor lor web.

Dacă vizitați unul dintre aceste site-uri web acum, veți observa că se comportă mult mai mult ca o aplicație nativă decât un site web tradițional. Paginile se reîmprospătează rar, dacă nu vreodată, atunci când interacționați cu ele și sunt foarte rapide. Făcând clic pe linkuri și butoane, se modifică conținutul pe care îl priviți, dar elemente precum antetul și subsolul aproape niciodată nu se reîmprospătează odată ce s-au încărcat inițial.

Beneficiile aplicațiilor cu o singură pagină

Cel mai mare și mai evident avantaj al unui SPA este modul în care acestea pot fi folosite pentru a îmbunătăți experiența clienților, permițând designerilor și dezvoltatorilor să ofere o experiență asemănătoare aplicației și să nu fie constrânși de abordarea tradițională de reîncărcare a paginilor.

Acest lucru necesită un nou mod de proiectare și gândire, deoarece regulile normale nu se mai aplică, dar beneficiile experienței utilizatorului pot fi masive.

În general, SPA-urile încarcă conținut mult mai rapid decât site-urile web standard, deoarece multe dintre resursele de prezentare (HTML, CSS) sunt încărcate o singură dată. Interacțiunile cu aplicația necesită doar un apel către serverul back-end pentru a prelua cantități mici de date, mai degrabă decât pagini HTML/CSS complet formate. Aplicația poate afișa apoi rapid datele modificate fără a fi nevoie să reîncarce pagina.

Deoarece un SPA este complet decuplat de aplicația back-end, acesta poate fi implementat separat, ceea ce poate avea un avantaj foarte mare. O mică modificare front-end nu va necesita implementarea întregii aplicații, ceea ce poate fi o sarcină destul de mare și uneori necesită timp de nefuncționare.

Dezavantajele unui SPA

Una dintre cele mai mari provocări ale utilizării SPA-urilor este impactul pe care îl are asupra SEO. Deoarece nu au întotdeauna structura tradițională a paginilor distincte, fiecare cu o adresă URL distinctă, acest lucru poate cauza probleme cu motoarele de căutare care indexează conținutul. Cu toate acestea, acest lucru poate fi contracarat prin utilizarea unor tehnici precum redarea pe server și asigurându-vă că clicurile generează adrese URL unice.

De asemenea, devine din ce în ce mai puțin o problemă în timp, deoarece roboții motoarelor de căutare sunt modificați pentru a face față SPA-urilor. La urma urmei, Google este una dintre companiile care le susțin.

Unele SPA-uri necesită puțin timp pentru a se încărca la prima vizită, deoarece aplicația și resursele de prezentare se încarcă în prima vizualizare a paginii.

Acest lucru este foarte vizibil cu SPA-uri precum Gmail, unde au o imagine mare de încărcare atunci când vizitați prima dată site-ul web. Această problemă poate fi contracarată prin utilizarea redării pe server și a programării eficiente pentru a se asigura că încărcarea inițială a aplicației și a resurselor nu este prea mare.

Ce este o aplicație web progresivă?

Un PWA este puțin greu de definit, deoarece nu este o tehnologie specifică, ci mai mult o metodologie de dezvoltare sau un set de principii care împreună fac un site web sau o aplicație mai mult sau mai puțin PWA.

Termenul PWA a fost inventat inițial de Google, care a creat o listă de verificare pentru a defini ceea ce face un PWA. Printre altele, Google a definit că un PWA trebuie să fie:

Sigur – difuzat sub https
Responsive – se potrivește oricărui factor de formă
Capabil să lucreze offline – folosind lucrători de servicii pentru a stoca paginile în cache
Rapid – capabil să se încarce rapid pe conexiuni 3G
Asemănător aplicației – folosind modul app-shell și designul pentru a vă simți ca o aplicație
Instalabil – utilizați un fișier manifest pentru a permite adăugarea aplicației pe ecranul de pornire
Atragerea – folosind instrumente precum notificările push
Progresiv – funcționează pe toate browserele, dar este progresiv mai bun pe browserele moderne

După cum puteți vedea, unele dintre elementele listei de verificare sunt puțin vagi sau subiective. De asemenea, puteți vedea că unele dintre ele sună similar cu un SPA. Un site web tradițional HTML/CSS poate fi transformat într-un PWA, la fel ca și un SPA. Un SPA nu este automat un PWA, dar are unele caracteristici care îl împing în acea direcție.

Inca confuz?

Avantajele PWA

Ca și în cazul unui SPA, unul dintre cele mai mari avantaje ale unui PWA este îmbunătățirea experienței clienților, oferindu-i o senzație de aplicație și reducând diferența dintre un site web mobil tradițional și o aplicație nativă iOS sau Android.

Funcții precum capacitatea de a salva pe ecranul de pornire sau posibilitatea de a stoca pagini prin intermediul lucrătorilor de servicii pot face ca site-ul web să arate și să se simtă un pic ca o aplicație nativă.

De asemenea, PWA tind să fie foarte rapid, deoarece acesta este unul dintre principiile cheie din lista de verificare.

Sistemul de operare Android oferă browserelor acces la hardware-ul dispozitivului mobil. care permite lucruri precum notificările push și utilizarea scanării NFC, ceea ce poate îmbunătăți cu adevărat CX.

Dezavantajele PWA

Cel mai mare dezavantaj al PWA este lipsa suportului din partea Apple. Pentru a obține cele mai bune rezultate dintr-o PWA, trebuie să ruleze pe un dispozitiv Android, deoarece sistemul de operare Android oferă browserelor acces la o cantitate semnificativă de funcții de pe dispozitiv, în timp ce Apple restricționează sever acest lucru. Acest lucru se îmbunătățește încet, dar mai este un drum lung de parcurs.

Un alt dezavantaj este lipsa unei definiții clare, care poate fi deschisă interpretării.

SPA-urile și PWA-urile sunt viitorul dezvoltării site-urilor web

Deși această tehnologie nu este încă în întregime curentă pentru majoritatea site-urilor de comerț electronic, este, fără îndoială, viitorul dezvoltării site-urilor web.

În timp ce SPA-urile sunt o tehnologie specifică care poate fi folosită pentru a construi o aplicație de comerț electronic, PWA-urile sunt, în general, site-uri web care au fost create după o metodologie stabilită de Google, despre care consideră că oferă cea mai bună experiență pentru clienți.

Oricine care dezvoltă un SPA ar trebui să urmărească să îndeplinească lista de verificare PWA cât mai mult posibil pentru a oferi cel mai bun CX posibil. Aceste tehnologii oferă designerilor și dezvoltatorilor mai multă libertate în experiența utilizatorului și călătorii, permițându-le să se îndepărteze de modelul tradițional pagină cu pagină.

Mulți furnizori de software precum SAP și IBM investesc masiv în crearea de front-end SPA pentru platformele lor de comerț electronic și bănuiesc că în câțiva ani, majoritatea site-urilor web de comerț electronic vor fi construite în acest fel, folosind cadre JavaScript precum Angular, Vedeți sau Reacționați.

Din ce în ce mai puține site-uri de comerț electronic vor fi construite folosind modelul tradițional HTML/CSS, iar decalajul dintre site-uri web și aplicațiile native va deveni din ce în ce mai mic, până la un punct în care va fi greu de făcut distincția între ele.