it
English Español Deutsch Français Italiano Português (Brasil) Русский 中文 日本語
Invia il post
Torna ai giochi

Come (e perché) dovresti trasformare il tuo sito in una PWA

53
Wow-Score
Il Wow-Score mostra il livello di interazione del posto di un blog. Si calcola sulla correlazione tra il tempo di lettura attivo degli utenti, la loro velocità di scrolling e la lunghezza dell'articolo.

Come (e perché) dovresti trasformare il tuo sito in una PWA

Luca Carchesio
Come (e perché) dovresti trasformare il tuo sito in una PWA

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.

PWA di Esempio Schermata PWA di esempio

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:

  1. Prestazioni,
  2. Accessibilità,
  3. Sicurezza
  4. 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

Console Sviluppatori / 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. 

Console Sviluppatori / Risultato LightHouse

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

Console Sviluppatori / 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”.

Console Sviluppatori / Service Worker

5. In ultimo controlleremo se sono stati memorizzati nella cache del browser i contenuti presenti nel service worker.

Console Sviluppatori / Controllo Cache

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.

Il tuo traffico è desktop o mobile?

Scoprilo subito!

Please specify a valid domain, e.g., www.example.com

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!

Luca Carchesio
Maestro

Un veterano della community.

Classe 79 - Web Designer, Esperto SEO e Trainer in Prometeo Coaching®. Coach Professionista e Consigliere Nazionale dell'Associazione Coaching Italia A.Co.I. In Aula insegno Web Marketing, SEO, SEM e Comunicazione Visiva. Scrivo per piacere su bibibi.it
Condividi il post
o

Commenti

2000
Nuovo arrivato

Si è appena iscritto o è troppo timido per dire qualcosa.

Ottima guida, si fa tutto in 10 minuti, grazie ragazzi per questo trick.
Luca Carchesio
Maestro

Un veterano della community.

Carmine19
Ciao Carmine, grazie a te... mi fa piacere che sei riuscito in breve a realizzare una PWA... ;)
Nuovo arrivato

Si è appena iscritto o è troppo timido per dire qualcosa.

OK fatto tutto a livello sito, ma non mi è chiaro il passaggio all'app, non uso e non voglio usare WP e relativi plug come procedo, qualche consiglio?
Luca Carchesio
Maestro

Un veterano della community.

Giambattista Benacchio
Ciao Giambattista e grazie per il tuo commento... cosa intendi per "non mi è chiaro il passaggio all'App"? Nell'esempio pratico che ho inserito nel mio articolo non c'è nessun riferimento ai vari CMS e Moduli che estendono le funzionalità. La PWA dell'esempio può essere applicata anche a WordPress (con gli accorgimenti del caso) senza installare nessun plugin aggiuntivo (sono d'accordo con te sull'utilizzo dei plugin, meno sono meglio è). Detto questo attendo qualche precisazione in più così che possa aiutarti a capire meglio... Grazie!
Luca Carchesio
Maestro

Un veterano della community.

Luca Carchesio
Mi correggo Giambattista, scusami... nel mio articolo consiglio l'utilizzo di 2 plugin per WordPress per chi non ha nessuna competenza di Sviluppo in Javascript che potrebbero semplificare la trasformazione del sito in un PWA. Pardon!
Nuovo arrivato

Si è appena iscritto o è troppo timido per dire qualcosa.

Luca Carchesio
Nella'articolo scrivi: ... non gli viene richiesta nessuna azione da compiere (se non quella di installare l’icona della PWA sullo smartphone come una vera applicazione) ...
Ecco questo è il quid esecutivo che mi manca, dopo manifest, service- worker implementati, file core.js inserito ecc. ovviamente non compare l'app per magia qui dovrei fare qualcosa, è la prima volta che mi cimento con una APP anche se ibrida, me la cavo con JS, html5, epub, php, xml ecc. quindi ho competenze strettamente relative allo sviluppo di pagine statiche e dinamiche del web, ma qui per ora mi fermo, se hai qualche consiglio da darmi, disposto anche studiare per questa APP che penso necessaria dato il grande sviluppo del mobile.
Saluti.
Luca Carchesio
Maestro

Un veterano della community.

Giambattista Benacchio
Ciao Giambattista, ok compreso. Avrei potuto argomentare meglio quel passaggio :)

