Crea una Progressive Web App senza plugin

Pubblicato 16 Dicembre 2023 · Aggiornato 17 Dicembre 2023

Benché la definizione possa trarre in inganno, la Progressive Web App (abbr. PWA) non è propriamente una “App” così com’è intesa nel senso comune. Si tratta in realtà di una tecnologia ibrida (Codici Javascript e Json) che in pratica consente ai visitatori del tuo sito di installare un collegamento al tuo sito sul proprio device, sia esso un Pc, uno smartphone o un tablet (iOS e Android).

Ho acceso la tua curiosità? E allora continua a leggere per scoprire come Creare una Progressive Web App senza Plugin. Solo sappi fin da subito che la creazione di una PWA coinvolge diversi passaggi, tra cui la dichiarazione del file manifest, la gestione del file js service worker e la configurazione del tuo sito allo standard mobile-friendly.

Alla fine dell’articolo ti spiegherò come eseguire col browser Chrome il test sul corretto funzionamento della tua Web App.

Indice Argomenti

Vantaggi
Requisiti
Crea il Logo
Codice
Promuovi l’installazione
Test la tua PWA
Test locale e Download
Risorse esterne
Conclusioni

Vantaggi

I vantaggi di avere e creare una Progressive Web App sono molteplici. Pensa che aziende famose come Facebook, YouTube, OnlyFans, X (ex Twitter) – solo per citarne alcune – promuovono l’installazione della loro PWA. È riconoscibile dal simbolo che appare in Chrome in alto a destra, come in questo screenshot:

Facebook Progressive Web App
Ecco una breve lista dei vantaggi immediati:

La PWA è indicizzabile: come qualsiasi altro contenuto (pagine, immagini, file vari), anche le Web App sono indicizzabili dai motori di ricerca (Google, Yahoo, Bing etc) e possono portare traffico organico al tuo sito
Tracciamento in Google Analytics: quest’ultimo è in grado di rilevare/tracciare tutte le visite (pageviews) provenienti dalle PWA, come qualunque altra app di navigazione
Navigazione Online e Offline: la navigazione online è migliorata perché il download delle pagine è più immediato, quasi istantaneo; in assenza di linea, si attiverà la navigazione offline, poiché i file scaricati in precedenza (immagini, file css e javascript) vengono salvati in cache
Logo sempre presente: la presenza costante del tuo logo nei dispositivi altrui è indubbiamente un costante incentivo/richiamo a visitare il tuo sito, ossia ciò che in marketing prende il nome di “fidelizzazione del cliente”
Autonomia da app native: qualora decidessi di sviluppare un’app nativa del tuo sito (Android o iOS), la PWA potrebbe coesistere in autonomia, senza alcun conflitto

Requisiti

Per creare una Progressive Web App i requisiti essenziali sono:

Tema Mobile Friendly (responsive)
Connessione sicura (https)
Sito cross-browser
Il logo della Tua Web App

1. Perché il tuo Tema Grafico sia mobile-friendly, deve dichiarare il seguente viewport nel codice sorgente:

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
...

<html>

<head>

...

E il codice css deve scritto secondo determinati parametri, come ad esempio l’utilizzo di layout scritti con Flexbox, che si adattano in automatico ai dispositivi di navigazione.

Scopri come creare un layout Flexbox

2. Il tuo sito deve supportare la CONNESSIONE SICURA, secondo lo standard HTTPS (HyperText Transfert Protocol Security) e di conseguenza avere certificati validi e assenza totale di “mixed content“, ovvero risorse (come immagini o file css o js) richiamate in http.

3. SITO WEB CROSS-BROWSER: il Tema Grafico dev’essere compatibile con le principale piattaforme di navigazione: Chrome, Edge, Safari, FireFox, Opera, app etc.

Requisiti facoltativi

Tra i REQUISITI FACOLTATIVI ritengo che possano tornarti utili un TEMA CHILD, su cui potrai riportare nell’head e nel footer i richiami al manifest e al service worker, e un CLIENT FTP, con cui caricare in seguito i file modificati ed eventualmente le immagini del logo in un path (percorso) diverso da wp-content/uploads.

