Responsive Web Design e Progressive Web App (PWA): le differenze

Dato che questi due sono così simili nell'aspetto e nelle prestazioni, devi chiederti perché non esiste un confronto più dettagliato tra i due approcci popolari allo sviluppo web: il responsive web design e l'app Web progressiva. Bene, questo è tutto . In questo articolo, confronteremo il responsive web design con l'app Progressive Web e scopriremo dove differiscono davvero l'uno dall'altro.

Web design reattivo

Cos'è

Il responsive web design (RWD) è un approccio allo sviluppo web descritto per la prima volta da Ethan Marcotte nel 2010, cinque anni prima della concezione della Progressive Web App.

Come funziona

Fondamentalmente, la filosofia del responsive web design è che la progettazione e lo sviluppo dovrebbero essere realizzati con l'obiettivo di rispondere al dispositivo dell'utente, il che significa rispondere al comportamento, alle dimensioni, alla piattaforma e all'orientamento del dispositivo in uso. Ciò si ottiene con l'uso di griglie fluide, immagini flessibili e query multimediali CSS:

Griglie fluide, immagini flessibili e media query sono i tre ingredienti tecnici per un web design reattivo...

Ethan Marcotte, Responsive Web Design

Griglie fluide

I siti Web reattivi progettati con griglie fluide possono gestire meglio le diverse dimensioni dello schermo sul mercato poiché, invece di definire dimensioni basate sui pixel, la griglia fluida adotta un nuovo calcolo basato sulla percentuale.

Immagini flessibili

Le immagini sul Web non sono naturalmente fluide, ma con alcune configurazioni (proprietà width impostata su 100% e proprietà height impostata su auto ), qualsiasi immagine può essere resa reattiva su tutti i dispositivi.

Query sui media CSS

Sebbene una pagina Web reattiva con immagini flessibili e griglie fluide sia tecnicamente reattiva, non sembra buona come potrebbe essere. È qui che entrano in gioco le query multimediali CSS in quanto vengono utilizzate per creare un'esperienza ancora migliore, su misura per diversi dispositivi. Queste esperienze su misura sono spesso introdotte dall'uso dell'aggiunta di punti di interruzione che hanno effetto su dimensioni dello schermo specifiche.

Nel complesso, il responsive web design ha reso il Web di oggi molto più accessibile, poiché l'approccio elimina la necessità di ulteriori fasi di sviluppo che in precedenza erano necessarie per adattarsi alle diverse dimensioni dello schermo sul mercato. O, nelle parole del suo creatore, questo approccio allo sviluppo web ci permette finalmente di “ progettare per il flusso e riflusso delle cose ”.

Esempi

I siti Web reattivi sono un luogo comune al giorno d'oggi e quasi tutti i siti Web che incontri sono in qualche modo reattivi per natura.

App Web progressive

Cos'è

Coniata per la prima volta da Alex Russel nel 2015, la P rogressive Web App è la prossima evoluzione naturale del Web grazie ai suoi numerosi vantaggi rispetto al tipico sito Web reattivo. La parte “ progressiva ”, secondo Pete LePage – Google Developer Advocate, può essere spiegata come “ man mano che l'utente costruisce progressivamente una relazione con l'app nel tempo, questa diventa sempre più potente ”.

Per dirla in parole povere, una PWA è il tuo sito Web simile a un'app con (quasi) tutte le funzionalità che puoi aspettarti da un'applicazione mobile nativa , comprese le notifiche push, le funzionalità offline e così via. E per questo motivo, l'intera esperienza è un passo avanti rispetto alla sua controparte del sito Web reattivo poiché PWA può conservare tutti i presunti vantaggi che derivano da una piattaforma basata sul Web.

 Articolo correlato: Che cos'è un'applicazione Web progressiva?

Come funziona

In realtà è abbastanza facile riassumere i componenti principali di una PWA. In sostanza, per rendere possibili tutte le caratteristiche progressive sopra citate, questi sono i requisiti:

Manifesto dell'app Web

Il manifest dell'app Web è un file JSON che fornisce i metadati necessari per il processo di installazione della tua PWA e determina come la tua PWA si presenta nella schermata iniziale dell'utente.

Lavoratori di servizio

Considerato universalmente come il componente fondamentale che rende possibili tutte le funzionalità progressive di PWA, i service worker vengono eseguiti indipendentemente dal browser e su un thread diverso dal JavaScript principale.

Contesti sicuri

Come nuovo standard del Web, è necessario che una PWA debba essere separata su un protocollo sicuro: HTTPS. Ciò garantisce una comunicazione sicura tra l'utente e il server e, in cambio, assicurando un'esperienza priva di rischi.

Esempi

Poiché le PWA si comportano in modo non diverso dalle applicazioni mobili native, potresti aver già visitato un sito PWA senza saperlo. Pensa a grandi siti simili a app come Instagram e Pinterest: sono tutti basati su PWA.

 Letture consigliate: 12 migliori esempi di app Web progressive nel 2020

Dove si sovrappongono

Un'esperienza simile con caratteristiche moderne

Se finora tutto ha senso per te, dovresti vedere che il responsive web design (RWD) e il PWA si sovrappongono molto quando si tratta di esperienza utente. Tecnicamente, PWA è reattivo, poiché nell'approccio è realizzato per essere adatto alla visualizzazione su tutti i dispositivi, con un tocco moderno per abilitare funzionalità più simili a app.

E poiché sono entrambi approcci allo sviluppo web, condividono quasi tutti gli stessi vantaggi del Web che includono:

• Un URL, una base di codice per tutte le piattaforme
• Maggiore sicurezza con HTTPS
• Migliore rilevabilità e sempre aggiornato

Dove differiscono

