Design web receptiv și aplicație web progresivă (PWA): diferențele

Având în vedere că acestea două sunt atât de asemănătoare în ceea ce privește modul în care arată și performanță, trebuie să vă întrebați de ce nu există o comparație mai detaliată între cele două abordări populare ale dezvoltării web: design web responsive și Progressive Web App. Ei bine, asta este. În acest articol, vom compara designul web responsive cu Progressive Web App și vom afla unde diferă cu adevărat unul de celălalt.

Web Design responsive

Ce este

Designul web responsiv (RWD) este o abordare a dezvoltării web descrisă pentru prima dată de Ethan Marcotte în 2010, cu cinci ani mai devreme decât concepția Progressive Web App.

Cum functioneaza

Practic, filozofia designului web responsive este că proiectarea și dezvoltarea ar trebui făcute cu scopul de a răspunde dispozitivului utilizatorului, ceea ce înseamnă a răspunde la comportamentul, dimensiunea, platforma și orientarea dispozitivului utilizat. Acest lucru se realizează prin utilizarea de grile fluide, imagini flexibile și interogări media CSS:

Grilele fluide, imaginile flexibile și interogările media sunt cele trei ingrediente tehnice pentru designul web responsive...

Ethan Marcotte, Responsive Web Design

Grile de fluide

Site-urile web responsive concepute cu grile fluide pot gestiona mai bine dimensiunile diferite ale ecranului de pe piață, deoarece, în loc să definească dimensiuni bazate pe pixeli, grila fluidă adoptă un nou calcul bazat pe procente.

Imagini flexibile

Imaginile de pe Web nu sunt în mod natural fluide, dar cu unele configurații (proprietatea width setată la 100% și proprietatea height setată la auto ), orice imagine poate fi făcută să răspundă pe toate dispozitivele.

Interogări media CSS

În timp ce o pagină web receptivă cu imagini flexibile și grile fluide este receptivă din punct de vedere tehnic, nu arată la fel de bine pe cât poate fi. Aici intră în joc interogările media CSS, deoarece acestea sunt folosite pentru a crea o experiență și mai bună, adaptată pentru diferite dispozitive. Aceste experiențe personalizate sunt adesea introduse prin adăugarea de puncte de întrerupere care intră în vigoare la anumite dimensiuni de ecran.

În ansamblu, designul web responsive a făcut web-ul de astăzi mult mai accesibil, deoarece abordarea elimină nevoile pentru mai multe faze de dezvoltare care erau necesare anterior pentru a se adapta diferitelor dimensiuni ale ecranului de pe piață. Sau, în cuvintele creatorului său, această abordare a dezvoltării web ne permite în sfârșit să „ proiectăm pentru fluxul și refluxul lucrurilor ”.

Exemple

Site-urile web responsive sunt un loc obișnuit în zilele noastre și aproape fiecare site web pe care îl întâlniți este oarecum receptiv în natura sa.

Aplicații web progresive

Ce este

Creată pentru prima dată de Alex Russel în 2015, Progresive Web A pp este următoarea evoluție naturală a Web-ului datorită numeroaselor sale beneficii față de site-ul web responsive tipic. Partea „ progresivă ”, potrivit lui Pete LePage – Google Developer Advocate, poate fi explicată ca „ pe măsură ce utilizatorul construiește progresiv o relație cu aplicația în timp, aceasta devine din ce în ce mai puternică ”.

Pentru a spune în termeni simpli, un PWA este site-ul dvs. asemănător aplicației, cu (aproape) toate caracteristicile la care vă puteți aștepta de la o aplicație mobilă nativă , inclusiv notificări push, capabilități offline și așa mai departe. Și, din această cauză, întreaga experiență este un pas înainte față de omologul său web receptiv, deoarece PWA poate păstra toate presupusele beneficii care vin cu o platformă bazată pe web.

 Articol înrudit: Ce este o aplicație web progresivă?

Cum functioneaza