Scopri come Creare un Tema Child e Utilizzare FileZilla Ftp

Crea il Tuo Logo

Il LOGO DELLA WEB APP è essenziale perché, come vedrai più avanti, fungerà da “pulsante” per l’avvio dell’app. Quindi, prima di qualsiasi approccio con la progettazione della tua web app, ti consiglio vivamente di realizzare l’immagine del logo, in png o svg.

Se non hai dimestichezza con software di grafica come Gimp o simili, ti consiglio questi due tool online:

THE-HOTH logomaker

Facile e intuitivo: imposta la lingua in italiano e smanetta con testi e immagini (puoi anche importarle); quando sei soddisfatto salva il progetto, inserisci l’email e riceverai in email il logo nei vari formati (png, svg e jpg), con associato il link al progetto, che ti consente di apportarvi in seguito ulteriori modifiche. Il tutto assolutamente gratis.

LUNAPIC image editor

Altro tool stupendo, che uso spesso. Carica il logo (ti consiglio in png) ed effettua un taglio circolare o quadrato; poi dal menù scegli “Edit > Resize image” e partendo dal valore più alto salva il logo nelle seguenti misure: 512×512, 384×384, 192×192, 152×152, 144×144, 128×128, 96×96, 72×72, 48×48. Di volta in volta salva il file senza sovrascrivere gli altri file, ad es. logo512.png, logo192.png etc.

Codice

Ed eccoci finalmente alla parte saliente di questa mini-guida. Prima di una qualsiasi modifica ai file del tuo sito, ti consiglio vivamente di fare un backup e, se possibile, lavorare su un Tema Child. Detto questo, passiamo alla parte pratica. I file da modificare (in installazioni WordPress) sono sostanzialmente due: header.php e footer.php

Come puoi vedere dall’esempio seguente, hai da dichiarare il manifest.json nell’head e richiamare il file app.js prima della chiusura del body.

File header.php (o generalmente index.php o index.html per siti “non-wordpress”)

<!DOCTYPE html>
<html lang="it-IT">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>La Mia PWA</title>
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Ciao, questa è la mia Progressive Web App!</h1>

<footer>Elementi del footer etc
</footer>

    <!-- Il tuo contenuto va qui -->
    <script src="app.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<h1>Ciao, questa è la mia Progressive Web App!</h1>

<footer>Elementi del footer etc

</footer>

</body>

</html>

E adesso veniamo alla creazione dei file della Tua Progressive Web App. Ho realizzato il seguente schema del manifest.json in modo che tu debba modificare solamente le prime righe in alto e i percorsi assoluti delle immagini. Se hai già caricato le immagini nel tuo server, procedi in questo modo:

Apri un editor di testi (con codifica utf-8, tipo il blocconote in Windows) e copia l’intero testo sottostante
Quando hai finito di editare, vai su Menù > Salva con nome…
Imposta il “Salva come” in “Tutti i file”, Codifica UTF-8, scrivi manifest.json e salva il file

Salva il file manifest - Crea PWA

Stessa procedura per i file sw.js e app.js

File manifest.json

{
    "name": "ilmiosito.it",
    "short_name": "La mia Web App",
    "description": "Descrizione della tua azienda",
    "categories": "Blog Personale",
    "background_color": "#ffffff",
    "theme_color": "#000000",
    "icons": [
{
"src": "/wp-content/uploads/.../logo512.png", "sizes": "512x512", "type": "image/png"},
{
"src": "/wp-content/uploads/.../logo384.png", "sizes": "384x384", "type": "image/png"},
{
"src": "/wp-content/uploads/.../logo192.png", "sizes": "192x192", "type": "image/png"},
{
"src": "/wp-content/uploads/.../logo152.png", "sizes": "152x152", "type": "image/png"},
{
"src": "/wp-content/uploads/.../logo144.png", "sizes": "144x144", "type": "image/png"},
{
"src": "/wp-content/uploads/.../logo128.png", "sizes": "128x128", "type": "image/png"},
{
"src": "/wp-content/uploads/.../logo96.png", "sizes": "96x96", "type": "image/png"},
{
"src": "/wp-content/uploads/.../logo72.png", "sizes": "72x72", "type": "image/png"}],

"screenshots": [
{
"src":"/wp-content/uploads/.../mobile.png", "sizes": "472x1024", "type": "image/png", "form_factor": "narrow"},
{
"src":"/wp-content/uploads/.../desktop.png", "sizes": "1024x472", "type": "image/png", "form_factor": "wide"}],

    "start_url": "/",
    "scope": "/",
    "display": "standalone",
    "orientation": "portrait-primary",
    "dir": "ltr",
    "lang": "it-IT",
    "manifest_version": 1,
    "version": "1.0.0"
}