Una volta effettuati tutti gli altri passaggi come la creazione e l'implementazione del js e json e testato il corretto funzionamento della PWA, non ti rimane che navigarlo da un dispositivo mobile e attendere che il browser ti consigli di installare L'App (in un messaggio molto spesso posto nella parte bassa del display).

Non ti sembrerà vero ma è tutto quì.

Se questo non avviene allora o hai problemi con la tua PWA oppure il tuo browser è davvero troppo obsoleto per leggerla.

Puoi installare una PWA anche su computer desktop visitando la pagina web da browser e cliccare sull'icona che troverai alla fine della barra di navigazione (un icona tonda con un +).

Praticamente hai installato un'Applicazione sullo smartphone o tablet senza l'ausilio di un Marketplace / Store.

Spero di aver risposto alla tua domanda e rimango a tua disposizione!

Se la tua PWA non funziona sarò felice di aiutarti ;)
Nuovo arrivato

Si è appena iscritto o è troppo timido per dire qualcosa.

Luca Carchesio
Sono riuscito a installare la PWA su dispositivo mobile, ma stranamente non riesco a installare la PWA sul desktop, il report di lighthouse è a 100 (verde) su tutto ma sul test PWA mi dice che service Workers non lavora in locale:
testualmente (in italiano) dice:
start_url non risponde con un 200 in modalità offline
Start_url ha risposto, ma non tramite un tecnico dell'assistenza.
Ho ricontrollato la mia pagina index ma non riesco a cogliere eventuali errori.
Volevo trasmetterti l'url del mio sito, ma vedo un adv VS per questa azione.
Qualche input al riguardo potrebbe essermi prezioso.
Saluti e grazie dell'attenzione.
Nuovo arrivato

Si è appena iscritto o è troppo timido per dire qualcosa.

Luca Carchesio
Scusa, ho risolto, il silenzio del mattino ha l'oro in bocca, una buona concentrazione mi ha consentito di risolvere il problema (era un banale errore di path) la PWA ora funziona meravigliosamente.
Grazie di tutto.
Luca Carchesio
Maestro

Un veterano della community.

Giambattista Benacchio
Ciao Giambattista! Perfetto.. sono contento che tu sia riuscito! Ora che hai appreso i principi cardine per realizzare una PWA puoi addentrarti in specifiche ulteriori funzionalitá come ad esempio le notifiche push! Sono sicuro che i tuoi commenti siano stati d'aiuto alla community! A presto!
Gabriella Coronelli
Nuovo arrivato

Si è appena iscritto o è troppo timido per dire qualcosa.

mi è molto chiaro ... ma non sono una webmaster, faccio contenuti, mi sapresti indirizzare a qualche programmatore capace, stiamo rinnovando il sito con l'intento di realizzare, successivamente, un app ma la PWA risolverebbe egregiamente, saresti tanto gentile di darci alcune indicazioni? il team con cui stiamo lavorando è un quasi disastro, siamo in ritardo di 2 mesi e ancora non si vede la luce in fondo al tunnel ... Grazie - Gabriella
Luca Carchesio
Maestro

Un veterano della community.

Gabriella Coronelli
Ciao Gabriella e grazie per il tuo commento. Posso capire benissimo il tuo stato d'animo quando dici "siamo in ritardo di 2 mesi" e "non si vede la luce nel tunnel" :) ed il fatto che tu voglia adottare questa tecnologia sul tuo progetto e un ottima scelta. È vero, hai bisogno di un web designer che ti aiuti a trasformare realmente un sito in una PWA (qualunque sia la tecnologia usata). Mi fa piacere darti qualche suggerimento sul professionista da ingaggiare ma è probabile che nella community di SemRush ci sia già qualcuno che ha queste competenze. Prova a dare un'occhiata ;) Per esperienza ti dico che sarebbe meglio ristrutturare il rapporto logorato con i tuoi fornitori così da cercare di rimettere in piedi il progetto correttamente e cercare di salvare il lavoro fatto fin'ora. Rimango a disposizione per ulteriori domande... Grazie ancora per il commento Gabriella!

Invia un feedback

Your feedback must contain at least 3 words (10 characters).

Useremo questa email solo per rispondere al tuo feedback. Informativa sulla privacy

Thank you for your feedback!