De fapt, este destul de ușor să rezumați componentele de bază ale unui PWA. Practic, pentru a face posibile toate caracteristicile progresive menționate mai sus, acestea sunt cerințele:

Manifestul aplicației web

Manifestul aplicației web este un fișier JSON care oferă metadatele necesare pentru procesul de instalare a PWA și determină modul în care PWA se prezintă pe ecranul de pornire al utilizatorului.

Lucrători de servicii

Considerați universal ca componenta de bază care face posibile toate caracteristicile progresive ale PWA, lucrătorii de servicii rulează independent de browser și pe un fir diferit de JavaScript principal.

Contexte sigure

Ca un nou standard al Web-ului, este necesar ca un PWA să fie întrerupt printr-un protocol securizat – HTTPS. Acest lucru garantează o comunicare sigură atât între utilizator, cât și server și în schimb, asigurând o experiență fără riscuri.

Exemple

Întrucât PWA-urile nu se comportă diferit de aplicațiile mobile native, este posibil să fi vizitat un site PWA înainte fără să știi. Gândiți-vă la site-uri mari, asemănătoare aplicațiilor, cum ar fi Instagram și Pinterest – toate sunt alimentate de PWA.

 Lectură recomandată: 12 cele mai bune exemple de aplicații web progresive în 2020

Acolo unde se suprapun

O experiență similară cu caracteristici moderne

Dacă totul are sens pentru tine până acum, atunci ar trebui să vezi că designul web receptiv (RWD) și PWA se suprapun foarte mult atunci când vine vorba de experiența utilizatorului. Din punct de vedere tehnic, PWA este receptiv, deoarece abordarea este concepută pentru a fi potrivit pentru vizualizare pe toate dispozitivele, cu un pic de atingere modernă pentru a activa mai multe funcții asemănătoare aplicației.

Și, deoarece ambele sunt abordări ale dezvoltării web, împărtășesc aproape toate aceleași beneficii de pe web, care includ:

• O adresă URL, o bază de cod pentru toate platformele
• Securitate sporită cu HTTPS
• O mai bună descoperire și mereu la zi

Unde diferă

Aici lucrurile devin interesante, deoarece aceste două abordări ale dezvoltării web – deși sunt în mare parte similare ca aspect – diferă mult în ceea ce privește impactul lor în lumea reală.

În ceea ce privește caracteristicile

Un PWA, prin definiție, vine cu mai multe funcții decât site-ul dvs. web responsive obișnuit. Profitând de progresele recente ale tehnologiilor web, de exemplu lucrătorii de servicii și manifestul aplicației web, PWA poate oferi funcții care anterior erau exclusive pentru aplicațiile mobile native, cum ar fi:

Adăugați la ecranul de pornire

Cu lucrătorii de service înregistrați și un manifest al aplicației web, PWA poate fi instalat pe fiecare dispozitiv care are un browser compatibil.

>> Aflați mai multe: Creați primul dvs. PWA

Notificări

Prin intermediul lucrătorilor de service, puteți trimite notificări și le puteți afișa pe dispozitivele utilizatorului la fel cum ar face o aplicație nativă. Aceasta este o caracteristică relativ recentă a Web-ului, care profită de Push API, Notifications API și Web Push Protocol; iar în viitorul apropiat, această funcție se îmbunătățește doar datorită apariției API-ului Notifications Triggers și Badging.

Capacități offline

Datorită ajutorului proxy-ului de rețea programabil din browser, și anume lucrătorii de servicii , PWA poate stoca în cache și difuza conținut offline în mod proactiv, fără a fi nevoie să se bazeze pe mecanisme de stocare în cache învechite, cum ar fi cache-ul HTTP.

Note : site-urile web responsive pot beneficia în continuare de toate API-urile existente de pe web pentru a oferi și o experiență optimă de utilizare - doar că nu veți beneficia de toate funcțiile bazate pe lucrătorii de servicii.

 Lectură recomandată: Progressive Web App (PWA) și Acces hardware

În ceea ce privește performanța

