Ne hai sentito parlare sempre più nel corso degli ultimi anni ed ora vuoi sapere cosa sono le Progressive Web App (PWA)?
Cercherò di spiegarti perché molti sviluppatori pensano che queste siano il futuro del web.

 

Cosa sono

Una PWA è una web app che, grazie all’utilizzo di alcune tecniche, diventa una vera e propria applicazione nativa.
Certo, rispetto ad altre innovazioni del settore sembra essere qualcosa di piuttosto lento ad emergere. Ma a crederci sono proprio dei colossi come Chrome e Mozilla, quindi io eviterei di dar per scontato questo progetto, no?

 

Perché le PWA?

Penserai che le app native funzionano già benissimo… ed hai ragione cavolo!
Ma c’è uno studio che spiega come mediamente gli utenti spendono l’80% del proprio tempo (passato sullo smartphone) utilizzando solamente tre app!
Questo significa che la maggioranza delle applicazioni installate è inutile perché occupa spazio (per alcuni prezioso) e talvolta consuma grandi quantità di dati mobili.

Ci sono inoltre molti siti web che non sono del tutto performanti in termini di velocità e questo problema si aggrava quando la connessione internet è debole.
Ammettilo, ti sarà capitato sicuramente di vedere la schermata grigia del tuo browser che, in caso di connessione assente o debole, non riesce a collegarsi alla rete.
E’ così entrano in gioco le PWA.
Utilizzandole otterrai il meglio delle performance anche quando la connettività è bassa o del tutto assente.
Ma non solo, sviluppare un’applicazione nativa è spesso più costoso dello sviluppo di un sito web.

Scoprirai che trasformare il tuo sito o la tua web app in una PWA non richiederà troppi sforzi.
Non dovrai più sviluppare separatamente il sito e le app (una per ogni store) e guadagnerai molto di più in termini di visibilità, trattandosi a tutti gli effetti si un sito internet.

 

Cosa posso fare con una pwa?

Abbiamo elencato sino ad ora i vantaggi pratici che si ottengono da una PWA.
Ma vediamo ora cosa si può realizzare e cosa ancora no.
Trattandosi di un’applicazione web ti starai chiedendo come potrai allora utilizzare i sensori dello smartphone, la fotocamera e tutto ciò a cui un’app nativa ha accesso.
Diciamolo subito: è già disponibile l’accesso alla maggior parte delle periferiche anche se alcune delle funzionalità come il recupero di contatti, sms e connessione bluetooth non sono ancora disponibili. In realtà l’accessibilità delle funzioni dipende dai browser e da cosa questi hanno implementato sino ad ora. La mancanza di supporto per alcune di queste cose è del tutto normale vista la giovane età della tecnologia in questione ma siamo sicuri che la situazione continuerà a cambiare in positivo (per maggiori informazioni visita il sito https://whatwebcando.today/).
Tra i punti più in risalto delle PWA spiccano le notifiche push che puoi già utilizzare senza alcun problema. Si tratta di un aspetto molto positivo nell’ottica della comunicazione con l’utente ed è qualcosa che fino a poco tempo fa era riservato solo alle app native.

Questo ci fa capire quanto i grandi esponenti delle PWA stanno spingendo per migliorare la tecnologia in questione e cambiare radicalmente l’approccio tradizionale alle app.
Ma non solo, fino ad ora i più sviluppati del settore, come già detto, sono Chrome e Firefox.

Apple inizialmente ha preferito non spingersi troppo oltre ma negli ultimi tempi ha cominciato a garantire sempre più supporto alle PWA, ovviamente sul browser Safari.

Le basi di una PWA

Vediamo ora in termini più o meno tecnici come funziona una PWA.
Per essere conforme ad un’applicazione nativa si utilizzano:

  • file manifest.json
  • service worker

Il primo è un file json contenente le informazioni base dell’applicazione. Qui stabilirai il nome della tua app, il modo in cui deve essere lanciata, le icone e tante altre piccole configurazioni.
Deve essere situata nella root del progetto e deve essere inclusa nell’head di ogni
pagina html utilizzata dall’app.

Es:
<head>
<!– title, css, meta ed altro codice –>
<link rel=”manifest” href=”/manifest.json” />
</head>

Il service worker invece è un file JavaScript che fa da proxy, ovvero intercetta le richieste e, in base a come è stato programmato, restituisce contenuti dalla cache o dalla rete.
Come è semplice immaginare otterrai un miglioramento netto delle prestazioni una volta deciso cosa andrà salvato in memoria e cosa no. Oltre ad avere un’app che potenzialmente funziona offline e che puoi aggiungere alla home del tuo smartphone o tablet.

 

Requisiti minimi

La prima regola da rispettare è la connessione. Per innalzare i canoni di sicurezza il sito dovrà essere servito da una connessione sicura HTTPS.
Dovrai avere un file manifest valido che indichi alcune informazioni di base come il nome dell’app, due icone, rispettivamente da 192×192 e 512×512, l’url di partenza.
Responsive: la tua app deve avere un layout che renda semplice la navigazione da dispositivi mobili.
Cross browser: la PWA deve funzionare sui principali browser.

Conclusioni

Come puoi vedere ci sono alcune regole da rispettare ma questo è niente considerando i benefici che puoi apportare al tuo prodotto finale.

Considera inoltre che se hai già un sito più o meno moderno non dovrai fare altro che modificarlo in modo non invasivo per ottenere in poco tempo una PWA e iniziare a sperimentarne il funzionamento.

Non dovrai nemmeno imparare nuovi linguaggi trattandosi di semplice codice Javascript.

Sono certo che non rimarrai deluso!

 

Se ti è piaciuto questo articolo aiutaci lasciando un commento oppure condividendolo nei social tramite gli appositi bottoni.

Iscriviti al nostro gruppo facebook ed entra a far parte della community.

Se vuoi rimanere sempre aggiornato, lasciaci la tua mail a questo indirizzo.