{"id":2732,"date":"2022-07-26T12:06:43","date_gmt":"2022-07-26T10:06:43","guid":{"rendered":"https:\/\/reteinformaticalavoro.it\/blog\/?p=2732"},"modified":"2022-07-26T12:06:44","modified_gmt":"2022-07-26T10:06:44","slug":"progressive-web-app-tendenze-e-vantaggi-per-lo-sviluppo-di-un-e-commerce","status":"publish","type":"post","link":"https:\/\/reteinformaticalavoro.it\/blog\/progressive-web-app-tendenze-e-vantaggi-per-lo-sviluppo-di-un-e-commerce\/","title":{"rendered":"Progressive Web App: tendenze e vantaggi per lo sviluppo di un e-commerce"},"content":{"rendered":"\n

Nel contesto attuale, in cui gli utenti hanno aspettative sempre pi\u00f9 grandi rispetto alla disponibilit\u00e0 delle funzionalit\u00e0 pi\u00f9 avanzate, supporto offline, notifiche push e altre funzionalit\u00e0 delle app native, rappresentano solo alcune delle funzionalit\u00e0 sfruttabili ad esempio dalle piattaforme e-commerce che vedono invece nelle Progressive Web App<\/strong> il loro futuro.<\/p>\n\n\n\n

Nell\u2019ultimo periodo infatti si sta sempre pi\u00f9 sviluppando l\u2019idea che le Progressive Web App<\/strong> possano  essere una soluzione ideale da usare per gli e-commerce. Quest’idea nasce dal fatto che le PWA grazie alle loro caratteristiche hanno la capacit\u00e0 di migliorare la user experience<\/strong>  aumentando il coinvolgimento dei clienti cos\u00ec come le conversioni<\/strong>.<\/p>\n\n\n\n

A tale scopo cresce sempre pi\u00f9 l\u2019idea di trasformare i propri siti Web reattivi in \u200b\u200bPWA<\/strong>. Per capire meglio lo sviluppo di questa tendenza \u00e8 utile conoscere  i dati elaborati da Statista<\/a> rispetto alle vendite online, che mostrano come nel 2021, ben il 70% di tutte le visite ai siti Web al dettaglio in tutto il mondo sono state effettuate dagli smartphone<\/strong> e solo negli Stati Uniti entro il 2025, si prevede che oltre il dieci percento di tutte le vendite al dettaglio sar\u00e0 generato tramite il commercio mobile<\/strong>, una cifra che rappresenterebbe una crescita di quasi sette punti percentuali rispetto al 2018.<\/p>\n\n\n\n

Questi dati fanno ben comprendere come l\u2019esigenza di migliorare la user esperience portandola ai massimi livelli sia una necessit\u00e0 impellente per gli addetti ai lavori che si trovano grazie alle PWA a poter rivoluzionare il frontend<\/strong> per ottenere gli obiettivi desiderati in merito alla UX.<\/p>\n\n\n\n

A sottolineare l\u2019impellenza di trovare soluzioni in grado di aumentare la UX troviamo la crescita del  mobile commerce che, secondo i dati, entro i prossimi due anni controller\u00e0 il 73% di tutte le vendite e-commerce nel mondo.<\/p>\n\n\n\n

La facilit\u00e0 di accesso e le prestazioni elevate<\/strong> sono quindi i requisiti richiesti dagli utenti che \u00e8 possibile ottenere grazie alle Progressive Web App.<\/p>\n\n\n\n

Vediamo quindi quali sono le tecnologie usate per lo sviluppo delle PWA<\/strong>.<\/p>\n\n\n\n

Le caratteristiche delle PWA<\/strong><\/strong><\/strong><\/h2>\n\n\n\n

Le PWA sono Web Application che usano le moderne tecnologie dei browser per offrire agli utenti un\u2019esperienza molto similare rispetto a quella offerta da un\u2019applicazione nativa.<\/p>\n\n\n\n

Le Progressive Web App <\/strong>si caratterizzano per essere:<\/p>\n\n\n\n

  • Progressive<\/strong>, grazie ai principi di miglioramento progressivo funzionano con qualsiasi browser;<\/li>
  • Responsive<\/strong> perch\u00e9 si adattano alle dimensioni del device usato;<\/li>
  • Sicure<\/strong> perch\u00e9 sono esposte su protocollo HTTPS;<\/li>
  • Installabili<\/strong>, senza passare dall’app store possono essere salvate sullo schermo;<\/li>
  • Aggiornate<\/strong> sempre grazie ai service worker;<\/li>
  • Linkabili<\/strong>, possono essere condivise attraverso un URL;<\/li>
  • Ricercabili<\/strong>, poich\u00e9 sono indicizzate dai motori di ricerca.<\/li><\/ul>\n\n\n\n

    Una PWA pu\u00f2 praticamente considerarsi a tutti gli effetti un sito Web e attraverso queste i consumatori sono in grado di acquistare prodotti su dispositivi, connessioni o persino sistemi operativi.<\/p>\n\n\n\n

    Gli elementi distintivi<\/strong> delle PWA<\/strong> possono essere riassunti in tre punti:<\/p>\n\n\n\n

    • l\u2019App Shel<\/strong>l, ovvero un codice che viene memorizzato localmente nella cache del browser del terminale mobile, dove sono contenuti gli elementi principali dell\u2019interfaccia utente che i service worker memorizzano in modalit\u00e0 Responsive Web Design per offrire un caricamento veloce delle pagine. \u00c8 proprio grazie a questa Shell che gli utenti possono interagire con l\u2019app grazie a un caricamento progressivo dei contenuti;<\/li>
    • il Service Worker<\/strong>, una tecnologia introdotta da Google che ti consente di controllare le richieste di rete a livello di programmazione, creare esperienze offline e fornire velocit\u00e0 istantanea e permette \u00a0la ricezione di notifiche push, prima impossibile a causa delle limitazioni del browser. In pratica il Service Worker fornisce il meglio delle funzionalit\u00e0 delle app native e tradizionali. I benefici del Service Worker sono: capacit\u00e0 di gestire facilmente le notifiche push, sincronizzazione dei dati in background, capacit\u00e0 di rispondere alle richieste di risorse che sono state generate da altre parti e ricezione di aggiornamenti centralizzati;<\/li>
    • il JSON Manifest<\/strong>, il file contenente i metadati utili all\u2018indicizzazione dell\u2019app che al suo interno ha anche informazioni come icone, colori, caratteri, URL della pagina di destinazione, nome della web application, la dichiarazione dell\u2019orientamento di default della web app, l\u2019abilitazione a impostare la modalit\u00e0 dello schermo. Gli user agent possono creare modalit\u00e0 di fruizione per le Progressive Web App con le stesse caratteristiche delle app native grazie alle modifiche fatte ai metadati dagli sviluppatori.<\/li><\/ul>\n\n\n\n

      Tutte le caratteristiche fin qui evidenziate e le funzionalit\u00e0 proprie delle Progressive Web App le rendono un efficiente strumento di miglioramento della user experience e quindi oggi<\/strong> un elemento fondamentale da conoscere per ogni sviluppatore, che voglia puntare a realizzare un prodotto in grado di migliorare engagement e UX.<\/strong><\/p>\n\n\n\n

      Per  migliorare engagement e UX<\/strong> le PWA si basano su due fattori:<\/p>\n\n\n\n

      • la massimizzazione delle prestazioni<\/li>
      • la semplificazione della navigazione<\/li><\/ul>\n\n\n\n

        Questi fattori si snocciolano in diversi elementi per tradursi in una serie di vantaggi che vedremo nel dettaglio in questo articolo. Vediamo per\u00f2 prima quali sono le tecnologie utili per il loro sviluppo.<\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        Le tecnologie di sviluppo delle Progressive web app<\/strong><\/strong><\/strong><\/h2>\n\n\n\n

        Per lo sviluppo di una progressive web app<\/strong> \u00e8 bene sapere che \u00e8 necessario prima di tutto un sito web su cui poter lavorare e l\u2019uso di HTTPS necessario per la sicurezza.<\/p>\n\n\n\n

        Le progressive web app vengono sviluppate utilizzando HTML5, CSS e JavaScript<\/strong>, ma nello sviluppo possono essere utilizzati ulteriori strumenti. Tra questi troviamo<\/p>\n\n\n\n

        • Magento PWA Studio<\/strong>, un toolkit progettato per le piattaforme Magento 2 responsive che utilizza potenti framework e strumenti come UPWARD, PWA-buildpack e server Magento condiviso<\/li>
        • ScandiPWA<\/strong>, un primo tema Magento open source progettato per siti Web Magento responsive con prestazioni eccellenti perch\u00e9 non richiede middleware, servizi aggiuntivi o database che utilizzando anche GraphQL, consente rendering delle pagine pi\u00f9 veloci\u00a0<\/li>
        • PWA Builder<\/strong>, un utile strumento per trasformare i siti Web responsive in \u200b\u200bPWA<\/li>
        • Angular<\/strong>, il framework utile per semplificare la creazione di PWA affidabili e reattive<\/li>
        • React PWA Library<\/strong>, tra le soluzioni pi\u00f9 popolari per lo sviluppo di PWA \u00e8 un framework utile per costruire interfacce utente dinamiche e moderne<\/li>
        • VueJS<\/strong>, un framework che consente di creare app Web interattive molto usato dagli sviluppatori per lo sviluppo front-end. Offre ottime funzionalit\u00e0 alle PWA in termini di sicurezza e permette una eccellente integrazione delle app con altre applicazioni. <\/li><\/ul>\n\n\n\n

          Le differenze tra Progressive Web App, app native e app tradizionali<\/strong><\/strong><\/strong><\/h2>\n\n\n\n

          A differenziare le PWA dalle app native e tradizionali troviamo una serie di funzionalit\u00e0, che non sono proprie delle app native e tradizionali. Eccone alcune:<\/p>\n\n\n\n

          • possono essere installate con pochi e semplici passaggi che prevedono la visita al sito, l’aggiunta opzionale nella schermata home e l’apertura per l\u2019uso;<\/li>
          • non necessitano di essere scaricate e installate, baster\u00e0 salvarle sulla schermata iniziale di un dispositivo come un computer o uno smartphone e l\u2019accesso avverr\u00e0 come per le app mobile;<\/li>
          • sono fruibili sui principali sistemi operativi per Mobile (Android, iOS e Windows Phone);<\/li>
          • hanno una capacit\u00e0 di aggiornamento automatico a differenza delle app native che necessitano di un aggiornamento manuale;<\/li>
          • richiedono uno spazio di archiviazione molto ridotto rispetto alle native a cui serve pi\u00f9 memoria;<\/li>
          • si pu\u00f2 usufruire di molte funzioni del dispositivo utilizzato per la visualizzazione, come localizzazione GPS, notifiche push, l microfono o telecamera;<\/li>
          • possono essere indicizzate sui motori di ricerca, cosa impossibile per le app tradizionali, garantendo un\u2019ampia visibilit\u00e0.<\/li><\/ul>\n\n\n\n

            I vantaggi nel creare una Progressive Web App<\/strong><\/strong><\/strong><\/h2>\n\n\n\n

            Prima di esaminare i vantaggi che le PWA sono in grado di apportare, facciamo il punto sugli obiettivi delle PWA. Le progressive web app (PWA) nascono essenzialmente con un obiettivo principale e possiamo dire anche gi\u00e0 raggiunto: offrire agli utenti un’esperienza pari alle app native.<\/p>\n\n\n\n

            Nel farlo, le Progressive web app <\/strong>sono in grado di garantire molteplici vantaggi rispetto alle app native, riassumibili in: <\/p>\n\n\n\n

            • semplicit\u00e0 e velocit\u00e0 di accesso<\/strong> grazie al fatto che  \u00e8 possibile aggiungere alla home del telefono l\u2019icona del proprio sito\/web app accedendo con un semplice click;<\/li>
            • fidelizzazione dell\u2019utente e miglioramento delle conversioni<\/strong> grazie all\u2019invio delle notifiche push, ai miglioramenti generali dell\u2019esperienza utente e ai minori tempi di caricamento;<\/li>
            • facilit\u00e0 e velocit\u00e0 di sviluppo<\/strong>;<\/li>
            • velocit\u00e0 di caricamento delle pagine<\/strong>, grazie a  un sistema di cache interna al telefono che velocizza la navigazione;<\/li>
            • navigazione offline <\/strong>grazie alla strategia cache-first per archiviare i dati offline in cache   come immagini, file CSS e JS;<\/li>
            • aggiornamenti manuali non necessari<\/strong>, perch\u00e9 le PWA si aggiornano ogni volta che il dispositivo \u00e8 connesso a Internet senza dover effettuare alcun download;<\/li>
            • costi di realizzazione ridotti <\/strong>eliminando la necessit\u00e0 di sviluppo, manutenzione e marketing di qualsiasi piattaforma diversa dal sito Web PWA;<\/li>
            • tracciamento ed engagement <\/strong>grazie a Google Analytics che consente di tracciare le pageviews;<\/li>
            • Linkability e un’indicizzazione sui motori di ricerca <\/strong>che permette di posizionarsi e ricevere traffico organico ottenendo un costo di acquisizione dell’utente inferiore;<\/li>
            • maggiore libert\u00e0 nello sviluppo<\/strong> rispetto alle app native, che per essere pubblicate devono avere i requisiti richiesti dagli store;<\/li>
            • massimo livello di  usabilit\u00e0 ed user experience<\/strong>;<\/li>
            • personalizzazione<\/strong> attraverso la modifica del colore della barra degli indirizzi;<\/li>
            • minore utilizzo dei dati e meno spazio di archiviazione <\/strong>richiesto;<\/li>
            • la possibilit\u00e0 di usare maggiormente la visualizzazione sul dispositivo<\/strong>, visualizzando il contenuto a tutto schermo senza la tipica barra degli indirizzi del browser;<\/li>
            • sicurezza<\/strong> perch\u00e9 ogni PWA deve essere usata tramite il protocollo HTTPS per non incorrere in un\u2019esposizione delle informazioni o in un\u2019alterazione dei contenuti;<\/li>
            • l\u2019usabilit\u00e0 su tutti i dispositivi <\/strong>e adattamento al relativo display;<\/li>
            • indipendenza dagli store per cui non \u00e8 necessario passare per ottenere le PWA che porta ad minori restrizioni e maggiore libert\u00e0 riguardo a design e funzionalit\u00e0;<\/li>
            • servizi di geolocalizzazione <\/strong>grazie all\u2019API Geolocation.<\/li><\/ul>\n\n\n\n

              La maggior parte di questi benefici si traducono in grandi vantaggi usufruibili da un lato da chi sviluppa l\u2019app e dall\u2019altro da parte dell\u2019utente finale.<\/p>\n\n\n\n

              Agli sviluppatori viene infatti data l\u2019opportunit\u00e0 di sviluppare un prodotto similare alle app native ma con maggiore libert\u00e0 e con\u00a0 tempi e costi ridotti<\/strong> oltre a diverse funzionalit\u00e0 che rendono migliore la user experience. Prova di ci\u00f2 sono i risultati positivi ottenuti ad esempio dagli ecommerce. <\/p>\n\n\n\n

              Una ricerca infatti, mostra come il 53% dei visitatori lascia un sito Web dopo solo 3 secondi di caricamento della pagina<\/strong> facendo diminuire i tassi di conversione del 21,8% su ogni secondo di ritardo nella velocit\u00e0 della pagina. Con le PWA questo limite viene superato grazie a fluidit\u00e0 di utilizzo e velocit\u00e0 di caricamento delle pagine che agevolando l\u2019utente facilita le conversioni ottenibili sugli ecommerce.<\/p>\n\n\n\n

              Cinque  esempi di ecommerce che hanno ottenuto vantaggi dalle PWA<\/strong><\/strong><\/h2>\n\n\n\n

              Sono diversi gli ecommerce che hanno provato in diversi modi i benefici che le PWA sono in grado di offrire. Ecco alcuni esempi di grandi aziende e dei vantaggi che hanno acquisito grazie alle PWA:<\/p>\n\n\n\n

              • Alibaba<\/strong> ha avuto un aumento delle conversioni pari al 76% tra i browser, del 14% di utenti attivi mensili su iOS e del 30% su Android e un tasso di interazione del 400% in pi\u00f9 da “Aggiungi a Homescreen”;<\/li>
              • BookMyShow<\/strong> che ha aumentato di oltre l’80%  i tassi di conversione grazie alla velocit\u00e0 di caricamento (meno di 3 secondi);<\/li>
              • Lanc\u00f4me<\/strong> che ha aumentato del 17% le conversioni, del 53% le sessioni mobili su iOS e dell’8% i tassi di conversione sui carrelli recuperati attraverso le notifiche push;<\/li>
              • Starbucks<\/strong> con la sua PWA che molto pi\u00f9 piccola rispetto all’app iOS esistente del brand ha raddoppiato il numero di utenti web che effettuano ordini ogni giorno;<\/li>
              • Uber<\/strong>, con la sua web app che ha un peso di solo 50kB consente agli utenti di poterla caricare in soli 3 secondi anche nei casi di una rete pi\u00f9 lenta come la 2G.<\/li><\/ul>\n\n\n\n

                Quando preferire una PWA rispetto ad una App nativa<\/strong><\/h2>\n\n\n\n

                Una Progressive web app diventa la scelta ideale specialmente in alcuni casi che possiamo cos\u00ec riassumere:<\/p>\n\n\n\n

                • se si ha un budget ridotto da dedicare allo sviluppo, infatti con gli stessi costi solitamente destinati ad una app tradizionale, con le Pwa \u00e8 possibile allocare pi\u00f9 budget per il marketing o per cambiare le funzionalit\u00e0 a progetto iniziato;<\/li>
                • quando l\u2019idea da sviluppare \u00e8 nuova e innovativa, perch\u00e9 difficilmente gli utenti sono propensi a scaricare una app poco conosciuta, ma le PWA facilitano questo processo permettendo all\u2019utente di poter scegliere se scaricare l\u2019app dopo averla provata sotto forma di sito;<\/li>
                • se non si vuole avere limitazioni riguardo alla pubblicazione dell\u2019app dettate dagli store di Apple (per iOS) e Google (per Android) ma si vuole essere completamente indipendenti dai vincoli degli store nello sviluppo;<\/li><\/ul>\n\n\n\n

                  Dopo aver elencato le motivazioni principali per cui \u00e8 bene scegliere una Progressive Web App che vanno ad aggungersi alle caratteristiche e ai vantaggi da queste offerte che abbiamo visto fino a qui, per avere un quadro generale completo, \u00e8 bene per\u00f2 evidenziare anche i casi in cui le PWA non possono essere utilizzate<\/strong>.<\/p>\n\n\n\n

                  Le PWA non possono essere usate se si vuole inviare notifiche push da IOS sia ad App aperta che ad App chiusa perch\u00e9 possono essere ricevute solo se la PWA \u00e8 aperta, a differenza di Android dove \u00e8 possibile in entrambi i modi. Un limite questo, che comunque potrebbe essere eventualmente superato attraverso l’invio di email e\/o SMS unitamente alle notifiche push.<\/p>\n\n\n\n

                  In ultimo, la lettura di tag NFC o l’accesso a funzionalit\u00e0 particolari dell’hardware dello smartphone, rappresentano altri casi particolari  in cui le PWA non sono utilizzabili perch\u00e9 sono elementi non sempre disponibili in una PWA.<\/p>\n\n\n\n

                  <\/p>\n\n\n\n

                  Ti invitiamo a rivedere i nostri webinar sull’argomento:<\/strong><\/p>\n\n\n\n

                  \n
                  \n
                  \n