Una Progressive Web App o PWA (termine coniato da Google) è un sito web che utilizza moderne tecnologie Web per offrire agli utenti un’esperienza mobile migliore rispetto ad un’app nativa iOS o Android.
Le PWA sono essenzialmente delle applicazioni ibride, cioè sono una via di mezzo tra un sito web e un’applicazione per device mobile.
La parola “progressive” sta per “progressione di un sito web" che tende a comportarsi come un’applicazione per dispositivi mobile. Sviluppare una PWA non richiede la conoscenza di linguaggi di programmazione come Objective C o Java (linguaggi utilizzati per lo sviluppo di applicazioni iOS e Android) perché il suo sviluppo richiede solo la conoscenza di linguaggi di scripting client-side.
Le PWA, quindi, sono multipiattaforma proprio perché vengono sviluppate con tecnologie web come Html, Javascript e Json.
Le PWA hanno l’obiettivo di offrire un’esperienza di navigazione superlativa in termini di performance e semplificazione della navigazione.
A differenza di un’app mobile, le progressive web app non richiedono alcun intervento da parte dell’utente, che non deve scaricare e installare nulla e non gli viene richiesta nessuna azione da compiere (se non quella di installare l’icona della PWA sullo smartphone come una vera applicazione).
Prima di passare alla fase operativa, bisogna precisare che ci sono dei requisiti minimi che il sito dovrà avere per poter essere definito una PWA:
-
Protocollo SSL Attivo
-
Sito responsive
-
Presenza del Service Worker e funzionamento offline
-
Presenza del file manifest
-
Prestazioni e velocità del sito su reti lente al primo avvio (3g)
-
Sito Cross Browser (Chrome, Safari, Mozilla, Opera, Edge)
-
URL puliti e raggiungibili
Se il tuo sito web ha tutti questi punti dalla sua, allora sei a buon punto e possiamo passare alla fase realizzativa.
Come creare una Progressive Web Application
Possiamo trasformare il sito web in una PWA con 2 semplici macro interventi:
-
Creazione del file manifest.json
-
Creazione e installazione del Service Worker
Creazione del file manifest.json
Il file manifest.json conterrà tutte le informazioni di base della Progressive Web Application.
Di seguito, un pratico esempio che potrai utilizzare per il tuo sito cambiando, ovviamente, il percorso delle icone e le altre impostazioni di base.
{
"manifest_version": 1,
"version": "1.0.0",
"short_name": "PWA Esempio",
"name": "sitoweb.it",
"description": "La mia prima Progressive Web Application.",
"icons": [
{
"src": "/PWA/images/512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "/PWA/images/384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/PWA/images/192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/PWA/images/152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "/PWA/images/144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "/PWA/images/128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "/PWA/images/96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "/PWA/images/72x72.png",
"sizes": "72x72",
"type": "image/png"
}
],
"start_url": ".",
"lang": "it-IT",
"background_color": "#424242",
"theme_color": "#cc194b",
"display": "standalone",
"orientation": "portrait-primary"
}Cosa abbiamo scritto nel json?
-
versione del manifest
-
nome abbreviato (comparirà sotto l’icona come una vera mobile app)
-
descrizione
-
tutti i formati delle icone
-
la prima pagina della pwa
-
la lingua parlata
-
i colori da utilizzare per personalizzare il browser (background e colore del tema)
-
la tipologia del display
-
l’orientamento
Per incorporare il nostro manifest.json e iniziare a realizzare la nostra progressive web app, dobbiamo inserire, tra i tag <head> e </head> del sito da trasformare, le seguenti stringhe:
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#cc194b"/>(Questo ultimo meta tag si inserisce per una questione di compatibilità con alcuni browser che non riuscirebbero a interpretare i colori di base della pwa contenuti nel manifest.json.)
Il file manifest.json dovrà essere posizionato nella root principale del sito web, ad esempio https://www.sitoweb.it/manifest.json
Completiamo le operazioni nell’<head> inserendo alcuni meta tag importanti e specifici:
Favicon del Sito Web
<link rel="icon" href="favicon.ico" type="image/x-icon" /> Meta Tag Specifici per iOS
<link rel="apple-touch-icon" href="images/152x152.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="PWA Esempio">
Meta Tag Specifici per OS Windows
<meta name="application-name" content="PWA Esempio" />
<meta name="msapplication-TileImage" content="images/144x144.png">
<meta name="msapplication-TileColor" content="#cc194b">
Creazione e installazione del Service Worker
Non sarà così facile, invece, procedere alla creazione e all'installazione del Service Worker che, in pratica, non è altro che una nuova tecnologia javascript che sostituisce egregiamente la vecchia, ormai obsoleta e non più seguita tecnologia “application cache” o AppCache.
Il Service Worker è il Core delle PWA. Lavora in background e si pone tra il sito web e la rete, un pò come se fosse un Server Proxy. Esso ci consentirà di offrire i tuoi contenuti anche in condizioni di assenza di rete e rendere, quindi, fruibile il contenuto del sito anche quando è offline o il dispositivo non è connesso a Internet.
Il SW utilizza API asincrone e le sue enormi potenzialità sono in continua ascesa.
Ma cosa fa un Service Worker? Include funzionalità come le notifiche push, la gestione della cache, la navigazione offline e la sincronizzazione in background.
Iniziamo a sviluppare un semplice Service Worker:
Aprite il vostro editor di codice preferito e salvate un documento vuoto, nominandolo service-worker.js
Al suo interno incollate questo script javascript:
var cacheName = 'pwa-nomesito';
var filesToCache = [
'/',
'/index.html',
'/css/stylesheet.css',
'/images/pwa-logo.svg',
'/js/core.js'
];
/* 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);
})
);
});
Ora che abbiamo realizzato il Service Worker non ci rimane che richiamare lo script all’interno del sito web da trasformare in una PWA.
Il Service Worker va posizionato nella root principale del sito, così come il manifest https://www.sitoweb.it/service-worker.js
Questo passaggio è abbastanza semplice e si tratta di inserire nel footer (prima della chiusura del </body>) lo script che abbiamo preparato, eccolo:
Esempio 1 - Inserire lo Script direttamente nel foglio HTML
<script async>
window.onload = () => {
'use strict';
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./service-worker.js');
}
}
</script>Esempio 2 - Richiamare un file contenente lo script (nell’esempio core.js)
<script src="js/core.js" async></script>È consigliabile inserirlo nel footer per non bloccare il parser della pagina (il rendering). Nell’esempio 2 ho inserito l’attributo “async” per caricare la risorsa javascript asincronicamente.
Prima di passare al test di conformità e testare, appunto, che la nostra PWA non abbia errori, è giusto specificare che l’esempio riportato sopra si riferisce allo sviluppo di una semplice PWA su un sito di microscopiche dimensioni.
L'esempio prevede il salvataggio in cache solo di una pagina html, un foglio di stile, il logo SVG e un file javascript. Si possono implementare anche font, immagini e ulteriori pagine statiche modificando il service-worker dell’esempio.
Puoi Scaricare Gratuitamente la PWA utilizzata nell’articolo.
Per i più famosi CMS sono disponibili plugins ed estensioni che funzionano egregiamente e rendono il processo di trasformazione più fluido e veloce.
In merito a ciò, ti consiglio alcuni dei plugin per WordPress che ho avuto modo di testare e utilizzare per alcuni dei miei progetti web:
Attraverso un plugin Wp, potrai settare in maniera del tutto visuale gli elementi del manifest, le icone, i colori istituzionali, la pagina principale di atterraggio, l’orientamento e la gestione della cache per la modalità offline.
Torniamo a noi e passiamo alla fase di testing della nostra PWA.
Come dicevo all’inizio dell’articolo, le progressive web application sono “un'invenzione di Google”, per cui l’unico attuale metodo di test lo possiamo fare attraverso LightHouse (un tool integrato nella console sviluppatori del Browser Chrome).
Lighthouse è disponibile anche attraverso un’estensione browser in modo da rendere più semplice il suo utilizzo.
Lighthouse analizza il sito e racchiude in 4 elementi chiave la valutazione di un sito web:
- Prestazioni,
- Accessibilità,
- Sicurezza
- PWA.
Test della Progressive Web Application
È arrivato il momento di testare l’intervento appena fatto attraverso LightHouse.
In questa fase analizzeremo il sito web dove ci verrà restituito solo il punteggio della PWA.
- Raggiungiamo l’url del sito da trasformare
- Apriamo la console sviluppatori del browser Chrome
- Dal menu della console, spostiamoci sulla voce AUDITS
- Clicchiamo il pulsante RUN AUDITS. Inizierà l’analisi del sito (rimaniamo sulla pagina del sito da analizzare)
- Finita la valutazione, riceveremo una schermata con l'unica voce disponibile PWA.
Se avete seguito alla lettera la procedura di trasformazione da sito a PWA, dovreste poter visualizzare una schermata con tutti “pallini verdi”, il che significa che siete riusciti nell’intento.
Se invece notate alcuni “pallini rossi”, allora c’è qualcosa che non va.
LightHouse vi fornirà ogni spiegazione, individuando i punti da correggere e le soluzioni da applicare.
Ora, invece, controlleremo se il manifest e il service worker funzionano correttamente e vengono interpretati dal browser.
Andiamo per step:
1. Spostiamoci nella console sviluppatori alla voce Application
2. Sulla sinistra troveremo un menu addizionale che contiene le voci Manifest, Service Worker e Clear cache (e altre che non ci interessano in questa fase). Queste 3 voci ci aiuteranno a capire il corretto funzionamento della PWA.
3. Spostiamoci sulla voce Manifest e controlliamo che i dati inseriti attraverso l’editor di codice siano correttamente decodificati dalla console (Name, Short Name, Start URL, Background color, Orientation, Display e il Set di Icone che abbiamo precedentemente preparato)
4. Ora spostiamoci nella voce Service Worker e controlliamo che stia operando bene. Possiamo capirlo perché, se il service worker sta lavorando correttamente, avremo un pallino verde alla voce status con le relative “activated e running”.
5. In ultimo controlleremo se sono stati memorizzati nella cache del browser i contenuti presenti nel service worker.
6. Se invece abbiamo ottenuto degli errori sulla console, consiglio di revisionare punto per punto gli interventi proposti in questo articolo. È probabile che per un errore di sintassi lo script non funzioni correttamente.
Se invece abbiamo optato per l’installazione di un plugin, probabilmente non avremo nessun tipo di errore e potremo testare nello stesso modo il funzionamento della PWA.
Alcuni personali spunti su PWA e gli interventi appena elencati
Trasformare un sito web in un sito progressivo, nella mia visione delle cose, è un importante mattoncino da aggiungere all’evoluzione delle nostre competenze e delle tecnologie da adottare per la “scalata”.
Quando un utente ci naviga da dispositivo mobile (oggi come oggi, è praticamente l’80% del traffico), dobbiamo assicurargli un’esperienza soddisfacente in termini sia di performance sia di usabilità, pena l’abbandono della pagina e delle sue conversioni.
Adottare la tecnologia Progressive Web App significa guardare al futuro e cavalcare l’innovazione tecnologica che può rendere molto più fruibile le nostre pagine web.
Così come le PWA, anche il Protocollo AMP è un'importante evoluzione del sito, ma, ahimé, l’Accelerated Mobile Pages ha ancora molte lacune limitanti, soprattutto per le conversioni attraverso form email, per cui non è ancora il momento di adottare tale tecnologia sulle pagine web che hanno un obiettivo di business.
Per approfondire leggi il post: TOP 10 degli errori delle pagine AMP - Studio SEMrush.
Ora ti è chiaro perché dovresti trasformare il tuo sito in una PWA?
Raccontami cosa ne pensi di questa soluzione e se ti è rimasto qualche dubbio scrivilo nei commenti: ti risponderò quanto prima.
A presto!