{

"name": "ilmiosito.it",

"short_name": "La mia Web App",

"description": "Descrizione della tua azienda",

"categories": "Blog Personale",

"background_color": "#ffffff",

"theme_color": "#000000",

"icons": [

{

"src": "/wp-content/uploads/.../logo512.png", "sizes": "512x512", "type": "image/png"},

{

"src": "/wp-content/uploads/.../logo384.png", "sizes": "384x384", "type": "image/png"},

{

"src": "/wp-content/uploads/.../logo192.png", "sizes": "192x192", "type": "image/png"},

{

"src": "/wp-content/uploads/.../logo152.png", "sizes": "152x152", "type": "image/png"},

{

"src": "/wp-content/uploads/.../logo144.png", "sizes": "144x144", "type": "image/png"},

{

"src": "/wp-content/uploads/.../logo128.png", "sizes": "128x128", "type": "image/png"},

{

"src": "/wp-content/uploads/.../logo96.png", "sizes": "96x96", "type": "image/png"},

{

"src": "/wp-content/uploads/.../logo72.png", "sizes": "72x72", "type": "image/png"}],

"screenshots": [

{

"src":"/wp-content/uploads/.../mobile.png", "sizes": "472x1024", "type": "image/png", "form_factor": "narrow"},

{

"src":"/wp-content/uploads/.../desktop.png", "sizes": "1024x472", "type": "image/png", "form_factor": "wide"}],

"start_url": "/",

"scope": "/",

"display": "standalone",

"orientation": "portrait-primary",

"dir": "ltr",

"lang": "it-IT",

"manifest_version": 1,

"version": "1.0.0"

}

Aggiungi il percorso degli screenshot del tuo sito, 472×1024 pixel per la versione mobile e 1024×472 pixel per la versione desktop. Saranno visualizzati dagli utenti nella popup di installazione.

File sw.js (Service Worker)

// Service Worker per la gestione della cache offline
const cacheName = 'pwa-cache-v1';
const filesToCache = [
    '/',
    '/index.html',
    '/manifest.json',
    '/icon.png',
    '/styles.css',
    '/app.js'
];

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

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

// Service Worker per la gestione della cache offline

const cacheName = 'pwa-cache-v1';

const filesToCache = [

'/',

'/index.html',

'/manifest.json',

'/icon.png',

'/styles.css',

'/app.js'

];

self.addEventListener('install', (e) => {

e.waitUntil(

caches.open(cacheName).then((cache) => {

return cache.addAll(filesToCache);

})

);

});

self.addEventListener('fetch', (e) => {

e.respondWith(

caches.match(e.request).then((response) => {

return response || fetch(e.request);

})

);

});

Il Service Worker è il core, il cuore pulsante della Tua Web App. Per sfruttarlo a dovere, inserisci nell’elenco filesToCache i file principali del tuo sito: immagini, loghi, file css e js. Questa procedura ti tornerà utile per sfruttare la Navigazione Offline e il Caricamento istantaneo delle pagine.

Collega il file del service worker nel tuo file footer.php prima della chiusura del body

<!-- Inserisci questo nel tag <head> del tuo file HTML -->
<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('/sw.js')
        .then((registration) => {
            console.log('Service Worker registrato con successo:', registration);
        })
        .catch((error) => {
            console.log('Errore durante la registrazione del Service Worker:', error);
        });
    }
</script>

