Progressive Web Apps (PWA)

Ce sunt Progressive Web Apps sau PWA-urile?

Progressive Web Apps sunt combinația tehnologică dintre aplicațiile native și aplicațiile web bazate pe HTML5 pe care le cunoaștem. PWA-urile au apărut pentru a reduce decalajul tehnologic dintre aplicații și paginile web.

Google a fost unul dintre principalii susținători în încurajarea dezvoltării acestui tip de tehnologie. Pentru a-i înțelege mai bine caracteristicile, trebuie să vorbim despre aplicații care trebuie să fie fiabile, rapide și captivante.

Caracteristici pe care trebuie să le aibă Progressive Web Apps

Pentru a face conceptul de PWA suficient de clar și explicat, să ne aprofundăm în caracteristicile esențiale pe care trebuie să le aibă aceste tehnologii.

Bineînțeles, vorbim în termeni generali. De acolo, fiecare model de business/serviciu își va adapta obiectivele la nevoile propriului public țintă.

Viteza

Timpul înseamnă bani, nu doar pentru Google, ci pentru toate acele afaceri unde încărcarea lentă a produselor lor poate face ca utilizatorii să abandoneze o potentială achiziție.

Google subliniază această premisă de mult timp. Nașterea proiectului AMP a avut acest obiectiv, iar acum PWA-urile se alătură nevoii de acces rapid la informații din aplicații.

Utilizatorii de astăzi nu au răbdare; nu așteaptă ca un site să se încarce complet. 53% dintre utilizatori nu vor aștepta mai mult de 3 secunde ca un site web să se încarce, potrivit Think with Google

Fiabil

Când vorbim despre fiabilitate, ne referim la garanțiile de funcționare ale site-ului. Datorită celor cunoscute drept Service Workeri, problemele de conexiune la rețea nu ar trebui să împiedice încărcarea PWA-ului.

Instalabil

PWA-urile pot fi instalate fără a fi nevoie să mergi la Chrome Store, Apple Store sau la oricare dintre magazinele de aplicații existente. Amintește-ți că nu sunt aplicații native, așa că le putem accesa fără a trece prin aceste magazine.

Instalarea se comportă pur și simplu ca o comandă rapidă; nu are nevoie de spațiu pentru a stoca diferitele fișiere.

Dispozitive diferite: Mobil și Desktop

Baza de cod este unificată între ambele dispozitive, ceea ce înseamnă că tehnicile de design responsive se aplică atât pentru mobil, cât și pentru desktop.

Avantaje și dezavantaje ale PWA-urilor

Unele avantaje au fost deja menționate mai sus, la explicarea caracteristicilor aplicațiilor progresive. Dar există multe alte motive pentru a lua în considerare utilizarea acestei tehnologii în afacerea noastră.

• ›Economii de resurse
• ›Nu necesită instalare
• ›Viteză de încărcare foarte mare
• ›Notificări push direct pe smartphone-uri
• ›Rulează pe toate sistemele de operare
• ›Securitate îmbunătățită
• ›Mai puțină muncă de dezvoltare și întreținere decât o aplicație nativă.
• ›Mai economică decât o aplicație nativă.

Dezavantaje

• ›Necesită conexiune la internet.
• ›Nu toate browserele acceptă PWA-uri.
• ›Consum ridicat de baterie

Ce este un Service Worker?

Revenind pe scurt la partea tehnică, trebuie să vorbim despre anumite aspecte fără de care aplicațiile progresive nu ar putea funcționa. Service workerii sunt scripturi care rulează în fundal, făcând cereri către aplicațiile web, cache sau rețeaua în sine.

Un lucru important pe care ar trebui să-l știm este că Service Workerii pot funcționa doar dacă ai un certificat SSL și îi servești prin https.

Acum să vedem totul cu un exemplu: site-ul BMW și PWA-ul său.

Exemplu de PWA: BMW

Am încercat să scriu un articol fără a intra în profunzime în aspecte tehnice, iar acum vom vedea un exemplu de aplicație care va ajuta la o mai bună înțelegere a conceptului de PWA.

Dacă intrăm pe site-ul BMW, putem vedea că au un design foarte atractiv, prioritizând partea vizuală, dar dincolo de a vorbi despre design, să vedem cu ce tip de site avem de-a face.

Aparent este un site „normal", dar dacă săpăm în cod, avem prima noastră surpriză. Într-adevăr, este un site dezvoltat în întregime în AMP, nu doar versiunea mobilă.

Dar să trecem la subiectul de astăzi.

Odată intrat pe site, să mergem la bara „personalizează și controlează" a Chrome.

