Skip to main content

Come trasformare il proprio sito Joomla in una PWA (Progressive Web App)

| Gianluca Gabella | Joomla!
share on facebook share on twitter share on linkedin

Indice:


Trasformare il proprio sito in una Progressive Web App (PWA) è semplice e porta molti vantaggi pratici, impariamo a trasformarlo in pochi semplici passi con questa guida!

Che cos'è una PWA?

Una PWA è un sito web che utilizza determinate tecnolgie per poter essere visualizzato e "vissuto" dagli utenti mobile in modo più veloce e integrato con il sistema operativo, simulando l'esperienza che potrebbe dare l'utilizzo di un'app vera e propria.

Un sito trasformato in PWA verrà "installato" sul device dell'utente, e sarà anche possibile creare delle scorciatoie che vadano direttamente ad alcune pagine del sito:

pixedwebapp

La comodità intrinseca delle PWA è che sono "costruite" con dei linguaggi universali come HTML, CSS e Javascript, quindi non sono legate alla macchina su cui girano come potrebbe essere per un programma scritto in Java o in C.

Ricordati che per trasformare il tuo sito in una PWA è necessario soddisfare alcuni requisiti minimi:

  • Protocollo SSL: il sito deve essere in HTTPS e avere un certificato SSL attivo
  • Sito responsive: il sito deve essere necessariamente responsive (adattarsi agli schermi piccoli dei telefoni)
  • Presenza del Service Worker e funzionamento offline: vedremo come crearne uno
  • Presenza del file manifest: anche per questo vedremo qua sotto come crearne uno

Cominciamo la trasformazione: creiamo il manifest.json

La prima cosa che ci serve è un file chiamato manifest.json che possiamo creare utilizzando un normalissimo editor di testo (tipo notepad++).

Riempiamolo con il seguente codice, andremo in seguito a vedere come personalizzare ogni punto:

{
  "manifest_version": 1,
  "version": "1.0.0",  
  "short_name": "###",
  "name": "### ### ###",
  "description": "###",
  "icons": [
    {
      "src": "###.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "###.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "background_color": "#f47920",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#f47920",
  "shortcuts": [
    {
      "name": "Ultimi post dal blog",
      "short_name": "Blog",
      "description": "Leggi le ultime novità sul blog",
      "url": "/###.html",
      "icons": [{ "src": "/###.png", "sizes": "192x192" }]
    },
    {
      "name": "Contatti rapidi",
      "short_name": "Contatti",
      "description": "Contattaci direttamente dal tuo telefono",
      "url": "/###.html",
      "icons": [{ "src": "/###.png", "sizes": "192x192" }]
    }
  ]
}

Vediamo ora come personalizzare il nostro file sostituendo i vari ###:

  • short_name: il nome breve della mia applicazione (per esempio "pixed")
  • name: il nome completo dell'applicazione (per esempio "pixed web app")
  • description: la descrizione della mia applicazione
  • icons: le icone che verranno visualizzate sul telefono
    • in genere bastano due png, formato 192x192 e 512x512 (per coprire la maggiorparte dei device)
  • start_url: la prima pagina, in genere è "/", ossia la root (la homepage)
  • background_color: colore personalizzato per l'app (nel mio caso l'arancione pixed)
  • display: la visualizzazione dell'app. Può essere scelto tra standalone, fullscreen o minimal-ui
  • scope: anche qui possiamo lasciare "/"
  • theme_color: colore personalizzato per l'app (nel mio caso l'arancione pixed)
  • shortcuts: parte più interessante, possiamo creare delle scorciatoie che vanno direttamente a delle pagine specifiche del sito. Nel mio caso ho inserito due scorciatoie al blog e ai contatti. Per ogni scorciatoia è necessario definire:
    • nome
    • short_name
    • url
    • icona

Una volta personalizzato il file lo salviamo e lo carichiamo nella root del nostro sito (per esempio con un client tipo FileZilla).
Ultimo step: dobbiamo modificare la header del nostro sito per aggiungere la seguente riga, che serve a caricare il nostro file appena creato:

<link rel="manifest" href="/manifest.json">

Secondo step: il service worker

Creiamo ora un service worker che servirà ad inizializzare il sistema di "trasformazione" in PWA e gestirà, per esempio, anche la cache delle pagine in modo da poterle leggere offline.