if ('serviceWorker' in navigator) {

navigator.serviceWorker.register('/sw.js')

.then((registration) => {

console.log('Service Worker registrato con successo:', registration);

})

.catch((error) => {

console.log('Errore durante la registrazione del Service Worker:', error);

});

}

</script>

Aggiungi in <head> i seguenti Meta Tag Specifici per iOS e OS Windows

<!-- Web App Mio Sito -->
<link rel="manifest" href="/manifest.json">
<link rel="prefetch" href="/manifest.json">
<meta name="theme-color" content="#00000">

<!-- Meta Tag Specifici per iOS -->
<link rel="apple-touch-icon" href="img/icon/AppLogo152x152.png">
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="#000000">
<meta name="apple-mobile-web-app-title" content="WebApp Mio Sito">

<!--  Meta Tag Specifici per OS Windows -->
<meta name="application-name" content="WebApp Mio Sito" />
<meta name="msapplication-TileImage" content="img/icon/AppLogo144x144.png"> 
<meta name="msapplication-TileColor" content="#000000">

Promuovi l’installazione

Per aggiungere una popup che promuove l’installazione della tua Progressive Web App (PWA), puoi utilizzare il Prompt di installazione dell’installazione di PWA fornito da JavaScript. Questo prompt viene mostrato quando il browser rileva che l’utente ha interagito con il sito in modo significativo.

Ecco come puoi implementarlo nel tuo file app.js:

// Aggiungi questo nel tuo file app.js

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
    // Impedisce a Chrome 76 e versioni successive di mostrare il prompt automaticamente
    e.preventDefault();

    // Salva l'evento per poterlo attivare in seguito
    deferredPrompt = e;

    // Mostra il tuo pulsante o banner per installare la PWA
    mostraPopupInstallazione();
});

function mostraPopupInstallazione() {
    // Mostra il tuo pulsante o banner per installare la PWA e gestisci l'evento click
    // Quando l'utente fa clic, attiva il prompt di installazione
    // Ad esempio:
    const installButton = document.getElementById('installButton');

    if (installButton) {
        installButton.style.display = 'block';

        installButton.addEventListener('click', () => {
            // Attiva il prompt di installazione
            deferredPrompt.prompt();

            // Attendere che l'utente risponda al prompt
            deferredPrompt.userChoice.then((choiceResult) => {
                if (choiceResult.outcome === 'accepted') {
                    console.log('L\'utente ha accettato di installare la PWA');
                } else {
                    console.log('L\'utente ha rifiutato l\'installazione della PWA');
                }

                // Pulisce il prompt salvato
                deferredPrompt = null;
            });
        });
    }
}

// Aggiungi questo nel tuo file app.js

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {

// Impedisce a Chrome 76 e versioni successive di mostrare il prompt automaticamente

e.preventDefault();

// Salva l'evento per poterlo attivare in seguito

deferredPrompt = e;

// Mostra il tuo pulsante o banner per installare la PWA

mostraPopupInstallazione();

});

function mostraPopupInstallazione() {

// Mostra il tuo pulsante o banner per installare la PWA e gestisci l'evento click

// Quando l'utente fa clic, attiva il prompt di installazione

// Ad esempio:

const installButton = document.getElementById('installButton');

if (installButton) {

installButton.style.display = 'block';

installButton.addEventListener('click', () => {

// Attiva il prompt di installazione

deferredPrompt.prompt();

// Attendere che l'utente risponda al prompt

deferredPrompt.userChoice.then((choiceResult) => {

if (choiceResult.outcome === 'accepted') {

console.log('L\'utente ha accettato di installare la PWA');

} else {

console.log('L\'utente ha rifiutato l\'installazione della PWA');

}

// Pulisce il prompt salvato

deferredPrompt = null;

});

}

Assicurati di avere un elemento HTML (ad esempio, un pulsante) con un ID che puoi utilizzare per mostrare il popup. Nel tuo file HTML, potrebbe assomigliare a qualcosa del genere:

<!-- Aggiungi questo nel tuo file HTML dove desideri mostrare il pulsante -->
<button id="installButton" style="display: none;">Installa la PWA</button>

1 2	<!-- Aggiungi questo nel tuo file HTML dove desideri mostrare il pulsante --> <button id="installButton" style="display: none;">Installa la PWA</button>

In questo esempio, il pulsante per l’installazione viene visualizzato solo quando il browser rileva che l’utente potrebbe essere interessato a installare la PWA. L’utente può quindi fare clic sul pulsante per attivare il prompt di installazione.

In WordPress, potrai decidere di posizionare il pulsante dove preferisci, come ad esempio in un widget nel footer, oppure sempre visibile nell’header. Fai tu. E se hai dimestichezza col css, puoi personalizzarne lo stile. Esempio:

/* Aggiungi il tuo css */
#installButton {
	border: 1px solid white;
	margin: 0 auto; padding: 10px;
	border-radius: 5px;
	font-size: 20px;
	background: #e79f47;
	color: white;
	text-decoration: none;
	}
#installButton:hover {
	background: white;
	color: #e79f47;
	border: black;
	}

/* Aggiungi il tuo css */

#installButton {

border: 1px solid white;

margin: 0 auto; padding: 10px;

border-radius: 5px;

font-size: 20px;

background: #e79f47;

color: white;

text-decoration: none;

}

