Le Progressive Web App stanno trasformando il modo in cui gli utenti utilizzano i siti web. Tecnicamente sono un mix tra il meglio che un’app mobile e un sito web tradizionale possono offrire. Partire da zero con la tecnologia PWA in WordPress non solo vi farà fare un salto di qualità, ma vi permetterà anche di creare una versione più coinvolgente, accessibile e veloce del vostro sito web.
Questo significa che le aziende, i blogger e i creator digitali possono connettersi meglio con la loro base di utenti e fornire più contenuti che mai.
Se siete pronti a convertire il vostro sito WordPress in una PWA, siete nel posto giusto. Vi spiegheremo esattamente come costruire e ottimizzare queste applicazioni web, assicurandovi il successo del vostro prossimo progetto.
Mettiamoci al lavoro!
Cosa sono le PWA?
Le Progressive Web App sono un tipo di tecnologia che combina le funzionalità di un sito web tradizionale e reattivo con quelle di un’applicazione mobile ricca di funzionalità.
Secondo Mozilla, le PWA utilizzano le moderne caratteristiche del web per fornire un’interfaccia web simile a un’app a cui si può accedere con un browser web.
I tre componenti tecnologici chiave delle PWA sono:
- Service worker. Le PWA utilizzano script che vengono eseguiti indipendentemente da un sito web ed eseguono azioni simili a quelle che potrebbero essere eseguite solo sulla pagina web. Ad esempio, i service worker consentono le notifiche push, la sincronizzazione in background e la disponibilità offline. Quest’ultima è possibile perché i service worker agiscono come una rete proxy. Le PWA possono memorizzare nella cache i contenuti e distribuirli in assenza di connessione, offrendo un’affidabilità eccezionale anche in condizioni di rete incerte.
- Web app manifest. Il manifest è un file JSON che descrive l’applicazione e le permette di presentarsi come icona add-to-home su uno smartphone. Il file è finalizzato alla creazione di un’interazione con il sistema dell’utente e include l’URL iniziale, le impostazioni di visualizzazione, il nome descrittivo e le icone.
- HTTPS. Questo ultimo componente è uno dei più importanti. Anche se non contribuisce direttamente all’esperienza dell’utente, l’HTTPS aumenta la sicurezza e la privacy del visitatore è protetta dalla crittografia dei dati e dall’anonimato delle informazioni.
La combinazione di tutte e tre le tecnologie offre un’esperienza veloce e priva di installazione, con le PWA completamente integrate nella homepage.
Il sito web e l’app del Cafe Javas sono stati realizzati in modo eccellente.
Sviluppata da TechAhead, questa PWA offre un’esperienza senza soluzione di continuità tra il sito web e la versione mobile dell’app. In questo modo i clienti possono facilmente effettuare ordini dal proprio browser web senza la frustrante UX di un sito web tradizionale.
Perché trasformare un sito WordPress in una PWA è una buona idea
Trasformare un sito WordPress in una Progressive Web App può migliorare notevolmente la propria presenza digitale e l’esperienza utente. Ecco perché fare questo passaggio è una mossa brillante:
1. Maggiore coinvolgimento degli utenti
Uno dei numerosi vantaggi delle PWA è la possibilità di inviare notifiche push. Questo permette di informare il pubblico su ultime novità e annunci e di assicurarsi che i visitatori del sito non si dimentichino di noi. Questa caratteristica incoraggia le visite regolari e le interazioni.
2. Velocità del sito migliorata
Le PWA sono anche estremamente veloci. La maggior parte delle risorse sono memorizzate nella cache e i service worker aiutano a caricarle rapidamente. Anche se i visitatori del sito non dispongono del provider di rete più veloce e affidabile, la PWA alimentata da WordPress si caricherà all’istante. Questa velocità non solo migliora l’esperienza dell’utente, ma contribuisce anche al posizionamento sui motori di ricerca, poiché la velocità del sito è un fattore di ranking per Google.
3. Funzionalità offline
Forse uno dei vantaggi più interessanti delle PWA è la loro capacità di funzionare offline o su reti di scarsa qualità. Ciò avviene grazie ai service worker che memorizzano nella cache le risorse chiave, consentendo agli utenti di accedere alle pagine visitate in precedenza senza una connessione a internet.
4. Le limitazioni tradizionali non si applicano
I siti web tradizionali e le applicazioni mobili hanno i loro limiti. I siti web, ad esempio, dipendono fortemente dalla qualità della rete e non offrono funzionalità native delle app come le notifiche push o l’accesso offline. Le applicazioni mobili, invece, richiedono agli utenti di scaricare e installare regolarmente gli aggiornamenti.
Le PWA non presentano questi inconvenienti.
Convertire un sito WordPress in una PWA non significa solo migliorare il sito. Si tratta di cambiare il modo in cui il pubblico interagisce con esso attraverso una piattaforma più veloce e coinvolgente che funziona e si presenta bene su qualsiasi dispositivo e con qualsiasi rete.
Prerequisiti per lo sviluppo di PWA in WordPress
Chiunque voglia realizzare una PWA per WordPress ha bisogno di:
- Design UX. È consigliabile utilizzare i principi del design UX come punto di partenza per rendere la PWA di facile utilizzo e che le persone vorranno usare e utilizzare.
- Competenze in HTML e CSS. Sarà necessario organizzare le pagine e renderle visivamente accattivanti e reattive. Ciò richiede la conoscenza di HTML e CSS, gli elementi fondamentali del web design.
- Conoscenza di PHP. WordPress è costruito su PHP, quindi è necessario conoscere questo linguaggio di scripting lato server per regolare temi e plugin e aggiungere altre funzionalità di contenuto dinamico alla PWA.
- Conoscenza di JavaScript. JavaScript serve a gestire l’interattività della PWA, per lavorare con i service worker per le funzionalità offline e per aggiungere funzionalità più complesse come le notifiche push, tra le altre cose.
- Conoscenza di WordPress. Il processo di sviluppo sarà molto più semplice una volta capito come funzionano tutti gli aspetti di WordPress, le sue API, la personalizzazione di temi e plugin, la gestione dei contenuti e le funzioni PHP specifiche di WordPress a disposizione.
I migliori plugin PWA per WordPress
Eseguendo una rapida ricerca dei migliori plugin PWA per WordPress, scoprirete subito una serie di strumenti che possono migliorare il vostro sito web con funzionalità simili a quelle di un’app, tempi di caricamento più rapidi e altre caratteristiche impressionanti.
Per coloro che desiderano creare rapidamente una PWA, ecco alcuni dei migliori plugin PWA attualmente disponibili per WordPress che potrebbero accelerare il flusso di lavoro.
1. Super Progressive Web Apps
Sviluppato da SuperPWA, il plugin Super Progressive Web Apps offre agli utenti di WordPress un modo semplice per trasformare i loro siti web in Progressive Web Apps (PWA). Questa fusione dei migliori aspetti delle tecnologie web e mobile consente l’utilizzo offline, tempi di caricamento quasi istantanei e l’accesso da una scorciatoia sulla schermata iniziale.
Pro
- L’aggiunta di funzioni simili a quelle di un’app e la possibilità di fornire contenuti anche quando si è offline possono far aumentare le visite al sito, l’engagement e altri KPI.
- Prestazioni superiori, grazie a tempi di caricamento ridotti e a un carico più leggero su un dispositivo, possono anche aumentare il valore SEO di un sito web.
- Facile da impostare e configurare con impostazioni intuitive.
Contro
- Potrebbe essere incompatibile con alcuni temi o plugin, rendendo necessarie ulteriori modifiche per un corretto funzionamento.
- Le opzioni avanzate disponibili richiedono una maggiore conoscenza delle tecnologie web per poterle sfruttare.
Costi
SuperPWA si basa su un modello freemium, il che significa che una serie di funzioni di base è disponibile gratuitamente, mentre gli extra sono accessibili tramite aggiornamenti. Il primo set di aggiornamenti di SuperPWA parte da 99 dollari.
2. PWA for WP & AMP
Il plugin PWA for WP & AMP arricchisce l’esperienza dell’utente con un’interfaccia simile a quella di un’app, la piena compatibilità con AMP PWA, il supporto multisito, il tracciamento UTM e la possibilità di lavorare offline. Fornisce inoltre il supporto per lo sviluppo di service worker, banner per app, un manifest per web app e uno splash screen personalizzato.
Pro
- Migliora il coinvolgimento grazie alla possibilità di installare il sito web nella schermata iniziale.
- Supporta AMP
- Include cache e analisi per le interazioni offline
Contro
- La configurazione è un po’ più complessa a causa dell’integrazione di AMP
3. PWA
Il plugin PWA si concentra sugli elementi essenziali delle PWA, come i service worker, il manifest delle web app e il supporto HTTPS. Il PWA è orientato a velocizzare i tempi di caricamento e a fornire un’esperienza simile a quella di un’app su mobile.
Pro
- Poiché l’obiettivo di questo plugin è quello di entrare a far parte del core di WordPress, potete aspettarvi una codifica e una compatibilità di alta qualità.
- Offre un modo semplice per adottare le funzionalità PWA, aumentando l’affidabilità, la velocità e l’engagement del sito web.
Contro
- Le funzioni avanzate non sono coperte dal plugin e richiedono ulteriori plugin o uno sviluppo personalizzato per essere realizzate.
4. Instantify
Instantify si differenzia per la combinazione di tre caratteristiche chiave in un’unica piattaforma: Progressive Web Apps (PWA), Accelerated Mobile Pages (AMP) di Google e Facebook Instant Articles (FBIA). Grazie a questa combinazione, lo strumento trasforma il sito web per dargli un aspetto simile a quello di un’app, velocizza i tempi di caricamento del web mobile e apre i contenuti del sito alle piattaforme social.
Pro
- Combinare PWA, AMP e FBIA significa non doversi preoccupare di gestire diversi plugin.
- Le pagine AMP vengono privilegiate nelle ricerche, quindi questo potrebbe potenzialmente migliorare le prestazioni del sito web sui motori di ricerca in termini di visibilità.
- Consente di coinvolgere gli utenti con notifiche push e molto altro ancora, e monetizza i contenuti in modo più efficiente attraverso annunci ottimizzati e Facebook Instant Articles.
Contro
- Non esiste un piano o una prova gratuita, il che potrebbe scoraggiare gli utenti che vogliono testare il plugin prima di pagarlo.
- Le numerose funzioni fornite possono far sì che il plugin non funzioni bene con alcuni temi se non viene configurato correttamente.
Costi
Instantify costa 29 dollari, una tariffa unica per una licenza a vita. Il prezzo include sei mesi di assistenza, che possono essere estesi per altri 21 dollari. Il prodotto non viene fornito con una prova gratuita o una garanzia di rimborso, quindi è meglio considerare attentamente le proprie esigenze attuali e i requisiti di compatibilità prima di procedere all’acquisto.
Come costruire una PWA con un plugin per WordPress
Costruire una PWA con WordPress è un modo interessante per migliorare l’esperienza mobile di un sito web, rendendola più veloce, affidabile e coinvolgente. Come abbiamo già detto, le PWA utilizzano le moderne funzionalità del web per offrire agli utenti esperienze simili a quelle delle app direttamente dal browser.
Ecco una mini-guida passaggio per passaggio su come trasformare un sito WordPress in una PWA utilizzando uno dei plugin di cui abbiamo parlato.
Passo 1: Pianificare la PWA
Prima di immergerci negli aspetti tecnici, è necessario pianificare le caratteristiche e gli obiettivi della PWA. Consideriamo quali parti del sito potrebbero beneficiare dell’accesso offline, quali azioni gli utenti dovrebbero essere in grado di eseguire senza una connessione di rete e come vorremmo che la PWA apparisse nella schermata iniziale. La pianificazione aiuta a garantire che la PWA migliori l’esperienza dell’utente in modo significativo.
Passo 2: Scegliere il plugin giusto
Come abbiamo detto, esistono diversi plugin per trasformare un sito WordPress in una PWA.
Vanno però valutati in base alle proprie esigenze specifiche. Se si sta cercando una soluzione semplice e lineare, Super Progressive Web Apps offre una configurazione facile. Per chi ha bisogno di un’integrazione tra più strumenti, Instantify potrebbe essere un’opzione migliore.
Per il nostro esempio di oggi, utilizzeremo Super Progressive Web Apps.
Passo 3: Installare il plugin scelto
Una volta scelto il plugin, installiamolo sul sito WordPress. Per farlo, accediamo alla bacheca di WordPress, andiamo su Plugin > Aggiungi nuovo, cerchiamo il plugin con il suo nome e clicchiamo su Installa ora. Dopo l’installazione, clicchiamo su Attiva.
Passo 4: Configurare le impostazioni
Dopo l’attivazione, troveremo le impostazioni del plugin nel menu Impostazioni della bacheca di WordPress.
Qui possiamo configurare vari aspetti della nostra PWA, come ad esempio:
-
- Nome dell’app. Il nome della PWA così come apparirà nella schermata iniziale.
- Descrizione. Una breve descrizione dell’applicazione.
- Pagina iniziale. La pagina che la PWA caricherà per prima.
- Colore del tema. Il colore della barra degli strumenti.
- Colore di sfondo. Il colore di sfondo dello splash screen.
- Icona. Un’immagine da utilizzare come icona della PWA.
Una volta terminate le modifiche, clicchiamo su Salva impostazioni.
Passo 5: Testare la PWA
Una volta configurate le impostazioni, è fondamentale testare la PWA su diversi dispositivi. Utilizziamo Chrome DevTools o strumenti simili per simulare vari dispositivi o testiamola direttamente sul un dispositivo mobile aggiungendo il sito alla schermata iniziale.
Ad esempio, se utilizzate un dispositivo iOS, dovrete cancellare la cache del vostro browser mobile prima di visitare il vostro sito web.
Clicchiamo sul pulsante Condividi, poi su Opzioni. Clicchiamo su Aggiungi alla schermata iniziale. Chiudiamo il browser, quindi clicchiamo sull’icona dell’applicazione appena aggiunta alla homescreen. Sfogliamo alcune pagine del sito web, disconnettiamoci da internet e riproviamo ad accedere alle stesse pagine.
Se vengono caricate, la PWA è attiva e funzionante!
Come creare una PWA con WordPress da zero
Per chi cerca maggiore controllo e personalizzazione, la strada da percorrere è quella di convertire manualmente il sito WordPress in una PWA.
Questo metodo è più tecnico e richiede una buona conoscenza dei principi di sviluppo web, quindi assicuratevi di rivedere i prerequisiti indicati in precedenza per confermare di poter completare la conversione.
Passo 1: Garantire l’HTTPS
La protezione del sito con HTTPS non è negoziabile per le PWA. L’HTTPS cripta i dati tra il sito web e i suoi visitatori, proteggendoli da fughe di dati e simili.
Potete ottenere un certificato SSL gratuito da Let’s Encrypt se non è già incluso nel vostro pacchetto di hosting.
Il processo di installazione varia a seconda del vostro provider di hosting. Molti offrono la possibilità di installare il certificato SSL con un semplice clic. Controllate la documentazione di supporto del vostro provider di hosting per avere istruzioni specifiche.
Dopo aver installato il certificato SSL, assicuratevi che tutto il traffico del sito web utilizzi l’HTTPS reindirizzando da HTTP a HTTPS. Questo può essere ottenuto con un plugin per WordPress come Really Simple SSL o modificando il file .htaccess del vostro sito se non avete problemi con le modifiche manuali.
2. Creare un manifest della web app
Il manifest della web app è un file JSON che controlla come la PWA appare agli utenti e come si avvia. Include il nome dell’app, le icone e l’URL di avvio, oltre ad altre impostazioni.
Per iniziare, create un file JSON chiamato manifest.json. Questo file deve contenere informazioni chiave sull’applicazione, come il nome (name), il nome breve (short_name), l’URL di avvio (start_url), il tipo di visualizzazione (display), il colore dello sfondo (background_color), il colore del tema (theme_color) e le icone (icons).
Ecco come dovrebbe apparire il codice, secondo MDN Web Docs.
{
"name": "Your App Name",
"short_name": "AppShortName",
"start_url": "/",
"display": "standalone",
"background_color": "#FFFFFF",
"theme_color": "#000000",
"icons": [
{
"src": "path/to/icon.png",
"sizes": "192x192",
"type": "image/png"
}
]
}Aggiungete un link al file manifest.json nella sezione head del modello del vostro sito WordPress.
Quindi, utilizzate strumenti come Lighthouse di Google per testare e convalidare l’implementazione del manifest della web app.
3. Implementare un service worker
I service worker fungono da proxy tra la web app e il mondo esterno. Sono essenziali per le funzionalità offline, le notifiche push e il caching delle risorse.
Per crearne uno, dovrete creare un nuovo file JavaScript. Chiamatelo service-worker.js e posizionatelo nella directory principale del vostro tema WordPress. Questo file conterrà la logica per il caching delle risorse, l’intercettazione delle richieste di rete e la gestione delle funzionalità offline.
Dovete registrare il vostro service worker dal codice JavaScript dell’applicazione web. In genere, questo viene fatto in un file JavaScript principale che viene eseguito sulla pagina web.
Ecco un esempio di come registrare un service worker da Borstch:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}All’interno del file service-worker.js, implementate la logica per la memorizzazione nella cache delle risorse statiche, intercettate le richieste di fetch e servite i contenuti dalla cache quando sono offline.
Ecco un esempio semplice per mettere in cache alcune risorse:
const CACHE_NAME = 'your-app-cache';
const urlsToCache = [
'/',
'/styles/main.css',
'/script/main.js'
];
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME)
.then(cache => {
return cache.addAll(urlsToCache);
})
);
});I test sono indispensabili per assicurarsi che il vostro service worker si comporti come previsto. Utilizzate il pannello Application di Chrome DevTools per controllare i service worker registrati, le risorse in cache e altro ancora.
Ottimizzare una PWA di WordPress
L’ottimizzazione della PWA di WordPress è l’ultima cosa da fare per garantire velocità, affidabilità e funzionalità. Approfondiamo alcune tecniche di ottimizzazione avanzate, concentrandoci sulle strategie di caching, sulla prioritizzazione delle risorse e sul caricamento adattivo per le diverse velocità di connessione.
Strategie di caching
Il caching è un elemento chiave dell’ottimizzazione delle PWA, secondo Smashing Magazine. Permette all’app di caricarsi più velocemente immagazzinando copie delle risorse. L’implementazione di una strategia cache-first fa sì che l’app recuperi le risorse dalla cache prima di provare la rete. Questo approccio è particolarmente efficace per le risorse statiche che non cambiano spesso.
Utilizzate i service worker per memorizzare nella cache le risorse importanti durante la fase di installazione. Questo include la shell dell’applicazione (HTML, CSS, JavaScript) e tutte le risorse statiche.
Per i contenuti dinamici, considerate strategie come lo stale-while-revalidate, che serve prima i contenuti in cache e poi aggiorna la cache con contenuti freschi dal server.
Dare priorità alle risorse
Non tutte le risorse sono uguali. Alcune sono fondamentali per il rendering iniziale, mentre altre possono essere rese tramite il lazy loading. Analizzate le prestazioni di caricamento dell’applicazione per identificare quali risorse sono essenziali e devono essere caricate per prime. Potete utilizzare le direttive preload e prefetch per informare il browser di queste priorità:
-
-
- Preload. Utilizzate questa direttiva per le risorse necessarie alla pagina corrente. Indica al browser di recuperare queste risorse all’inizio del processo di caricamento.
- Prefetch. Serve per le risorse che potrebbero essere necessarie nelle navigazioni future. Suggerisce al browser di recuperare queste risorse quando è inattivo.
-
Caricamento adattivo
Il caricamento adattivo adatta i contenuti e le funzionalità dell’app in base alle capacità del dispositivo dell’utente e alle condizioni della rete. Questa tecnica garantisce che la PWA offra una buona esperienza anche su reti lente o instabili.
Implementa il rilevamento delle caratteristiche per servire risorse diverse in base al dispositivo dell’utente. Ad esempio, potreste servire immagini ad alta risoluzione agli utenti con una connessione veloce e immagini più piccole e compresse a quelli con una connessione più lenta.
Potete utilizzare l’API Network Information per rilevare la velocità di connessione dell’utente e regolare il comportamento dell’applicazione di conseguenza. Ad esempio, potreste scegliere di caricare solo i contenuti essenziali su una connessione lenta, rinviando le risorse non critiche fino a quando la connessione non migliora.
Mantenere gli standard di Google
Trasformare il vostro sito WordPress in una PWA è una mossa intelligente per migliorare l’esperienza dell’utente mobile. Ma per essere efficace dovrete rispettare gli standard PWA di Google.
Gli standard PWA di Google si concentrano su sicurezza, esperienza utente e accessibilità:
-
-
- I siti devono utilizzare HTTPS ed essere reattivi sui dispositivi mobili
- Devono inoltre consentire l’accesso offline agli URL delle app e includere i metadati per la funzione Aggiungi alla Homescreen.
- Devono caricarsi rapidamente, funzionare su diversi browser e garantire transizioni di pagina fluide senza dipendere dalla rete.
- Tutte le pagine devono mantenere URL unici.
-
Riepilogo
Le progressive web app rappresentano un significativo passo avanti per migliorare il coinvolgimento degli utenti e l’accessibilità del web. Integrando le funzionalità dei siti web tradizionali con le funzioni avanzate delle applicazioni mobili, le PWA offrono un’esperienza simile a quella delle app, senza la necessità di scaricare l’app store.
Per questo motivo, oggi abbiamo esplorato il potenziale di trasformazione delle PWA per i siti WordPress, evidenziandone i vantaggi e offrendovi una guida su come creare le vostre PWA utilizzando i plugin di WordPress o la codifica manuale. Speriamo che vi sia stato utile.
Se non l’avete ancora fatto, trasformerete presto il vostro sito WordPress in una PWA?
Lascia un commento