Come creare una Progressive Web App – PWA in WordPress.

Come creare una Progressive Web App – PWA in WordPress? Se stai leggendo questo post è perché sei interessato a trasformare il tuo sito in una web app. Prima di vedere come creare una Progressive Web App dobbiamo sapere nello specifico di cosa stiamo parlando.

Le Progressive Web Application, o PWA, sono un ibrido tra le normali pagine web e le applicazioni mobile. Combinano, infatti, la versatilità del web con la velocità delle applicazioni mobile ottenendo ottimi livelli di user experience.

Il termine Progressive viene utilizzato in quanto l’esperienza utente inizialmente è quella della comune visita al sito web per poi via via migliorare sempre più con l’aumentare delle pagine visitate. Ad esempio il browser proporrà all’utente di inserire l’icona del sito nella home screen, come una classica applicazione mobile, per poi poter navigare il sito a velocità decisamente maggiori e soprattutto anche in assenza di connettività.

Lo scopo è quello di consentire un’esperienza di navigazione mobile eccellente ove prima non lo era, senza modificare il codice del sito web. Le PWA, infatti, sono totalmente trasparenti al navigatore e si integrano sul sito web tramite un semplice script Javascript, come si fa per Google Analytics.

Casi studio

Già saprai che la bassa velocità da mobile influisce negativamente sulle conversioni. Uno degli scopi delle Progressive Web Application è quello di aumentare drasticamente la velocità mediante strategie di caching in memoria locale.

Numerose sono le aziende, anche multinazionali, che hanno ottenuto notevoli aumenti del tasso di conversione grazie alle PWA. Di seguito ne riporto alcune:

• Lancôme: prestigioso marchio di cosmetici che ha registrato un aumento del 17% delle conversioni;
• MakeMyTrip: dopo l’implementazione delle PWA ha registrato un incremento del 38% della velocità, triplicando il tasso di conversione;
• Alibaba: dopo aver implementato le Progressive Web Application, la piattaforma di business b2b più grossa al mondo ha registrato un aumento del 76% delle conversioni su tutti i browser;
• Aliexpress: registrato un incremento del 104% delle conversioni sui nuovi utenti, raddoppiato il numero di pagine visitate ed aumentato del 74% il tempo di permanenza sul sito su tutti i browser.

Trivago in questi giorni sta comunicando i dati di usabilità del sito dopo aver creato la loro PWA: inutile dire che sono entusiasti.

Quindi, visto i numeri dei grandi marchi, cosa aspetti a creare una Progressive Web App?

Creare una Progressive Web App: Vantaggi

• Indicizzabili: le PWA sono indicizzabili da Google e quindi possono posizionarsi e ricevere traffico organico.
• Accesso rapido: l’icona dell’app sarà inserita nel telefono insieme alle altre app, basta un tap per avviare il sito.
• Navigazione quasi istantanea: le PWA possono usare un sistema di cache interna al telefono per velocizzare drasticamente la navigazione.
• Navigazione offline: salvando in cache immagini, file CSS e JS, le pagine saranno navigabili anche offline.
• Massima usabilità ed esperienza utente: le Progressive Web App possono essere impostate per essere visualizzate a tutto lo schermo, senza la tipica barra degli indirizzi sui browser, tutto a vantaggio dell’usabilità e fruibilità del sito web.
• Tracciamento ed engagement: tutte le pageviews provenienti da app installate sono tracciabili in Google Analytics
• Personalizzazione: è possibile personalizzare il colore della barra degli indirizzi se si decide di non nasconderla. Inoltre, una volta installata, l’app verrà avviata con uno splash screen personalizzabile con logo e colore di background.
• Indipendenza dalle app native: la PWA può coesistere senza alcun problema con l’app nativa.

Come creare una Progressive Web App: requisiti

Il processo per creare una Progressive Web App è abbastanza banale, per procedere basta avere il protocollo HTTPS e creare due file da caricare nel tuo sito: il file Manifest – manifest.json, ed il Service Worker – sw.js.

Devi considerare anche che le PWA richiedono un sito ottimizzato. Quindi che abbia una certa velocità di caricamento! Ciò significa che se non è stata effettuata alcuna ottimizzazione del percorso di rendering critico, l’esperienza di navigazione migliorerà di poco con risultati non poi così soddisfacenti.

Se il sito non risulta veloce, inoltre, Chrome NON richiederà all’utente di inserire l’icona nella home screen, perdendo di fatto un elemento significativo di attenzione: il web app banner.

Detto ciò, lo sviluppo di una PWA si compone di 2 fasi:

• Creazione del file Manifest.json
• Sviluppo di un Service Worker

Creazione Manifest.json

Il file Manifest.json altro non è che un array in formato JSON contenente informazioni sulla Progressive Web Application.

Ecco un esempio di file Manifest.json in linea con le regole di sviluppo di una PWA:

{
"manifest_version": 1,
"version": "1.0.0",
"short_name": "Speedy WordPress",
"name": "SpeedyWordpress.it",
"description": "Portale dedicato alle performance web.",
"icons": [
{
"src": "/pwa_icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/pwa_icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/pwa_icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/pwa_icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/pwa_icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/pwa_icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/pwa_icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/pwa_icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
}
],
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#f06420"
}