#installButton:hover {

background: white;

color: #e79f47;

border: black;

}

Anteprima del Pulsante

Installa la Web App

All’hover del mouse (da pc, dunque) i colori si invertiranno: sfondo bianco, scritta oro. Così:

Installa la Web App

Test finale della PWA

Chrome è un browser fantastico che mette a disposizione un sacco di strumenti nel DevTools. Tra questi, uno che fa proprio al caso nostro per testare la nostra prima Web App è Lighthouse, che puoi raggiungere dal menù del DevTools cliccando Tasto Destro Mouse > Ispeziona.

Qui l’esito positivo dopo il test (in locale) di Lighthouse:

Test Locale PWA esito positivo

Test Locale e Download

Prima della stesura di questo articolo, ho voluto testare tutto il codice. Trattandosi di installazione in locale (con Mamp), ho dovuto correggere solo i path nei file index.html e manifest.json e ho deciso di screenshottare la finestra del browser per dimostrarvi che il codice funziona perfettamente.

Test Locale PWA

E in quest’altro screenshot ti mostro le info sul menù:

Test Locale PWA Menu

Ho pensato che fosse un terribile spreco tenere i file già editati solo per me e quindi – in uno slancio di generosità 😉 – ho deciso di fare uno zip e condividerlo coi miei lettori.

(Ho aggiunto anche qualche riga di css, ma shhh… mantieni il segreto)

Se anche tu hai installato EasyPhp, Mamp o simili, puoi fin da subito testare la PWA dopo il download. Ovviamente ti servirà solo per prendere spunto: le informazioni e le personalizzazioni di colori e stili saranno una tua scelta.

N.b. Potrebbe essere necessario svuotare la cache del browser coi tasti CTRL+Maiusc+R e scegliere un layout mobile tramite il DevTools di Chrome.

Risorse esterne

Sulle risorse esterne ammetto di aver smanettato parecchio. Non trovavo una guida esaustiva ma quasi sempre parziale, soprattutto per la parte del codice. Da qui l’idea di scrivere questa mini guida. Ho scritto “mini” di proposito perché le configurazioni sono davvero tante, in particolare per ciò che riguarda i differenti layout e le impostazioni per un sistema di cache funzionale.

Tra i plugin di WordPress, penso che questo qui sia il migliore. Te lo segnalo per “dovere di cronaca” ma spero che non ne avrai bisogno.

Video YouTube (inglese)

Conclusioni

Ho scritto quest’articolo per pura ispirazione. Le informazioni presenti possono essere trovate e approfondite in molti altri siti web e sono di pubblico dominio. Basta cercare “Creare una Progressive Web App” su Google. 😉

Mi spiace dover specificare che non mi presto ad assistenze private, tranne nel caso in cui si abbia intenzione di pagare un professionista al pari di un meccanico quando si ha l’automobile guasta. Ti auguro di avere la mia stessa ispirazione e, se ti fa piacere, di condividere la guida nei tuoi social.