È qui che le cose si fanno interessanti, poiché questi due approcci allo sviluppo web, sebbene per lo più simili nell'aspetto, differiscono molto nei loro impatti nel mondo reale.

In termini di caratteristiche

Una PWA, per definizione, è più ricca di funzionalità rispetto al tipico sito Web reattivo. Sfruttando i recenti progressi nelle tecnologie Web, ad esempio i service worker e il manifest delle app Web, PWA è in grado di fornire funzionalità che in precedenza erano esclusive delle app mobili native come:

Aggiungere alla schermata Home

Con i lavoratori del servizio registrati e un manifesto dell'app Web, PWA è installabile su tutti i dispositivi che dispongono di un browser di supporto.

>> Ulteriori informazioni: crea la tua prima PWA

Le notifiche push

Attraverso gli operatori del servizio, puoi inviare notifiche e visualizzarle sui dispositivi dell'utente proprio come farebbe un'applicazione nativa. Questa è una funzionalità relativamente recente del Web che sfrutta Push API, Notifications API e Web Push Protocol; e nel prossimo futuro, questa funzionalità sta migliorando solo grazie all'avvento di Notifications Triggers e Badging API.

Funzionalità offline

Grazie all'aiuto del proxy di rete programmabile interno al browser, ovvero i service worker , PWA può memorizzare nella cache in modo proattivo e servire contenuto offline senza dover fare affidamento su meccanismi di memorizzazione nella cache obsoleti come la cache HTTP.

Note : i siti Web reattivi possono comunque trarre vantaggio da tutte le API esistenti dal Web per offrire anche un'esperienza utente ottimale: è solo che non otterrai tutte le funzionalità che dipendono dagli operatori dei servizi.

 Letture consigliate: Progressive Web App (PWA) e Hardware Access

In termini di prestazioni

Poiché i siti Web reattivi sono ancora il tipico sito Web trattenuto da tutti gli svantaggi associati all'attuale meccanismo di memorizzazione nella cache HTTP, è ragionevole aspettarsi prestazioni migliori da PWA poiché utilizza un meccanismo di memorizzazione nella cache più nuovo e più orientato alle prestazioni chiamato service worker.

Meccanismo di memorizzazione nella cache più veloce

Con gli addetti ai servizi registrati, puoi avere il controllo esattamente su ciò che viene memorizzato nella cache e, di conseguenza, promuovere esperienze migliori per i visitatori di ritorno.

Anche l'impatto sul rendimento reale dei lavoratori dei servizi non è qualcosa che non è stato attentamente osservato. Utilizzando il tempo per la prima pittura come metrica per misurare la prima esperienza dell'utente con un sito Web, Google stesso ha condotto uno studio osservando le prestazioni dell'app Web I/O di Google con un gruppo controllato (in cui un addetto ai servizi controlla l'app Web) e un gruppo supportato (in cui il servizio funziona è supportato dal browser in uso ma non sta ancora controllando l'app Web).

I risultati sono stati particolarmente impressionanti su desktop, poiché qui possiamo vedere che gli addetti all'assistenza hanno fatto la loro parte per ridurre il tempo di prima firstpaint originale (912 ms) a soli 583 ms . Questo è il più vicino possibile a un'esperienza istantanea.

Le cose sono, tuttavia, un po' meno impressionanti sui dispositivi mobili:

Qui possiamo vedere che la coda del gruppo controllato sembra ancora un po' simile al gruppo supportato. Ciò è in gran parte dovuto al fatto che su dispositivi mobili, i thread di lavoro del servizio non sono così ottimizzati e richiedono più tempo per avviarsi rispetto al desktop.

Nel complesso, l'aumento delle prestazioni ottenuto con gli addetti ai servizi, o in altre parole, con PWA, è a dir poco fenomenale. C'è, ovviamente, ancora del lavoro da fare per quanto riguarda i lavoratori dei servizi mobili; ma riteniamo che, nel complesso, sia ancora un passo marginale verso ciò che era il Web una volta, e un passo nella giusta direzione.

In termini di sicurezza

HTTPS: la linea di divisione

Sebbene un tipico sito Web reattivo possa essere protetto quanto una PWA, non è necessario che i siti Web reattivi utilizzino protocolli di comunicazione sicuri. Questo è il caso opposto con i siti Web basati su PWA poiché Google, fondatore di PWA, richiede che tutte le comunicazioni tra il server e il client in una PWA siano crittografate tramite l'uso di HTTPS.

La maggior parte delle funzionalità relative a una PWA come la geolocalizzazione e persino gli operatori di servizio sono disponibili solo dopo che l'app è stata caricata tramite HTTPS.

Documenti Web MDN, app Web progressive (PWA)

 Articolo correlato: hai bisogno di HTTPS?

Conclusione

L'aumento delle prestazioni sopra menzionato ottenuto con gli addetti ai servizi, combinato con funzionalità aggiuntive simili a app come notifiche push, aggiunta alla schermata iniziale (e nel prossimo futuro, geofencing e sincronizzazione periodica), dimostrano tutto di rendere PWA il candidato adatto per essere il prossimo evoluzione del web. A partire da ora, il movimento PWA è già ampiamente incoraggiato da quasi tutti i grandi, inclusa Microsoft con la loro spinta all'adozione di PWA in Windows 10. Non passerà molto tempo prima che vedremo un futuro pieno di app Web progressive, come quello che Steve Jobs aveva immaginato:

Il motore Safari completo è all'interno di iPhone. E così, puoi scrivere fantastiche app Web 2.0 e Ajax che sembrano esattamente e si comportano esattamente come le app su iPhone. E queste app possono integrarsi perfettamente con i servizi iPhone. Possono effettuare una chiamata, possono inviare un'e-mail, possono cercare una posizione su Google Maps.

Steve Jobs, 2007