EN
← Înapoi la blog

Optical App Dev

PWA: aplicația care se instalează din browser

Ce e un PWA, ce îi trebuie ca să se instaleze pe Android, iPhone și calculator, ce poate face după instalare și când e alegerea mai bună decât magazinul.

Redacția Optical Design · redactor app & tehnic3 min de citit

Un PWA (progressive web app) e un site construit ca o aplicație, pe care omul îl poate instala direct din browser, fără App Store sau Google Play. După instalare are iconiță pe telefon sau pe calculator și se deschide în fereastra lui, fără bara browserului. Îi trebuie puțin ca să devină instalabil: HTTPS și un fișier numit manifest.

Ce e, mai exact

Pentru utilizator, un PWA arată ca o aplicație: iconiță lângă celelalte, pornire dintr-o atingere, ecran întreg. Pentru noi, e tot un site: un singur cod, care merge în orice browser și pe orice dispozitiv. Cine nu îl instalează îl folosește ca pe un site obișnuit, cu aceleași funcții de bază.

Diferența față de un site simplu stă în trei piese:

  • manifestul, un fișier mic care spune numele aplicației, iconițele, pagina de start și cum se deschide;
  • HTTPS, adică site servit securizat;
  • opțional, un service worker, un script care poate ține pagini și date în memoria telefonului, ca aplicația să meargă și fără semnal.

Ce îi trebuie ca să se poată instala

Chrome cere ca aplicația să nu fie deja instalată, să fie servită prin HTTPS și să aibă un manifest cu:

  1. un nume (name sau short_name);
  2. iconițe, cel puțin una de 192 px și una de 512 px;
  3. o pagină de start (start_url);
  4. un mod de afișare de tip aplicație (standalone, fullscreen, minimal-ui sau window-controls-overlay).

Pe lângă asta, Chrome se uită și la comportament: omul trebuie să fi atins pagina cel puțin o dată și să fi stat pe ea cel puțin 30 de secunde, înainte să-i propună instalarea. Service worker-ul nu e o condiție pentru instalare, dar fără el nu ai funcționare offline.

Cum se instalează, pe fiecare dispozitiv

DispozitivCum se instalează
Android, ChromeBrowserul propune instalarea; pe telefoanele cu servicii Google, aplicația se instalează ca una adevărată
Android, Samsung InternetLa fel, pe telefoanele Samsung
iPhone și iPadDin meniul Partajare, „Adaugă pe ecranul principal”; din iOS 16.4 merge din Safari, Chrome, Edge și Firefox
Calculator, Chrome și EdgeDin bara de adrese sau din meniul browserului
Mac, Safari 17 și mai nouFișier, „Adaugă în Dock”

Pe iPhone nu există un buton de instalare propus de browser și nici nu poți pune în site un buton propriu care să declanșeze instalarea. De aceea, la un PWA gândit pentru iPhone, punem în aplicație o scurtă explicație cu pașii, arătată doar celor care intră de pe iOS.

Pe Android, alte browsere decât Chrome și Samsung Internet pun doar o scurtătură pe ecran, care deschide site-ul în browser.

Ce poate face după instalare

  • Fereastră proprie. Cu modul standalone, aplicația se deschide fără elementele browserului și arată ca o aplicație obișnuită.
  • Notificări pe iPhone. Din iOS 16.4, o aplicație web adăugată pe ecranul principal poate cere permisiunea să trimită notificări push. Pe iPhone, notificările merg doar după ce omul a instalat aplicația, nu din Safari.
  • Bulina cu număr. Tot din iOS 16.4, aplicația poate pune pe iconiță numărul de mesaje sau comenzi noi.
  • Funcționare fără semnal, dacă are service worker și datele potrivite salvate.

Ce nu poate face la fel de bine ca o aplicație din magazin: accesul la unele funcții ale telefonului e mai limitat, mai ales pe iPhone, și nu apare în căutările din App Store sau Google Play, decât dacă e împachetată separat pentru magazin.

Când alegem un PWA

Un PWA are sens când:

  • aplicația e folosită des de aceiași oameni (angajați, clienți fideli, membri), care pot fi îndrumați o dată să o instaleze;
  • vrei o singură versiune pentru telefon și calculator;
  • vrei actualizări fără aprobarea magazinelor: urci versiunea nouă pe server și toată lumea o are la următoarea deschidere;
  • bugetul nu acoperă două aplicații native separate.

Alegem o aplicație din magazin când ai nevoie de funcții avansate ale telefonului, de plăți prin magazin sau când lumea te caută direct în App Store. Am comparat cele două variante mai pe larg în articolul aplicație web sau aplicație din magazin.

Ce construim și cum alegem tehnologia vezi pe pagina de servicii App Dev.

Surse

  1. Making PWAs installable, MDN Web Docsmanifestul, HTTPS, service worker-ul opțional, instalarea pe Android, iOS 16.4, Safari 17 și lipsa butonului propriu pe iOS
  2. What does it take to be installable?, web.devcriteriile Chrome: câmpurile din manifest, iconițele de 192 și 512 px, regula de 30 de secunde
  3. Web Push for Web Apps on iOS and iPadOS, WebKitnotificările push și bulina pentru aplicațiile web adăugate pe ecranul principal din iOS 16.4

Verificat: surse Xenia Pușcașu · editare Nora Vlăsceanu · SEO Mihnea Tăbăcaru

Vrei asta pentru firma ta?

Spune-ne în două rânduri ce ai nevoie. Revenim cu un plan și o ofertă.