In questa guida ti spiegherò come portare il tuo valore di progressive web app presente nella Audit di Lighthouse al valore massimo, 100.

In particolare la guida spiega come implementare i parametri su un sito WordPress, ma puoi utilizzare i vari passaggi anche su altre piattaforme.

Cosa è una progressive web app?

Le progressive web app (o PWA) sono una via di mezzo tra le normali pagine web e le applicazioni mobile.

In questo caso utilizzeremo degli script per permettere alle pagine del nostro sito di migliorare la qualità di navigazione dell’utente tramite dei servizi aggiuntivi.

Cosa è Lighthouse?

Lighthouse è un tool integrato sul browser Chrome che permette di effettuare una Audit del sito.

Per provarla basta premere F12 sulla pagina del browser che si vuole analizzare e cliccare su Audits in alto a destra, tra i vari pannelli.

Se Audits non fosse direttamente visibile, premi su “>>” e una volta trovata clicca su Run audits.

Ti consiglio di selezionare mobile come device e tutte le voci della sottosezione Audits.

Lighthouse è un tool di Audit di Google

Installare un Service Worker

Un service worker è uno script che il browser attiva in background, separatamente dalle tue pagine web.

Devi avere abilitato il protocollo HTTPS per utilizzare i servizi dei service worker.

Le funzioni che permette di attivare sono: 

  • attivare i servizi di notifica push, sfruttando servizi come One Signal.
  •  sincronizzare in background le notifiche, in modo da riceverle in differita quando è presente una connessione stabile. 
  • Risolvere la notifica di Lighthouse Responds With A 200 When Offline
  • Tenere in cache le risorse che utilizziamo spesso.

In questa guida risolverò gli ultimi due punti, perché essenziali per raggiungere 100 su PWA e non richiedono altre API.

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>):

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

</script>

IMPORTANTE: La posizione e il nome del file DEVE corrispondere con la URL inserita nella quarta riga.

Se stai installando lo script su WordPress, inseriscilo nel file header.php del tuo tema.

Ti consiglio di copiare il file in un tema child, in modo da evitare di dover re-inserire lo script quando il tuo tema viene aggiornato.

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 = [

  '/I TUOI FILE',
  '/styles/I TUOI FILE.css',
  '/script/I TUOI FILE.js'

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

self.addEventListener('activate', function(event) {
var cacheWhitelist = ['pages-cache-v1', 'blog-posts-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:

  1. L’installazione dello script.
  2. La creazione di una cache in cui inserire i file che abbiamo deciso di inserire.
  3. Nel caso in cui la pagina fosse offline rispondere con lo Status Code 200 (OK) e offrire una versione presente in cache.
  4. Cancellare le cache precedenti, tranne che per i file che abbiamo inserito in whitelist.
  5. 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“).

Installare Manifest.json

Il file manifest.js contiene uno script JSON che utilizzeremo per personalizzare il colore della barra degli indirizzi.

L’altra funzione richiesta da Lighthouse automatizza la richiesta di aggiungere un’icona alla Home dello smartphone per accedere direttamente al sito (valido per il brower Chrome).

Questo passaggio trasformerà il nostro sito in una progressive web app.

Sito con manifest.json attivo

In realtà le funzioni utili di manifest.js sono tante e sono altre, ma ci limiteremo agli aspetti fondamentali per completare una guida semplice.

Crea un file di testo vuoto rinominandolo manifest.json.

Il file DEVE essere inserito nella root (la cartella principale del sito), perché sarà attivo solo per quelle pagine che si trovano all’interno della root.

Abilitare le pagine a Manifest

Inserisci nell’ <head> della pagina il tag link con la posizione del file e il theme-color.

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

Il theme color inserito nelle pagine cambierà il colore della barra degli indirizzi.

Cambia il valore di content=”#000000″ con il colore che preferisci, espresso in hex

Se stai installando il link su WordPress, inseriscilo all’interno del file header.php.

Creare il contenuto di Manifest.json

Inserisci e personalizza i seguenti dati:

{
"name": "Francesco Giammanco",
"short_name": "SEO Home",
"theme_color": "#000000",
"background_color": "#000000",
"display": "fullscreen",
"Scope": "/",
"start_url": "/",
"icons": [
{
"src": "images/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "images/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "images/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "images/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "images/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "images/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "images/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"splash_pages": null
}

Il name serve ad identificare il file ed è visibile nei lavori pubblicati sul Chrome Web Store.

Può avere una dimensione massima di 45 caratteri.

Lo short_name compare come titolo della app installata sul sito. Si consiglia di utilizzare 12 caratteri o meno.

 Il background_color colora l’effetto di transizione tra l’apertura della splash page all’app. 

Display permette di scegliere il formato di visualizzazione del sito su mobile.

Il valore standard è browser, ma sono presenti anche standalone (per visualizzare la barra degli indirizzi e solo alcuni elementi di UI) e minimal-ui, simile all’esempio precedente ma con meno dati visibili.

Icona creata con manifest.js

Start_url indica la pagina di partenza delle navigazioni da icona.

Scope delimita le pagine su cui si applica la visualizzazione mentre il file manifest.js è attivo.

Se si utilizza una URL relativa, DEVE contenere la start_url.

Icons indica la posizione e le dimensioni dell’icona utilizzata per rappresentare il sito nella versione app.

Il consiglio che vi do è creare una cartella (nel mio caso ho creato anche una sotto cartella per cui ho inserito le immagini in images/icons) e inserire una copia dell’icona per ogni formato presente nello script.

Le opzioni applicabili ad una progressive web app sono molteplici, e ti consiglio di consultare un professionista per effettuare personalizzazioni più complesse.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.