Trăim într-o lume din ce în ce mai rapidă, dinamică și în continuă schimbare. Inovațiile incrementale care au un impact asupra oamenilor se succed, cu un accent din ce în ce mai clar pe:

• performanță, gândiți-vă la dispozitivele din ce în ce mai puternice pe care le folosim în fiecare zi sau la sarcinile pe care ne permit să le facem mai repede;
• experiență, pentru a elimina orice fricțiune în utilizarea software-ului/hardware-ului;
• inteligență, cu algoritmi care lucrează acum într-o perspectivă predictivă.

În această direcție, concentrându-se în primul rând pe performanță și pe User Experience pentru utilizatorul final, se îndreaptă dezvoltarea Progressive Web App (PWA), o soluție care dorește să combine tot ce este mai bun din aplicațiile native și tehnologia Web.

O Progressive Web App (PWA) este o aplicație care folosește capabilitățile moderne ale Web-ului pentru a oferi utilizatorilor o experiență foarte asemănătoare (dacă nu chiar mai bună) cu o aplicație nativă.

Spre deosebire de aplicațiile tradiționale, aplicațiile web progresive sunt un hibrid între paginile web obișnuite și aplicațiile mobile. Termenul “progresiv” se referă la faptul că acestea introduc caracteristici noi și, din punctul de vedere al experienței utilizatorului, sunt percepute inițial ca site-uri web normale, dar se comportă progresiv mai mult ca niște aplicații mobile, printre altele multiplatformă.

Pro și contra aplicațiilor web progresive

Principalele caracteristici sunt:

• Progresive – Funcționează pentru fiecare utilizator, indiferent de browserul ales, deoarece sunt construite la bază cu principii de îmbunătățire progresivă.
• Responsive – Se adaptează la diferitele dimensiuni ale ecranului: desktop, mobil, tabletă sau la dimensiunile care pot deveni disponibile ulterior.
• App-like – Se comportă cu utilizatorul ca și cum ar fi aplicații native, din punct de vedere al interacțiunii și al navigării.
• Actualizate – Informațiile sunt mereu la zi datorită procesului de actualizare a datelor oferit de lucrătorii serviciului.
• Securizate – Sunt expuse prin protocolul HTTPS pentru a împiedica afișarea informațiilor sau modificarea conținutului conexiunii.
• Căutabile – Sunt identificate ca “aplicații” și sunt indexate de motoarele de căutare.
• Reactivabile – Facilitează reactivarea aplicației datorită unor capacități precum notificările web.
• Instalabile – Permit utilizatorului să “salveze” aplicațiile pe care le consideră cele mai utile, cu pictograma corespunzătoare pe ecranul terminalului său mobil (ecranul de pornire), fără a fi nevoit să se confrunte cu toate etapele și problemele legate de utilizarea magazinului de aplicații.
• Conectabile – Sunt ușor de partajat prin URL, fără instalări complexe.
• Offline – Încă o dată, este vorba de a pune utilizatorul înaintea tuturor lucrurilor, evitând mesajul de eroare obișnuit în cazul unei conexiuni slabe sau fără conexiune. PWA-urile se bazează pe două particularități: în primul rând “scheletul” aplicației, care amintește de structura paginii, chiar dacă conținutul său nu răspunde, iar elementele sale includ antetul, aspectul paginii, precum și o ilustrație care semnalează că pagina se încarcă.

Substanțele slabe se referă la:

• Suport pentru iOS începând cu versiunea 11.3 și mai departe;
• utilizarea mai mare a bateriei dispozitivului;
• nu toate dispozitivele suportă întreaga gamă de caracteristici PWA (același discurs pentru sistemele de operare iOS și Android);
• nu este posibil să se stabilească o reangajare puternică pentru utilizatorii iOS (schema URL, notificări web standard);
• sprijinul pentru execuția offline este totuși limitat;
• lipsa prezenței în magazine (nu există posibilitatea de a achiziționa trafic de pe acest canal);
• nu există un “organism” de control (precum magazinele) și un proces de aprobare;
• acces limitat la unele componente hardware ale dispozitivelor;
• prea puțină flexibilitate în ceea ce privește conținutul “special” pentru utilizatori (de ex. programe de fidelizare, loialitate, etc.).

Importanța Manifestului și a Service Workers

Noile caracteristici ale browserelor moderne care permit PWA-urilor să ofere tot ce este mai bun sunt “manifestul” și “service workers”.

Manifest
Este un fișier JSON simplu care definește parametrii de bază ai PWA, pentru a controla modul în care aplicația ar trebui să apară în fața utilizatorului și pentru a defini aspectul acesteia la lansare: pictograme, alte caracteristici de bază, cum ar fi culorile, fonturile, orientarea ecranului și posibilitatea de a fi instalată pe ecranul principal.

Lucrătorii de servicii
Ei sunt adevărata cheie pentru experiențele avansate pe care le poate oferi un PWA. Un service worker este un script pe care browserul îl rulează în fundal, separat de o pagină web, pentru a utiliza funcții care nu necesită o pagină web sau interacțiune cu utilizatorul.

Astăzi, SW-urile includ deja funcții precum notificările push și sincronizarea în fundal. În viitor, acestea vor suporta funcții precum sincronizarea periodică sau geofencing. Funcția principală este capacitatea de a intercepta și de a gestiona cererile de rețea, inclusiv gestionarea programatică a unui cache de răspunsuri. Este un API care susține experiențele offline, oferind dezvoltatorilor un control complet al experienței.