Deoarece site-urile web responsive sunt încă site-ul dvs. obișnuit, împiedicat de toate dezavantajele asociate cu mecanismul actual de stocare în cache HTTP, este rezonabil să vă așteptați la o performanță mai bună de la PWA, deoarece utilizează un mecanism de stocare în cache mai nou, mai orientat spre performanță, numit lucrători de servicii.

Mecanism mai rapid de stocare în cache

Cu lucrătorii de service înregistrați, puteți avea control asupra exact ceea ce este stocat în cache și puteți oferi experiențe mai bune pentru vizitatorii care revin.

Impactul asupra performanței în lumea reală a lucrătorilor din servicii nu este ceva care să nu fi fost observat cu atenție. Folosind timpul pentru prima pictare ca măsură pentru a măsura prima experiență a utilizatorului cu un site web, Google înșiși a realizat un studiu care observă performanța aplicației web Google I/O cu un grup controlat (în cazul în care un lucrător de servicii controlează aplicația web) și un grup acceptat (unde funcționează serviciul este acceptat de browserul utilizat, dar nu controlează încă aplicația web).

Rezultatele au fost deosebit de impresionante pe desktop, deoarece aici putem vedea lucrătorii de service și-au făcut partea pentru a reduce timpul original de firstpaint (912 ms) la doar 583 ms . Aceasta este cât de aproape de o experiență instantanee.

Lucrurile sunt, totuși, puțin mai puțin impresionante pe dispozitivele mobile:

Aici putem vedea că capătul de coadă al grupului controlat arată încă puțin similar cu grupul susținut. Acest lucru se datorează în mare parte faptului că pe dispozitive mobile, firele de lucru ale lucrătorilor de servicii nu sunt la fel de optimizate și au nevoie de mai mult timp pentru a începe în comparație cu desktop-ul.

În general, creșterea performanței obținută cu lucrătorii de servicii – sau cu alte cuvinte, cu PWA – este absolut fenomenală. Mai este, desigur, ceva de făcut din partea lucrătorilor din serviciile mobile; dar credem că, în ansamblu, este încă un pas marginal până la ceea ce a fost cândva Web-ul și un pas în direcția corectă.

În ceea ce privește securitatea

HTTPS—Linia de divizare

În timp ce un site web responsive tipic poate fi la fel de securizat ca un PWA, nu este necesar ca site-urile web responsive să utilizeze protocoale de comunicare securizate. Acesta este cazul opus cu site-urile web alimentate de PWA, deoarece Google, fondatorul PWA, cere ca toate comunicațiile dintre server și client într-un PWA să fie criptate prin utilizarea HTTPS.

Cele mai multe dintre funcțiile legate de un PWA, cum ar fi localizarea geografică și chiar lucrătorii de service, sunt disponibile numai după ce aplicația a fost încărcată folosind HTTPS.

Documente web MDN, aplicații web progresive (PWA)

 Articol similar: Ai nevoie de HTTPS?

Concluzie

Creșterea de performanță menționată mai sus realizată cu lucrătorii din service, combinată cu funcții suplimentare asemănătoare aplicațiilor, cum ar fi notificările push, adăugarea la ecranul de pornire (și în viitorul apropiat, geofencing și sincronizarea periodică), toate se dovedesc să facă din PWA candidatul potrivit pentru a fi următorul evolutia Web-ului. Începând de acum, mișcarea PWA este deja încurajată pe scară largă de aproape toți băieții mari, inclusiv de Microsoft, cu impulsul lor de adoptare a PWA în Windows 10. Nu va trece mult până când vom vedea un viitor plin de aplicații web progresive, cum ar fi cel pe care l-a imaginat Steve Jobs:

Motorul complet Safari este în interiorul iPhone. Și astfel, puteți scrie aplicații uimitoare Web 2.0 și Ajax care arată și se comportă exact ca aplicațiile de pe iPhone. Și aceste aplicații se pot integra perfect cu serviciile iPhone. Pot efectua un apel, pot trimite un e-mail, pot căuta o locație pe Google Maps.

Steve Jobs, 2007