După cum ai putut vedea, s-a deschis o fereastră cu conținutul site-ului BMW. Comparând ambele conținuturi, vedem că sunt practic identice.

Imaginea site-ului în browser (Chrome)

Imaginea site-ului în PWA desktop

Dezvoltatorii BMW au reușit să mențină un aspect vizual identic. Când acceptăm „instalarea" PWA-ului în folderul nostru de aplicații Chrome sau chiar pe desktop (în funcție de sistemul de operare, eu folosesc în prezent MacOS), s-a descărcat o comandă rapidă către PWA.

Dacă suntem copleșiți de instalarea aplicațiilor și vrem să dezinstalăm, trebuie doar să mergem la fereastra versiunii noastre PWA, să facem clic în partea dreaptă la fel ca în Chrome și să selectăm dezinstalare.

În versiunea mobilă este practic similar. Când intrăm pe site cu versiunea PWA, primim o notificare pentru a „crea o comandă rapidă".

Când intrăm pe un site cu versiune PWA; vom vedea o opțiune de a crea o comandă rapidă.

Dacă acceptăm, vom vedea o pictogramă PWA pe desktopul mobilului nostru.

DevTools pentru a afla mai multe despre PWA-uri

În acest punct, vreau să mă aprofundez în exemple pentru a explica concepte și caracteristici ale acestui tip de aplicație.

Pentru aceasta vom folosi instrumentul pentru dezvoltatori pe care îl oferă Chrome (DevTools). Deschidem inspectorul cu butonul din dreapta și mergem la Application.

Chrome Devtools

App Manifest (Web Application Manifest)

Manifestul este un mic fișier JSON cu aspecte de bază de stil pe care le oferă browserului pentru a evita schimbări bruște.

Exemplu de Manifest (JSON)

Service Workers

După cum am explicat mai devreme, acum putem vedea despre ce este vorba. Vedem fișierul JS și în el scripturile pe care le folosește. Service Worker-ul este instalat în browser. Vom avea mai multe de la alte aplicații web.

Una dintre principalele funcții ale acestui tip de cod este să se asigure că este servită întotdeauna aceeași versiune (controlează cache-ul) chiar dacă deschidem altă filă.

Cum să implementezi PWA în WordPress?

În timp ce, dacă ne-am dezvoltat site-ul cu propriul cod, va trebui să facem destul de multă muncă manuală, situația va fi foarte diferită dacă ne-am dezvoltat site-ul în WordPress. Dacă acesta este cazul, vom avea la dispoziție mai multe pluginuri care ne vor permite să activăm tehnologia PWA în doar câteva clicuri. Versiunea PWA a SEO Alive, de fapt, este rezultatul acestui plugin pe care îl recomandăm.

Cele mai populare pluginuri pentru a implementa PWA în WordPress.

PWA-urile în Marketing

Pentru cei dintre noi care lucrăm în marketing, Progressive Web Apps ne pot ajuta să atingem obiective pe care fiecare departament de marketing le are în minte pentru a dezvolta un brand.

Loialitate și Vânzări

Unul dintre obiectivele cel mai prost gestionate de unele branduri. Cu toții cunoaștem implicarea scăzută pe care o au brandurile de telefoane mobile când își tratează clienții, ca să dăm un exemplu.

Notificările push în PWA-uri sunt una dintre acțiunile care funcționează cel mai bine și contribuie la generarea de vânzări.

Un studiu realizat de Gartner despre PWA-uri ne oferă o serie de statistici foarte interesante despre Lancome și Alibaba; Lancome raportează o creștere de 17% a conversiilor, 51% în sesiunile de pe dispozitive mobile și 52% pe iOS. Alibaba (grupul din care face parte Aliexpress) și-a îmbunătățit rata de conversie cu 76%.

Deși am vorbit despre 2 giganți globali, faptul de a avea o aplicație pe mobilul tău în care timpul de încărcare și execuție nu reprezintă o povară, plus respectarea unui design bun, s-a dovedit că crește rata de conversie.

În concluzie, putem spune că PWA-urile se răspândesc din ce în ce mai mult, în principal printre marile branduri. În Spania, probabil ne va lua puțin timp să realizăm potențialul enorm al acestei tehnologii, dar mai devreme sau mai târziu va fi implementată.

Orice tehnologie care facilitează navigarea mobilă are o mare importanță; petrecem multe ore cu smartphone-urile noastre și, în cele din urmă, accesul atât la conținut, cât și la produse înseamnă business.

Referințe

• ›Documentația Google despre PWA-uri