Esempi di web app progressive PWA: dalle piattaforme di blogging alle home page aziendali

by Janeth Kent Date: 10-05-2020

Per spiegare l'essenza e l'idea che sta dietro le web app progressive, gli sviluppatori web hanno creato molteplici metafore. "Le web app native", "Web apps vitaminizzate", etc. Anche se per lo più questi confronti sono ancora troppo vaghi per chiarire perché le PWA sono state sotto i riflettori negli ultimi due anni.

PWA in sintesi

La lotta iniziale con le web app è stata quella di renderle disponibili per tutti i dispositivi e le condizioni di rete, quindi non sorprende che le web app progressive affrontino proprio questa sfida. Per battere la velocità dei più comuni HTTP/1, i PWA utilizzano HTTP/2 e trasferiscono i dati in piccoli pezzi. Inoltre, queste applicazioni sono in grado di memorizzare automaticamente i dati nella cache, il che consente loro non solo di migliorare le prestazioni complessive, ma anche di funzionare offline. Infine, un'applicazione web progressiva può essere installata su un dispositivo mobile come se si trattasse di una normale applicazione mobile. Sarà anche elencata nel menu 'Apps' del vostro sistema operativo, ma peserà solo una ventina di kilobyte.

Progressività e prestazioni

Non è necessario utilizzare tutte queste funzionalità, tuttavia: ogni team di sviluppo di applicazioni web dovrebbe decidere da solo di quali caratteristiche hanno bisogno. Come ha dimostrato la nostra stessa ricerca, gli sviluppatori implementano tutte le funzionalità progressive solo nel 30% dei casi. Molti optano per HTTP/2 per velocizzare le prestazioni, ma rifiutano le opzioni della modalità offline e dell'installazione della schermata iniziale. A seconda della quantità di queste funzionalità PWA abilitate, Google Lighthouse - uno strumento di audit PWA - assegna a un'applicazione web un punteggio per la sua "progressività".

Lo stesso strumento di audit dà anche ad un'applicazione web un punteggio per le prestazioni. Uno degli aspetti principali che permette di valutarla è la velocità di caricamento delle pagine. Secondo Google, una prima vernice significativa di una web app progressiva dovrebbe apparire in non più di 2 secondi e diventare interattiva dopo meno di 5 secondi. Altrimenti, un utente frustrato abbandonerà semplicemente l'applicazione.

Esempi di web app progressive

Ormai, dovrebbe essere abbastanza ovvio che le web app progressive non hanno un aspetto diverso dalle comuni web app. Infatti, molte di esse assomigliano così tanto alle normali applicazioni web che non le riconoscerete nemmeno come PWAs. Inoltre, alcune applicazioni web progressive hanno un design obsoleto che non le fa sembrare affatto 'progressive'.

Date un'occhiata agli esempi di applicazioni web progressive qui sotto e di seguito i risultati dell'audit di Google Lighthouse. Qui, elencheremo solo applicazioni con un alto punteggio PWA e una soluzione UI/UX accorta o creativa.

Dev.to – Piattaforma di blogging

PWA: 100; Performance: 90; Accessibilitá: 69; Best Practices: 88; SEO: 80

Dev.to è una popolare piattaforma di blogging per gli sviluppatori. Nonostante la sua popolarità, non è stata inclusa nella maggior parte degli elenchi PWA, il che è sorprendente se guardiamo il punteggio dell'applicazione web di 100 per la progressività e 90 per le prestazioni. Tali risultati possono essere presi come un elogio da Google Lighthouse e per di più - è un alto punteggio per una piattaforma di blogging.

Pieno di informazioni testuali e visive fornite da diversi utenti, i blog e le piattaforme di notizie sono una delle applicazioni web più difficili da ottimizzare. Tuttavia, Dev.to ha dimostrato che è ancora possibile per un blog popolare avere un PWA.

Umbrella – App Meteo

PWA: 100; Performance: 94; Accessibilitá: 67; Best Practices: 100; SEO: 89

Per le applicazioni meteo, un design creativo non è solo un capriccio del creatore, ma piuttosto una necessità strategica. Dopo tutto, chiunque può ottenere un aggiornamento meteo semplicemente aprendo Google. Per conquistare il suo pubblico, un'applicazione meteo web deve stabilire una connessione emotiva con i suoi utenti, e questo è chiaramente l'obiettivo dell'interfaccia utente di Umbrella.

Ma ciò che è meglio è che il design creativo di questa applicazione non ostacola le prestazioni. Come si vede dai punteggi, Umbrella è completamente progressivo e, grazie all'altissima velocità di caricamento, ha un punteggio prestazionale di 94.

HighTide – Localizzatore di onde per surfisti

PWA: 100; Performance: 67; Accessibilitá: 55; Best Practices: 94; SEO: 89

Come Umbrella, questa web app progressiva colpisce per il suo design seducente e colorato. Tuttavia, il concetto di HighTide non è così banale: questo PWA è un localizzatore di maree intelligente per gli appassionati di surf.

L'app ha ottenuto il punteggio più alto per la progressività, ma ha un punteggio leggermente inferiore alla media delle prestazioni, il che si spiega con il momento in cui questa applicazione web deve diventare interattiva. Nonostante il lavoro con i dati di localizzazione e con una funzionalità simile a quella di Umbrella, HighTide è più lento e dovrebbe essere ottimizzato.

Workopolis – Cerca lavoro

PWA: 100; Performance: 89; Accessibilitá: 100; Best Practices: 88; SEO: 80

Questo PWA permette agli utenti di cercare un lavoro utilizzando vari filtri. Con uno schema di colore verde/bianco abbastanza semplice, l'interfaccia utente di Workopolis è accattivante e minimalista e soddisfa tutti gli standard di usabilità di base.

I risultati dell'audit presentati da Google Lighthouse sono impressionanti qui. Oltre ad essere completamente progressiva, a caricamento rapido e ad alte prestazioni, Workopolis ha punteggi elevati su altri aspetti di audit che valutano l'accessibilità, le pratiche utilizzate per lo sviluppo e il SEO.

Riepilogo

Come possiamo vedere dagli esempi di successo delle web app progressive di cui sopra, progressività e prestazioni sono strettamente connesse. Più alte sono le prestazioni di una web app, più progressiva è. Questo supporta l'ideologia PWA e stabilisce standard elevati per gli sviluppatori di applicazioni web. È anche evidente che le web app progressive efficaci appartengono a varie categorie, quindi, non importa quale web app si abbia, è possibile aggiornarla ricreandola come PWA.

.

 
by Janeth Kent Date: 10-05-2020 visite : 9257  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 
Clicky