Creiamo un nuovo file di testo chiamato service-worker.js con un qualsiasi editor di testi e incolliamoci dentro queste righe di codice:

var cacheName = '###';
var filesToCache = [];
var filesToCache = [
  '/',
  '/###.html',
  '/###.html',
  '/###.html',
  '/###.html'
];

/* Avvia il Service Worker e Memorizza il contenuto nella cache */

self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
    return cache.addAll(filesToCache);
  }));
});

/* Serve i Contenuti Memorizzati quando sei Offline */

self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
    return response || fetch(e.request);
  }));
});

Anche in questo caso è necessario personalizzare il nostro file sostituendo i vari ###: diamo il nome alla cache (per esempio "pwa-nomesito") e all'interno dell'array filesToCache inseriamo le URL delle pagine che vogliamo mantenere in cache, in modo che siano disponibili anche offline.


Attenzione:

E' necessario fare un breve discorso sulla questione della visualizzazione offline: se la vostra cache (o le vostre, a seconda di quanti e quali sistemi di cache utilizziate) non è settata a dovere la visualizzazione "offline" potrebbe darvi problemi di render (per esempio si rischia di vedere delle pagine non aggiornate). Se utilizzate plugin come JCH potreste avere problemi su alcuni browser (tipo Firefox). Se riscontrate problemi di visualizzazione della pagine vi consiglio di lasciare vuoto l'array filesToCache e non salvare alcuna pagina offline!


Ora che avete creato e personalizzato il vostro service-worker.js potete caricarlo con FileZilla nella root del vostro sito.

Quasi alla fine: attiviamo il sistema!

Ci siamo quasi, l'ultimo step è quello dell'inizializzazione. Dobbiamo inserire uno script Javascript all'interno del nostro sito, e possiamo farlo direttamente nell'index.php del nostro template (oppure utilizzando un override, per evitare che le nostre modifiche siano sovrascritte ogni volta che aggiorniamo il template).

Inseriamo questo script all'interno del body, subito prima della chiusura del tag </body>:

window.onload = () => { 'use strict'; if ('serviceWorker' in navigator) { navigator.serviceWorker .register('https://WWW.TUOSITO.IT/service-worker.js'); } }

Ricordiamoci di mettere questa stringa all'interno di un tag < script type="text/javascript"> ... </script >

e di cambiare WWW.TUOSITO.IT con il dominio corretto.

Fine! Se tutto è andato a buon fine il nostro sito dovrebbe comportarsi come una web app e i browser moderni dovrebbero dare la possibilità di "installare" il nostro sito all'interno del sistema operativo.

Come possiamo vedere se funziona tutto correttamente?

La prima prova da fare è tramite i developer tools di Chrome.

Andiamo sul nostro sito e apriamo i tools premendo F12.

Cliccando sulla tab "Application" dovrebbe comparirci una schermata del genere:

manifest

Questo vuol dire che il file manifest.json è stato correttamente letto e interpretato.

Clicchiamo a questo punto, nella colonna di sinistra, su "Service Workers".

Anche in questo caso, se tutto è stato configurato correttamente dovrebbe saltarci fuori una schermata del genere:

serviceworkers

Se anche voi leggete "Activated and is running" vuol dire che siamo a cavallo! Tutto funziona correttamente e il vostro sito è ufficialmente una PWA!

Come faccio ad installare il mio sito sul telefono?

Semplicissimo! Nella maggior parte dei casi (tipo Chrome), sarà il browser stesso a chiedervi se volete installare la PWA, altrimenti basterà andare nel menu del browser e selezionare l'opzione "aggiungi alla schermata home". In questo caso non verrà creato un semplice collegamento, ma il nostro sito verrà proprio "installato".

firefoxchromepwa 


Bibliografia

https://it.semrush.com/blog/cose-una-pwa-progressive-web-app/
https://web.dev/install-criteria/
https://web.dev/customize-install/
https://www.joomla.it/blog/8929-trasformiamo-il-nostro-sito-joomla-in-una-progressive-web-application.html


Se questo articolo ti è stato utile lascia un feedback!

Ti è stato utile questo articolo?

Come mai?

Ogni feedback è assolutamente benvenuto!

E se vuoi farlo leggere anche ai tuoi amici e colleghi, condividilo!

share on facebook share on twitter share on linkedin
condividi su Facebookcondividi su Twittercondividi su LinkedIncondividi su WhatsAppcondividi su Telegram