Pe scurt
Un PWA (progressive web app, în română aplicație web progresivă) este un site construit să se comporte ca o aplicație: se poate instala pe ecranul telefonului sau al calculatorului, se deschide într-o fereastră proprie, fără bara browserului, se încarcă rapid la revenire și poate funcționa parțial fără internet. Nu trece prin App Store sau Google Play.
Ce este un PWA (progressive web app)
Un PWA este o aplicație web care folosește câteva tehnologii ale browserului ca să ofere o experiență apropiată de cea a unei aplicații instalate. Rămâne însă un site: are o adresă, se deschide cu un link și poate fi găsit în Google.
Wikipedia în limba română îl definește ca pe „un tip de aplicație web care poate fi instalată pe un dispozitiv ca aplicație independentă”, iar zentoshop.ro amintește că modelul a fost prezentat inițial de inginerii Google în 2015. Documentația Microsoft subliniază că PWA-urile funcționează pe mai multe platforme prin suportul browserului.
Cuvântul „progresivă” este cheia: aplicația merge în orice browser, ca un site obișnuit, iar acolo unde browserul permite mai mult, adaugă treptat instalarea, lucrul offline și notificările.
Într-un PWA găsești de regulă:
- o pictogramă pe ecranul principal, ca la orice aplicație;
- deschidere într-o fereastră proprie, fără bara de adrese;
- încărcare rapidă la a doua vizită, pentru că fișierele de bază sunt deja pe dispozitiv;
- o pagină utilă și atunci când conexiunea lipsește, în locul erorii browserului;
- opțional, notificări push, acolo unde sistemul le permite.
Pentru imaginea de ansamblu, adică ce este o aplicație web și cu ce diferă de un site, citește ghidul despre aplicațiile web. Aici intrăm în detaliile PWA.
Cum funcționează un PWA: manifest, service worker și HTTPS
Un PWA funcționează prin trei piese adăugate unui site: conexiunea securizată HTTPS, un fișier manifest care descrie aplicația și un service worker, adică un script care rulează în fundal și decide ce se încarcă din rețea și ce din memoria locală.
HTTPS. Service worker-ul poate intercepta toate cererile paginii, așa că browserele îl permit doar pe conexiuni securizate, cu excepția mediului local de dezvoltare. Un site fără certificat SSL nu poate deveni PWA.
Manifestul aplicației web. Un fișier mic, în format JSON, care îi spune browserului numele aplicației, pictogramele, pagina de pornire, culoarea temei și modul de afișare. Modul „standalone” înseamnă fereastră proprie, fără interfața browserului.
Service worker-ul. Un fișier JavaScript pe care browserul îl înregistrează la prima vizită. Stă între aplicație și rețea și decide, la fiecare cerere, dacă răspunde din cache (memoria locală), din rețea sau din ambele. Tot el primește notificările push și, în browserele care permit asta, poate retrimite o acțiune eșuată când revine conexiunea.
Ce se întâmplă, concret, când un client deschide un PWA:
- Prima vizită arată ca la orice site: browserul descarcă paginile de pe server.
- În fundal, service worker-ul se instalează și salvează în cache „scheletul” aplicației: interfața, stilurile, scripturile și pictogramele.
- Browserul citește manifestul și, dacă sunt îndeplinite condițiile lui, oferă instalarea.
- La următoarea deschidere, scheletul vine direct de pe dispozitiv, iar din rețea se cer doar datele noi.
- Când publici o versiune nouă, service worker-ul o descarcă și o activează, de regulă la o deschidere ulterioară.
Pasul 5 e cel uitat des: fără o strategie de actualizare, unii utilizatori rămân pe o versiune veche din cache.
Cum se instalează un PWA pe telefon și pe calculator
Un PWA se instalează direct din browser, fără magazin de aplicații. Pe Android și pe calculator, browserul oferă de regulă un buton sau un mesaj de instalare, iar pe iPhone instalarea se face manual, din meniul de partajare, cu opțiunea „Adaugă pe ecranul principal”.
Pe fiecare tip de dispozitiv, lucrurile arată cam așa:
- Android, în Chrome și în alte browsere bazate pe Chromium: apare o invitație de instalare sau opțiunea din meniul browserului; site-ul își poate afișa și propriul buton.
- Calculator, în Chrome sau Edge: în bara de adrese apare o pictogramă de instalare.
- iPhone și iPad: din Safari, butonul de partajare, apoi „Adaugă pe ecranul principal”. Nu există o invitație automată, așa că mulți utilizatori nici nu știu că pot instala site-ul.
Consecința practică: clienților cu iPhone trebuie să le arăți cum se instalează, de exemplu printr-un mesaj scurt, cu doi pași ilustrați. Condițiile în care browserele oferă instalarea se schimbă de la o versiune la alta, așa că verifică suportul actual pentru funcția de care ai nevoie.
Cum funcționează un PWA offline
Un PWA funcționează offline doar în măsura în care a fost construit pentru asta. Service worker-ul poate servi din cache paginile și fișierele salvate anterior, dar tot ce înseamnă date noi sau confirmări de la server are nevoie de conexiune.
Nivelurile tipice, de la simplu la complex:
| Nivel | Ce vede utilizatorul fără internet | Potrivit pentru |
|---|---|---|
| Pagină offline proprie | un mesaj clar, cu datele de contact, în locul erorii browserului | aproape orice site |
| Conținut deja vizitat | paginile deschise recent: meniul, lista de servicii, un catalog | restaurante, cataloage, documentații |
| Formulare puse în așteptare | cererea e salvată pe dispozitiv și trimisă când revine semnalul | echipe de teren, inspecții, comenzi |
| Lucru complet offline | date locale, sincronizate ulterior cu serverul | aplicații interne specializate |
Primele două niveluri sunt relativ ieftine. Ultimele două cer logică de sincronizare, de exemplu pentru doi oameni care modifică offline aceeași înregistrare, și acolo se duce cea mai mare parte din efort.
Două limite de reținut. Browserul poate elibera spațiul ocupat de datele unui site, mai ales când dispozitivul rămâne fără spațiu, așa că datele importante trebuie să ajungă pe server. Iar sincronizarea în fundal, după închiderea aplicației, nu este disponibilă în toate browserele.
Un scenariu frecvent: o firmă de instalații are tehnicieni care completează fișe de intervenție în subsoluri și pe șantiere, unde semnalul dispare. Cu un formular web obișnuit, fișa se pierde la apăsarea butonului „Trimite”. Cu un PWA, fișa se salvează pe telefon, aplicația afișează „în așteptare, se trimite la reconectare”, iar datele pleacă spre server când revine semnalul. Detaliul care face diferența ține de interfață, nu de tehnologie: tehnicianul trebuie să vadă oricând ce s-a trimis și ce nu, altfel completează fișa de două ori sau deloc.
PWA vs aplicație mobilă vs site responsive
Un site responsive se adaptează la mărimea ecranului; un PWA adaugă instalare, încărcare din cache și funcții offline; o aplicație mobilă nativă are acces complet la telefon, dar se construiește pentru fiecare sistem de operare și trece prin magazinele de aplicații.
| Criteriu | Site responsive | PWA | Aplicație mobilă nativă |
|---|---|---|---|
| Instalare | nu | din browser, fără magazin | din App Store sau Google Play |
| Găsit prin Google | da | da | în principal prin căutarea din magazin |
| Funcționare fără internet | nu | parțială, cât a fost construită | de regulă cea mai completă |
| Notificări push | nu | da, cu condiții diferite pe iPhone și Android | da |
| Acces la funcțiile telefonului | de bază (cameră, locație, cu permisiune) | cam cât un site, plus ce permite browserul | complet: Bluetooth, NFC, senzori, integrare cu sistemul |
| Actualizări | imediate | imediate, prin service worker | trec prin aprobarea magazinului și depind de utilizator |
| Bază de cod | una | una | de regulă câte una pentru iOS și Android sau un framework comun |
| Efort de dezvoltare | cel mai mic | moderat, peste un site bun | cel mai mare |
PWA sau aplicație mobilă? Alegi nativ când produsul depinde de funcții pe care browserul nu le oferă, cum ar fi Bluetooth, NFC sau procesare intensă în fundal, ori când magazinul de aplicații este el însuși un canal de vânzare. În rest, un PWA acoperă o mare parte din nevoi cu o singură bază de cod.
Un PWA poate fi publicat și în Google Play, împachetat printr-o tehnologie numită Trusted Web Activity, sau în Microsoft Store. Apple are reguli mai stricte pentru aplicațiile care doar afișează un site, așa că App Store rămâne drumul cel mai incert.
PWA pe iPhone și pe Android: ce diferă
Android, prin Chrome, oferă de regulă suportul cel mai larg pentru PWA, iar iPhone-ul oferă funcțiile de bază, cu mai multe condiții și cu instalare manuală. Diferențele se schimbă odată cu versiunile sistemelor și ale browserelor, așa că verifică suportul actual pentru funcția de care ai nevoie înainte s-o promiți clienților.
Ce e bine de știut, în linii mari:
- Instalarea. Pe Android este sugerată de browser; pe iPhone este manuală, din meniul de partajare.
- Motorul browserului. Pe iPhone, browserele au folosit istoric motorul Safari (WebKit), așa că limitele Safari se regăsesc de regulă și în Chrome pentru iOS.
- Notificările push. Au ajuns pe iPhone mai târziu decât pe Android și funcționează doar după ce aplicația a fost adăugată pe ecranul principal și utilizatorul și-a dat acordul.
- Funcțiile avansate. Interfețe precum Web Bluetooth sau Web NFC există doar în unele browsere bazate pe Chromium și lipsesc din Safari.
Pasul practic care previne cele mai multe surprize: testezi instalarea, notificările și modul offline pe un iPhone și pe un Android reale, nu doar în emulatorul de pe calculator.
Exemple de PWA cunoscute
Mai multe servicii internaționale au lansat versiuni PWA, printre ele Twitter (astăzi X), prin Twitter Lite, Starbucks, pentru comenzi, și Pinterest. Scopul a fost o experiență de tip aplicație pentru cei care nu voiau să instaleze nimic din magazin, pe telefoane slabe sau conexiuni lente. Pentru o firmă din România, exemplele sunt mai modeste: un meniu de restaurant, un portal de comenzi B2B, o aplicație internă pentru agenții de pe teren.
Cum verifici dacă un site este PWA:
- Deschide site-ul în Chrome sau Edge pe calculator și uită-te în bara de adrese după pictograma de instalare.
- Deschide instrumentele pentru dezvoltatori (tasta F12) și intră în secțiunea „Application”.
- La „Manifest” vezi numele, pictogramele și modul de afișare; la „Service workers” vezi dacă există unul activ.
- Bifează modul offline din aceeași secțiune și reîncarcă pagina: vezi exact ce rămâne disponibil fără conexiune.
Când merită un PWA pentru o firmă mică din România
Un PWA merită când aceiași oameni revin des la site-ul tău pentru o acțiune repetată: o comandă, o programare, o verificare. Dacă vizitatorii vin o singură dată din Google și te sună, un site rapid îți aduce aproape tot beneficiul.
| Situație | Recomandare |
|---|---|
| Site de prezentare, vizite unice, cereri de ofertă | site responsive rapid; cel mult o pagină offline |
| Restaurant sau cafenea cu clienți care comandă des | PWA simplu: instalare, meniu în cache, comandă rapidă |
| Salon, clinică, service cu programări recurente | PWA peste sistemul de programări, cu notificări de reamintire |
| Distribuitor cu clienți B2B care comandă des aceleași produse | portal de comenzi ca PWA, cu istoric și comandă repetată dintr-un clic |
| Echipe de teren cu semnal slab | PWA cu formulare offline și sincronizare |
| Produs care depinde de Bluetooth, NFC sau lucru intens în fundal | aplicație nativă |
Un exemplu: un salon are clienți care revin la patru-șase săptămâni și își fac programarea telefonic. Un PWA le permite să deschidă programarea direct de pe ecranul telefonului, să vadă orele libere și să primească o reamintire cu o zi înainte. Întrebarea care decide dacă merită: câți clienți revin, de fapt, și cât timp pierde azi recepția la telefon? Dacă răspunsul este „câțiva pe săptămână”, un modul de programări existent, legat de site, e suficient. Dacă e „zeci pe zi”, instalarea și reamintirile încep să-și plătească efortul.
La Magnitude construim site-uri și aplicații web cu Next.js, React și TypeScript. Nu avem un pachet separat sau un preț fix pentru PWA: funcțiile de acest tip se discută ca parte a proiectului, doar când clienții tăi chiar le-ar folosi. Pe pagina despre crearea unui site web la Magnitude vezi cum lucrăm, de la analiza business-ului și design în Figma până la development și testarea pe mai multe dispozitive.
Ce influențează costul unui PWA
Costul unui PWA depinde de cât trebuie să facă aplicația fără server: un site bun transformat în PWA de bază e un pas mic, o aplicație complet offline e un proiect în sine.
Factorii care urcă sau coboară bugetul:
- Punctul de plecare. Un site modern și rapid se transformă ușor; unul lent trebuie de obicei reparat întâi.
- Nivelul offline. Pagina offline și cache-ul pentru conținutul vizitat sunt ieftine; formularele în așteptare și sincronizarea cu rezolvarea conflictelor sunt scumpe.
- Notificările push. Cer un server care le trimite și gestionarea acordului utilizatorilor.
- Conturi și date personale. Autentificarea, rolurile și obligațiile GDPR se adaugă oricărei aplicații cu date despre clienți.
- Testarea. Fiecare funcție se verifică pe iPhone și pe Android, instalată și neinstalată, online și offline.
- Publicarea în magazine. Opțională, cu un cont de dezvoltator și o taxă de înregistrare pentru Google Play.
- Mentenanța. Strategia de cache se întreține odată cu site-ul.
Pentru ordine de mărime de pe piață, ghidul cu intervalele de preț pentru site-uri și aplicații web le explică pe tipuri de proiect.
Greșeli frecvente când faci un PWA
Cele mai multe probleme ale unui PWA vin din cache folosit fără reguli și din funcții cerute utilizatorului prea devreme.
- Cache fără strategie de actualizare. Clienții văd prețuri sau programe vechi zile întregi.
- Cache pe paginile personale. Coșul, contul clientului și checkout-ul nu se servesc din cache, aceeași regulă ca în ghidul de optimizare a vitezei unui site, unde cache-ul greșit strică exact aceste pagini.
- Invitația de instalare la prima secundă. Arat-o după o acțiune reușită, de exemplu după prima comandă.
- Cererea de notificări imediat la intrare. Un refuz e greu de schimbat ulterior; cere acordul când notificarea are un rost evident.
- Conținut afișat doar prin JavaScript. Un PWA rămâne un site care trebuie să apară în căutări. Dacă paginile publice nu au conținutul generat pe server, riști o indexare slabă; bazele sunt explicate în ghidul despre cum ajunge un site în rezultatele Google.
- Testare doar pe Android sau doar pe calculator. Diferențele de pe iPhone ies la iveală abia la clienți.
- Așteptarea ca PWA să repare un site lent. Cache-ul ajută la vizitele repetate; prima vizită rămâne la fel de lentă dacă site-ul este greu.
Checklist înainte să ceri o ofertă de PWA: notează ce acțiune repetă clienții tăi pe site și cât de des; ce trebuie să meargă fără internet, concret, și ce nu; dacă ai nevoie de notificări și ce ar anunța ele; pe ce telefoane lucrează clienții și echipa ta; dacă vrei aplicația și în Google Play; cine se ocupă de actualizări după lansare. Cu aceste răspunsuri, un furnizor îți poate spune dacă ai nevoie de un PWA, de un site bun sau de o aplicație nativă.
Termeni conecși
Acești termeni apar în orice discuție despre PWA cu un dezvoltator.
- Manifestul aplicației web: fișierul JSON cu numele, pictogramele și modul de afișare al aplicației.
- Service worker: scriptul care rulează în fundal, gestionează cache-ul și primește notificările.
- App shell: „scheletul” aplicației, adică interfața de bază salvată pe dispozitiv la prima vizită.
- HTTPS și certificat SSL: conexiunea criptată fără de care un PWA nu poate funcționa.
- Trusted Web Activity: metoda prin care un PWA este împachetat și publicat în Google Play.
- SPA (aplicație cu o singură pagină): aplicație web care își actualizează interfața fără reîncărcare; multe PWA sunt construite așa, dar nu toate.
Întrebări frecvente
Este un PWA același lucru cu o aplicație mobilă?
Nu, un PWA este un site cu funcții de aplicație, nu o aplicație mobilă nativă. Se instalează din browser, rulează pe motorul browserului și folosește o singură bază de cod pentru toate dispozitivele, în timp ce o aplicație nativă se construiește pentru iOS sau Android și se instalează din magazin.
Apare un PWA în rezultatele Google?
Da, un PWA poate apărea în Google la fel ca orice site, pentru că paginile lui au adrese publice. Condiția este ca paginile publice să aibă conținutul disponibil pentru indexare, ideal generat pe server, nu doar după rularea JavaScript-ului.
Funcționează un PWA pe iPhone?
Da, un PWA funcționează pe iPhone, dar cu instalare manuală, din meniul de partajare, și cu unele funcții limitate față de Android. Notificările push, de exemplu, cer ca aplicația să fie adăugată pe ecranul principal, așa că verifică suportul actual pentru funcția de care ai nevoie.
Pot transforma site-ul meu actual într-un PWA?
Da, de cele mai multe ori poți adăuga funcțiile de PWA peste site-ul existent: un manifest, un service worker și o strategie de cache. Merită doar dacă site-ul este deja rapid și dacă vizitatorii tăi revin des; altfel, repară întâi viteza și structura.