Cos'è la PWA? Una facile spiegazione per i non tecnici

Dovresti sapere in anticipo che questo post è scritto dal punto di vista di un marketer. (Beh, so leggere e scrivere un po' di HTML e CSS, posso capire Javascript in una certa misura, ma questo non fa di me un tecnico).

Cos'è la PWA?

PWA ( P rogressive Web A pps) consente a un browser Web di avere l'aspetto di un'app mobile nativa (ovvero app scaricate da iOS e Android Store). Queste app native sono ottimizzate per un'esperienza mobile fluida pur avendo alcune funzionalità uniche come le notifiche push web. La tecnologia PWA sfrutta l'esperienza di navigazione web su browser come Chrome e Safari, in modo che si avvicini a quella di un'app nativa. Questo, di conseguenza, migliora il traffico e il coinvolgimento nel web.

Il termine è stato introdotto per la prima volta da Google nel 2015. 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, diventa sempre più potente ”.

PWA è lo stesso di un sito web?

Sì, le applicazioni Web progressive sono siti Web.

Tuttavia, grazie alla moderna tecnologia web, sembrano semplicemente un'app. Ciò significa che gli utenti navigheranno nelle app Web progressive sul proprio browser con un URL proprio come fanno con qualsiasi sito Web, ma subito dopo essere atterrati sulla PWA, avranno l'esperienza di utilizzare un'"app", direttamente sul proprio browser, senza la necessità di Scarica e installa.

Essere una "app" non significa che la PWA sia limitata ai dispositivi mobili. Possono essere implementati anche su desktop. In effetti, è probabile che tu abbia visitato spesso PWA senza nemmeno rendertene conto. Se hai mai navigato su Instagram, Pinterest o Tinder sul tuo laptop, allora congratulazioni! Hai incontrato alcuni degli utilizzatori di PWA di maggior successo sul web.

Diamo un'occhiata a un esempio di un sito Web PWA, in quanto può aiutarti a comprendere PWA molto più facilmente.

Un esempio di PWA

Il sito Web di eCommerce G-SP è una PWA. Quando visiti il ​​sito Web su dispositivo mobile, puoi effettivamente aggiungere l'URL del sito Web alla schermata iniziale del telefono.

Quindi, ogni volta che vuoi rivisitare il sito Web, è proprio lì con un'icona sulla schermata iniziale, proprio come qualsiasi altra app come Facebook o Linkedin.

Aprendo l'app Web G-SP dalla schermata iniziale, puoi vedere che il sito Web è ora a schermo intero senza barra di ricerca del browser. Inoltre, nella parte inferiore è presente un menu di navigazione simile a un'app. Inoltre, quando scorri e tocchi, sembra liscio come il burro, il che è diverso da alcune esperienze di navigazione web che potresti aver avuto prima.

 Lettura consigliata:
- Caso di studio G-SP PWA: una trasformazione per un'esperienza mobile di prim'ordine
- I primi 3 casi d'uso di PWA

Suggerimenti per capire se un sito Web è una PWA

A meno che tu non sia uno sviluppatore e scavi nel codice sorgente del sito, non c'è un modo certo per te di dire esattamente se un sito Web è basato sulla tecnologia PWA.

Detto questo, ci sono alcuni trucchi che, sebbene non garantiscano un risultato esatto, possono darti alcuni segni che un determinato sito Web è una PWA.

Sito a pagina singola

Questo è il modo più semplice per capire se un sito Web può essere una PWA. Si basa sulla natura della PWA: le Progressive Web App sono tecnicamente un sito Web a pagina singola. Ciò non significa che un sito Web basato su PWA abbia solo una singola pagina. Significa che l' evento di visualizzazione della pagina si verifica solo una volta, quando un utente carica inizialmente il sito Web. Successivamente, tutti i caricamenti delle pagine vengono gestiti da Javascript. Questo è diverso dai normali siti Web, in cui ogni modifica di pagina provoca un ricaricamento della pagina insieme all'intera fonte HTML.

Quindi come funziona? Bene, molto semplice: dai un'occhiata alla scheda attiva sul tuo browser. Se il sito è una PWA, quando cambi pagina il sito non si ricarica, il che significa che non c'è animazione di "caricamento" nella scheda del browser.

Possiamo dire che il sito web del New York Times non è un PWA:

Diamo un'occhiata al nostro sito Web, SimiCart, come esempio:

Capito quello che intendo? Il sito non si ricarica quando cambi pagina! Tecnicamente stai solo su una "pagina" tutto il tempo. Ecco perché le pagine PWA si caricano così velocemente e senza intoppi. Tutte le pagine vengono precaricate la prima volta che visiti il ​​sito e ti vengono consegnate in seguito. Non dipendono dalla velocità della tua rete e possono funzionare anche offline!

Operatori di servizio

No, questi non sono lavoratori umani. Service Workers è il nome della tecnologia alla base di un'app Web progressiva, che ne potenzia le funzionalità offline, le notifiche push e la memorizzazione nella cache delle risorse. Secondo Google, i Service Workers sono al centro delle tecniche PWA. Quindi, se riusciamo a capire se un sito Web utilizza la tecnologia Service Workers, possiamo dire se il sito potrebbe essere una PWA.

Se stai utilizzando browser basati su Chrome, puoi verificarlo facilmente utilizzando lo strumento Inspector. Fare clic con il pulsante destro del mouse sul sito Web che si desidera controllare, fare clic su Ispeziona elemento. Quindi, vai alla scheda Applicazione > Operatori di servizio. Puoi facilmente vedere se ci sono dei Service Worker su quel sito.

Ancora una volta, questo trucco ti dà solo un suggerimento della possibilità che un determinato sito Web sia un PWA. Sebbene siano una parte fondamentale di PWA, Service Workers non è un'esclusiva di PWA. I siti Web non PWA possono anche sfruttare i Service Workers per migliorare la propria funzionalità.

Se vuoi saperne di più su PWA Service Worker, abbiamo un articolo esclusivo per farti imparare tutto su questa straordinaria tecnologia.

origine sicura HTTPS

Tuttavia, puoi dire esattamente se un sito Web non è una PWA guardando il suo URL. Se l'URL di un sito Web inizia con http:// anziché https:// , non è una PWA. Questo perché PWA può funzionare solo su siti Web in esecuzione su un dominio sicuro, che è HTTPS .

Quanto è popolare PWA?

Come suggerisce Google, PWA è "il futuro dell'app mobile", PWA sta guadagnando popolarità, prima tra i grandi attori, poi tra le piccole imprese e le organizzazioni.

Sta guidando le competizioni quasi ovunque, dalla piattaforma Windows ai principali mercati di app come Google Play Store

Puoi scoprire che i siti Web di molti grandi nomi sono PWA come Telegram, AliExpress, FlipBoard e persino le versioni PWA di giochi PWA familiari come 2048 o Web Flap.

Vantaggi PWA: cosa possono fare le Progressive Web App?

Al momento della stesura di questo articolo, PWA può già fare la maggior parte delle cose precedentemente esclusive delle app native. Ciò include l'accesso a funzionalità a livello di dispositivo come fotocamera e microfono, GPS, modalità offline, accesso ai file e molto altro. Per avere una panoramica di ciò di cui è capace PWA, puoi dare un'occhiata a https://whatpwacando.today/ .

Pertanto, l'app web è un'ottima scelta per coloro che vogliono migliorare l'esperienza mobile del proprio marchio online, senza investire in un'app mobile.

Analizziamo un po' più a fondo i vantaggi di PWA rispetto alle normali app mobili e ai siti Web reattivi:

PWA vs sito web reattivo

Rispetto, ad esempio, a un sito Web , una PWA è superiore per i seguenti motivi:

• Velocità: a parità di contenuto, PWA si carica più velocemente dei normali siti Web grazie alla tecnologia Service Workers . È veloce al primo caricamento e ancora più veloce dal secondo caricamento in poi poiché memorizza nella cache tutti i contenuti e li fornisce quando necessario.
• Modalità offline: la disponibilità offline è resa possibile anche dalla tecnologia Service Workers. Con i service worker opportunamente integrati, tutti i contenuti vengono precaricati la prima volta che visiti la PWA e successivamente vengono consegnati utilizzando Javascript, rendendo PWA il nuovo approccio di riferimento per i siti Web la cui esperienza ininterrotta è un must . Abbiamo una guida su come far funzionare offline la tua PWA, nel caso tu ne abbia mai bisogno.
• Notifica push Web: proprio come un'app mobile nativa, PWA può inviare notifiche push alla schermata iniziale degli utenti direttamente dai browser Web mobili. Questo è particolarmente utile per i negozi di eCommerce per inviare offerte e offerte personalizzate ai propri clienti. Web push per PWA Android è stato abilitato per anni e, fortunatamente, arriverà molto presto su PWA iOS.
• Aggiungi alla schermata iniziale : questa funzione richiede agli utenti mobili di "installare" la PWA. Dopo che l'utente ha accettato la richiesta, la PWA verrà aggiunta alla schermata iniziale del dispositivo mobile e verrà eseguita come qualsiasi altra app installata. Ecco la nostra guida per aggiungere PWA alla schermata iniziale. Non mancare!

Il vecchio prompt "Aggiungi alla schermata iniziale" su Chrome avrà un aspetto simile a questo:

 >> Letture consigliate: confronto completo tra PWA e sito Web reattivo

PWA vs app nativa

E non solo le PWA sono migliori dei siti Web, ma i marchi ora scelgono anche le PWA rispetto alle app native a causa dei seguenti vantaggi offerti dalle PWA:

• Multipiattaforma : una volta creata la PWA, è possibile accedervi tramite qualsiasi piattaforma mobile come Android, iOS o Windows, poiché la PWA è basata su browser, non su sistema operativo.
• Aggiornato: le modifiche apportate alla PWA avranno effetto immediato non appena gli utenti aggiorneranno la pagina.
• Indicizzabilità : poiché PWA è tecnicamente ancora un sito Web, il suo contenuto può essere indicizzato e individuato su motori di ricerca come Google. Ciò apre opportunità per le pratiche SEO (Search Engine Optimization), che consentono a PWA di raggiungere una base di utenti più ampia rispetto all'app nativa.
• Non c'è bisogno di pubblicare : con le app native, il processo di pubblicazione degli app store a volte può essere una vera seccatura. Immagina di inviare la tua app agli app store, aspettando con ansia 5 giorni, solo per ricevere indietro un rifiuto con un motivo che ti porta 10 volte a rileggere e ancora non sai di cosa sta parlando. E in alcuni casi, la tua app potrebbe non essere mai accettata, mai. (Negozi di sesso o prodotti di svapo, chiunque?). Con PWA, non c'è invio di app. Che sollievo! Se vuoi pubblicare le tue PWA su Apple Appstore, Google Play e Microsoft Store, ecco come fare!
• Basso costo di sviluppo : poiché la PWA può essere sviluppata una volta e quindi essere disponibile per qualsiasi piattaforma mobile e browser che la supporta, il costo di sviluppo per la PWA è relativamente piccolo rispetto alle app native. Un altro motivo è che PWA utilizza linguaggi e tecnologie di programmazione che sono più comunemente compresi e hanno una base di sviluppatori molto più ampia.

 Lettura consigliata:
- App Web progressiva vs App nativa: quale ti si addice di più?
- Vantaggi di PWA per l'eCommerce

Svantaggio della PWA

Ovviamente, tutto questo suona troppo bello per essere vero; e quando qualcosa sembra troppo bello per essere vero, le persone spesso chiedono "Ok, qual è il trucco".

PWA, nonostante le sue caratteristiche che definiscono il settore, ha ancora i suoi svantaggi:

• Raggiungibilità

Dato che la tecnologia è ancora nuova e tutto il resto, non esiste un mercato di app per le PWA, il che a sua volta riduce la sua capacità di raggiungere in un certo modo una gamma più ampia di pubblico. Tuttavia, ci sono movimenti di aziende note come Microsoft con la loro incorporazione di PWA in Microsoft Store, rendendo un futuro di tutte le cose PWA in Windows 10 non sembra così inverosimile.

• Comunicazione con altre app installate :

Poiché PWA è ancora fondamentalmente ed essenzialmente una pagina Web simile a un'app, può essere limitata in molti modi. Il limite più grande potrebbe essere che si tratta di una comunicabilità tra applicazioni limitata , che potrebbe rappresentare un problema per gli sviluppatori.

FAQ

A cosa serve la PWA?

Un'app Web veloce, affidabile e divertente da usare può essere utilizzata per molti scopi. Ad esempio, Tik Tok, le PWA di Aliexpress inducono le persone a familiarizzare con i siti, quindi invitali a scaricare le loro app native. Spotify utilizza PWA per ottimizzare ulteriormente le prestazioni e la reattività del proprio sito Web, offrendo così ai propri utenti un'altra opzione oltre a scaricare la propria app. Anche giochi come pacman o 2048 utilizzano PWA per raggiungere più utenti web.

Qual è la differenza tra PWA e un'app normale?

Dal punto di vista tecnico, un'app nativa deve essere scaricata dal suo app store mentre è possibile accedere a PWA tramite browser web. Dal punto di vista aziendale, la PWA può essere più SEO-friendly, più economica e più veloce da sviluppare. Nel frattempo, un'app nativa è ancora la migliore per progetti mobili complicati, inoltre può creare una maggiore credibilità del marchio.

Le PWA funzionano solo su dispositivi mobili?

No, PWA funziona sia su desktop, mobile e tablet.

Qual è il linguaggio di programmazione di PWA?

PWA è costruito con il linguaggio di programmazione popolare e le tecnologie web tra cui HTML, CSS, Javascript e WebAssembly.

Conclusione

"La PWA sostituirà le app native?"

Pensiamo di no.

Ancora.

Nel quarto trimestre del 2019, ci sono quasi 3 milioni di app su Google Play e oltre 2 milioni di app su Apple App Store (Statista, 2019). Questo numero è ancora in crescita e non sembra che tutte quelle app verranno sostituite a breve. L'abitudine dell'utente è una cosa e non è facile cambiare.

Detto questo, le Progressive Web App hanno un grande potenziale. In SimiCart, crediamo che le Progressive Web Apps siano il futuro. Con la sua velocità, flessibilità di layout e funzionalità, PWA è destinata a sostituire il sito desktop, il sito mobile, le app mobili native e persino le applicazioni Windows native. Sì, avete sentito bene, applicazioni Windows . Solo nel mondo dell'e-commerce, l'app Web progressiva è attualmente l'approccio di riferimento per i proprietari di negozi che desiderano un'esperienza leggera, reattiva e coinvolgente per gli acquirenti online.

In effetti, le statistiche mostrano che un ritardo di 1 mese nell'implementazione della PWA può comportare una perdita di entrate fino a $ 1,4 milioni e altri $ 6,8 milioni se i marchi decidono di ritardarla di sei mesi.

Per i proprietari di negozi di e-commerce che cercano una soluzione Magento PWA perfetta a 360 gradi, qui su SimiCart offriamo un pacchetto completo per te e il tuo negozio.