Cu adăugarea suportului pentru service workers în cea mai recentă versiune de iOS, Apple a deschis ușa pentru ca PWA-urile să ajungă, în toate scopurile, la întreaga piață mobilă.

Care sunt cele mai utilizate tehnologii pentru PWA?

Există mai multe tehnologii pentru crearea unei aplicații web progresive, bazate în principal pe JavaScript, cu caracteristici diferite.

Printre cele principale avem:

• React
  O bibliotecă JavaScript puternică pentru crearea unor interfețe utilizator dinamice și moderne
• Polymer
  O combinație de componente, instrumente și modele concepute pentru a crea PWA
• Angular
  Un cadru JavaScript pentru crearea de aplicații web dinamice care utilizează HTML ca limbaj de șabloane
• Ionic
  Un cadru JavaScript pentru crearea de aplicații puternice pentru mai multe platforme folosind un cod de bază
• Accelerated Mobile Pages (AMP)
  Un proiect open source pentru îmbunătățirea performanței paginilor web

Cum să alegeți între un PWA sau o soluție nativă

Vine momentul alegerii, ce soluție să adoptați?

Este de preferat să alegeți dezvoltarea unui PWA atunci când:

• Aplicația trebuie să fie ușor de distribuit către o bază de utilizatori și mai largă
• Bugetul disponibil nu este mare
• Există puțin timp disponibil pentru go-live
• Este importantă indexarea corespunzătoare pe motoarele de căutare
• Este necesară compatibilitatea între platforme
• Sunt necesare mai multe actualizări într-un timp restrâns

Pe de altă parte, este de preferat să se dezvolte o aplicație nativă atunci când:

Este de preferat să se dezvolte o aplicație nativă atunci când:

• Este necesară deplasarea în magazine
• Viteza și capacitatea de reacție sunt puncte cheie pentru succesul aplicației
• Aplicația necesită o utilizare importantă a caracteristicilor hardware ale dispozitivului
• Modelul de afaceri se bazează, de exemplu, pe costul pe descărcare și/sau IAP (In App Purchase)
• Aplicația trebuie să fie integrată cu alte aplicații terțe

Diferențele în procesul de instalare: PWA vs aplicație nativă

Procesul general de instalare a aplicațiilor native urmează acest flux:

• Acces la magazinul de referință (App Store sau Google Play)
• Cercetarea aplicației
• Clic pe “Install”
• Acceptarea diverselor autorizații
• Deschiderea și lansarea aplicației
• Utilizarea aplicației

În comparație, instalarea PWA include:

• Vizitarea site-ului
• Adaptarea la ecranul principal al dispozitivului (opțional)
• Deschiderea aplicației
• Utilizarea aplicației

Principalele exemple de Progressive Web App

Există deja multe exemple de PWA “distinse” pe care utilizatorii le folosesc pe dispozitivele lor și printre principalele pe care le semnalăm:

Pinterest

Pentru a afla mai multe:
Addy Osmani pe Medium > A Pinterest Progressive Web App Performance Case Study

Instagram

PWA-ul actual este foarte asemănător cu aplicația nativă și are toate caracteristicile principale de interacțiune, de la notificări până la posibilitatea de a vizualiza Stories.

Google Maps

Pentru a afla mai multe:
The Next Web > Google’s lightweight Maps Go este doar o Progressive Web App

Tinder

Pentru a afla mai multe:

Pentru a afla mai multe:
Addy Osmani pe Medium > A Progressive Tinder Web App Performance Case Study

Twitter Lite

Pentru a afla mai multe:
Twitter Blog > Cum am construit Twitter Lite
Google Developers > Twitter Lite PWA crește semnificativ angajamentul și reduce utilizarea datelor
Paul Armstrong pe Medium > Twitter Lite și React Progressive Web de înaltă performanță Apps at Scale

YouPorn

Decizia de a folosi PWA-uri este în principal pentru a ocoli limitările pe care Apple și Google le pun asupra conținutului pornografic din magazine, precum și pentru a asigura o experiență mai bună pentru utilizatori.

Pentru a afla mai multe:
YouPorn Blog > YouPorn App Experience
VentureBeat > YouPorn goes progressive with new mobile web apps for Android and iOS

Câteva referințe pentru a aprofunda tematica Progressive Web App

Google Progressive Web App > https://developers.google.com/web/progressive-web-apps/

Google PWA Checklist > https://developers.google.com/web/progressive-web-apps/checklist

Appscope, director pentru aplicații web progresive (PWA) > https://appsco.pe/

Este deci viitorul “progresiv”?

Răspunsul este, ca întotdeauna, depinde. Decizia de a dezvolta un PWA vine în urma unor analize și reflecții care trebuie făcute din când în când, de la proiect la proiect, de la utilizator la utilizator. Dimpotrivă, am putea adăuga o complexitate suplimentară: cea a poziționării pe motorul de căutare: am gestionat totul corect sau canibalizăm traficul de pe site-ul nostru?

Factorii care duc la alegere sunt mulți, așa cum a anticipat acest studiu, astfel încât nu există o rețetă definită și standard, ci cea care dă contextul se potrivește corect cu strategia și obiectivele. Haideți să discutăm împreună despre asta.

.