Le varie sezioni sono autoesplicative. Abbiamo una versione da aggiornare ogni qual volta si effettua una modifica al file in produzione; nome e descrizione dell’applicazione; un set di icone di dimensioni ben precise che verranno utilizzate per il rendering nella home screen e nella fase di avvio della PWA; i colori da utilizzare; lo scope; la tipologia di display.

Per generare le icone è possibile utilizzare il tool online https://www.favicon-generator.org. Realizzato il file Manifest.json occorre collegarlo al sito web inserendo i seguenti tag HTML nel Head del tuo sito web:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#f06420"/>

Crea il Service Worker – file sw.js

Questa è la parte più complessa nel creare una Progressive Web App in quanto richiede conoscenze di programmazione Javascript e performance.

Il service worker è il cuore pulsante di una Progressive Web Application in quanto garantisce prestazioni e navigazione offline, intercettando il traffico da e verso il server web.

È in grado anche di aumentare il re-engagement grazie alla possibilità di inviare all’utente notifiche push.

Primo passaggio: Abilitare il file sulle pagine del sito

Per far riconoscere al browser il tuo file server worker devi inserire il codice nella testata delle tua pagina (dentro <head>):

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);
});
});
}

Secondo passaggio: Creare un file service-worker.js

Crea un file di testo e rinominalo service-worker.js (o sw.js se preferisci).

Inserisci all’interno del documento il seguente script:

self.addEventListener('install', function(event) {
// Perform install steps
});
var CACHE_NAME = 'my-site-cache-v1';
var urlsToCache = [
'/nome-file-che-vuoi-inserire.js-o-CSS',
'/manifest.json'
];
self.addEventListener('install', function(event) {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME)
.then(function(cache) {
console.log('Opened cache');
return cache.addAll(urlsToCache);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
// Cache hit - return response
if (response) {
return response;
}

var fetchRequest = event.request.clone(); return fetch(fetchRequest).then( function(response) {
});
self.addEventListener('activate', function(event) {
var cacheWhitelist = ['pages-cache-v1'];
event.waitUntil(
caches.keys().then(function(cacheNames) {
return Promise.all(
cacheNames.map(function(cacheName) {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
if (e.request.cache === 'only-if-cached' && e.request.mode !== 'same-origin') {
return;
}
})
);
})
);
});

Lo script prevede:

• L’installazione dello script.
• La creazione di una cache in cui inserire i file che abbiamo deciso di inserire.
• Nel caso in cui la pagina fosse offline rispondere con lo Status Code 200 (OK) e offrire una versione presente in cache.
• Cancellare le cache precedenti, tranne che per i file che abbiamo inserito in whitelist.
• Creare una nuova copia del file service-worker.js se il browser si accorge che i dati al suo interno sono cambiati.
• Lo script che ti ho fornito è una versione base su cui poter aggiungere codice.

Una volta terminato, salva il file e inseriscilo nella cartella indicata nel codice installato nelle pagine.

Ti consiglio di inserire il file nella root del tuo sito (quindi “/service-worker.js“).

Creare Progressive Web Application per WordPress

Se hai difficoltà potresti semplificare il tutto facendo in questo modo:

• crea il file Manifest.json e spostalo nella root del tuo sito
• crea il file sw.js e spostalo nella root del tuo sito

Una volta creato i due file per integrare la PWA su WordPress ti basta infatti inserire poche righe sul file functions.php del tema ed il gioco è fatto:

// Inserimento tag HTML per file manifest.json
function pwa_tag_html() {
?>
<link rel="manifest" href="/manifest.json" />
<meta name="theme-color" content="#f06420" />
<?php
}
add_action( 'wp_head', 'pwa_tag_html' );
// Inserimento script di registrazione del service worker
function pwa_service_worker() {
?>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(function(registration) {
console.log('Registration successful, scope is:', registration.scope);
})
.catch(function(error) {
console.log('Service worker registration failed, error:', error);
});
}
</script>
<?php
}
add_action( 'wp_footer', 'pwa_service_worker' );

In questo modo bypassi lo script da inserire nell’head del tuo sito web.

Conclusione

Creare una Progressive Web App per WordPress implica anche, come avrai capito, avere un sito rapido per rispondere alle necessità di usabilità degli utenti da mobile. Quindi, in un modo o nell’altro, dovrai lavorare molto per ottimizzare i tempi di caricamento portandoli sotto una certa soglia. A questo punto dovresti avere tutto: le idee chiare, i concetti di base ed i file necessari. Fammi sapere se sei riuscito a creare una Progressive Web App.

Presto anche la mia sarà visibile!

[Aggiornamento: la mia Progressive Web App per WordPress è disponibile, scaricala sul tuo smartphone]

• Rimuovere Sidebar in WordPress. Ecco come fare.
• Disattivare errori Php in WordPress 5.0. Ecco come fare.
• Installare VMware Tools su Ubuntu18.04. Procedura da seguire.
• Come ripristinare Menù Start in Windows 10.
• Hosting, Nome Dominio e Installazione WordPress. [2° Parte]