Come creare una PWA Progressive Web App @ Inbound Strategies 2018

Giovanni Sacheli
Consulente SEO
Partner @ searcus.ch
Blogger @ evemilano.com

PWA – Progressive Web Apps
Rendi il tuo sito una App per
Android in 10 minuti
#inbound18

Cosa sono le PWA
PWA = Progressive Web Apps

Cosa sono le PWA
Tecnologia coniata da Google: "A new way to
deliver amazing user experiences on the web."

Cosa sono le PWA
Tecnologia che aggiunge specifiche funzionalità
ad un sito web.

Cosa sono le PWA
… is all about User Experience

Cosa sono le PWA
… is all about a FAST User Experience!

Cosa sono le PWA
Le PWA sono siti web che si possono installare
in smartphone Android in un modo simile alle
app native.

Cosa sono le PWA
La PWA combinano il meglio del web e la
migliore delle app.

Cosa sono le PWA
Questa tecnologia permette di installare nel
telefono un sito web, o parte di esso, per poter
essere fruito con particolari vantaggi in termini
di usabilità.

Cosa sono le PWA
Come si installa?
Navigando da mobile siti web con funzionalità
PWA viene chiesto all'utente di aggiungere il
sito nel telefono.

Le obiezioni dello scettico
Perché
dovrei
installare
un’app
identica al
sito web?

Ti dirò che…
Non è esattamente la stessa cosa…
Ci sono diversi vantaggi a navigare il sito via
PWA.

Caratteristiche delle PWA
Indicizzabili
Progressive
Responsive
Accesso rapido
Accesso sicuro
Navigazione istantanea
Navigazione offline
Usabilità e UI
Migliorano Engagement
Re-engagement
Leggerezza
Personalizzabili
Indipendenti da app native

Indicizzabili
Le PWA sono indicizzabili da Google e quindi
possono posizionarsi e ricevere traffico
organico come qualsiasi altro sito web.

Indicizzabili
Una PWA,
come quella che ti presento in questa guida,
non è altro che un sito web.
Come tale, è scansionabile dai motori di ricerca,
è indicizzabile, si può posizionare ed ottenere
traffico organico, PPC, social, diretto, referral, …

Indicizzabili
Far indicizzare un’app nativa invece è tutt’altra
cosa.

Progressive
Cross browser.
Le PWA funzionano per ogni utente,
indipendentemente dalla scelta del browser.

Progressive – non solo Google

Responsive
Cross device.
Le PWA si adattano a qualsiasi display: desktop,
cellulare, tablet. What’s next?

Accesso rapido
L’icona dell’app sarà
inserita nel telefono
insieme alle altre app.
Basta un tap per
avviare il sito.

Accesso rapido
Rispetto ad aprire il
browser del telefono e
digitare l’URL o
cercarlo nei preferiti,
è sicuramente più
rapido fare un tap
nella home del
telefono o nel cassetto
delle app.

Sicure
Le PWA devono per forza essere servite via
HTTPS per prevenire lo snooping e per garantire
che il contenuto non sia stato manomesso.

Alla fine siamo markettari
Pensa a questa cosa…

Alla fine siamo markettari
Con una PWA installata è come se facessi una
impression gratuita nei telefoni dei tuoi lettori
ad ogni apertura del cassetto delle app.
Quante volte guardi il telefono in un giorno?
Quante volte scorri le app senza nulla di
particolare da fare? Vedere spesso l’icona del
tuo sito aiuta l’utente a ricordarsi di visitarlo.

Navigazione quasi istantanea
L’icona della PWA sarà
inserita nel telefono
insieme alle altre app.

Nel momento in cui premi
il bottone aggiungi, la PWA
crea un pacchetto APK e lo
installa nel tuo telefono.
In questo pacchetto è
possibile inserire file per la
cache locale: pagine
HTML, file CSS e JS,
immagini.

Quando lanci l’app nel tuo telefono non
verranno scaricati dalla rete i file che hai già in
cache. Eventuali update saranno eseguiti in
background.

Si, hai capito bene.
Mettendo in cache i file critici, il caricamento
della pagina sarà praticamente istantaneo.
Enormi vantaggi sulla user experience.

Navigazione offline
Le PWA possono essere
indipendenti dalla connessione.

Navigazione offline
Inserendo nella cache del dispositivo le pagine
più importanti del sito e tutte le loro dipendenze
(CSS, JS, IMG, …), il sito web sarà navigabile
offline.
Fantastico.

Usabilità e UE/UX
Le PWA possono
essere impostate
per essere
visualizzate a tutto
lo schermo.

Usabilità e UE/UX
In tutti i browser mobile
appare in alto la barra degli
indirizzi.
Una PWA invece può essere
impostata per non mostrare
la barra ed occupare quindi
uno spazio visivo maggiore,
full-screen, più bella da
vedere e più comoda da
usare.

Tracciamento ed engagement
Tutte le pageviews provenienti da app installate
sono tracciabili in Google Analytics
Spoiler: l’engagement di questo canale è
decisamente buono bounce rate basso e
pages/session alto.

Tracciamento ed engagement
In un file di configurazione della PWA si deve
impostare l’URL di avvio, ovvero la pagina che
verrà aperta quando si lancia la Progressive Web
App.
Con URL Builder aggiungere il parametro UTM
/?utm_source=homescreen per tracciare tutto il
traffico PWA con Google Analytics.

Re-engagement
La PWA rende facile il re-engagement attraverso
funzionalità come le notifiche push.
Le notifiche push si appoggiano al Service
Worker, file già necessario per le PWA.

Leggerezza
Una PWA occupa molto meno spazio di una app
nativa e non richiede permessi speciali.

Leggerezza – case history
Lancôme nel 2017 doveva decidere come
affrontare il mercato mobile.
La prima idea fu creare una app eCommerce per
vendere i propri prodotti.
Hanno capito, tuttavia, che una app del genere
ha senso solo per utenti affezionati, che usano
spesso il servizio.

Leggerezza
L’utente casuale non installa una app per fare
un singolo acquisto.
Cosa allora meglio di una PWA per essere meno
invasivi?

Personalizzabili
Barra degli indirizzi: è
possibile personalizzare il
colore della barra degli
indirizzi se si decide di non
nasconderla.

Personalizzabili
Splash screen: una volta
installata, l’app verrà
avviata con una schermata
personalizzabile con logo,
il nome completo e colore
di background.

Indipendenza dalle app native
La PWA può coesistere pacificamente
con l’app nativa.

Indipendenza dalle app native
Non tutti gli utenti installano volentieri app.
Se vengono richiesti permessi particolari il tasso
di installazione potrebbe risentirne.
Per non perdere utenti, affiancare una PWA
all’app nativa è un test sensato (vedi case history
Alibaba).

Ancora in dubbio?
Ora che ti ho elencato tutti questi vantaggi,
sei ancora indeciso se creare la tua prima PWA?

Sei pronto a cominciare?
Realizzare un'app progressiva di alta qualità
offre incredibili vantaggi, rendendo più facile
deliziare gli utenti, aumentare il
coinvolgimento e aumentare le conversioni.

Requisiti tecnici
https://medium.com/samsung-internet-dev/6-myths-of-progressive-web-apps-81e28ca9d2b1

Requisiti tecnici
Baseline PWA
– 6 requisiti fondamentali
Exemplary PWA
– Funzionalità avanzate
https://developers.google.com/web/progressive-web-apps/checklist

Baseline Progressive Web App
1. Il sito è servito su HTTPS

2. Pagine visibili offline

3. Primo caricamento rapido anche su reti 3G
Pagespeed Insights > 85
https://developers.google.com/speed/pagespeed/insights/?hl=it
WebPageTest < 4000
https://www.webpagetest.org/

4. Il sito funziona cross-browser
Chrome, Edge, Firefox, Opera & Safari

5. Transizioni di pagina veloci
Lazy load su immagini?
CSS critico inline?

6. Ogni pagina ha un URL specifico
Contenuti linkabili e condivisibili

That's it!
Requisiti obbligatori: ok
Requisiti facoltativi: vediamoli

Exemplary Progressive Web App
Una PWA "esemplare" cura in particolar modo:
• Indicizzabilità e social
• Esperienza utente
• Le notifiche push
• Prestazioni e tempi di caricamento
• Funzionalità di caching
• Caratteristiche aggiuntive

Indicizzabilità e social
– Il contenuto del sito è indicizzato da Google
– Metadati Schema.org forniti quando appropriati
– Metadati Open Graph forniti quando appropriati
– URL canonici forniti quando necessario
– Le pagine utilizzano le History API (Javascript )

Esperienza utente
– Il design del contenuto resta stabile durante il caricamento della
pagina
– Premendo indietro da una pagina di dettaglio si mantiene la
posizione di scorrimento sulla pagina di elenco precedente
– Quando selezionate, le aree di input di testo non vengono
coperte dalla tastiera sullo schermo
– Il contenuto è facilmente condivisibile dalla modalità stand-
alone o a schermo intero
– Il sito è responsivo su tutte le dimensioni dello schermo del
telefono, del tablet e del desktop
– Non richiedere eccessivamente di installare l’app
– La richiesta di aggiunta alla schermata home viene riconosciuta
dal browser

Le notifiche push
– Fornire un contesto all’utente su come verranno
utilizzate
– L’interfaccia utente che incoraggia gli utenti ad attivare
le notifiche push non deve essere ripetitiva ed
invadente
– Il sito oscura lo schermo quando viene visualizzata la
richiesta di autorizzazione
– Le notifiche push devono essere tempestive, precise e
pertinenti
– Fornire controlli per abilitare e disabilitare le notifiche

Prestazioni e tempi di caricamento
–Primo caricamento rapido anche su 3G

Funzionalità di caching
–Il sito utilizza il sistema cache-first
–Il sito informa appropriatamente l’utente
quando è offline
https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/#beware_of_the_edge_cases

Caratteristiche aggiuntive
–L’utente ha effettuato l’accesso su tutti i
dispositivi tramite Credential Management
API
–L’utente può pagare facilmente tramite
l’interfaccia utente nativa e Payment
Request API

È ora di scrivere codice
(oppure copiarlo)

Come creare una PWA
Il processo per creare una PWA è semplice.
Una volta rispettati i requisiti "Baseline PWA"
basta creare due file e caricarli via FTP nel tuo
sito:
• il file Manifest – "manifest.json"
• il file Service Worker – "sw.js"

Crea il file Manifest.json
Crea con un editor di
testo il file
manifest.json e
compilalo seguendo la
logica nell’esempio a
seguire.

Il file Manifest.json
{ "short_name": "EVE Milano",
"name": "EVE Milano Consulenza SEO",
"icons": [
{ "src": "/wp-content/uploads/apple-icons/apple-touch-icon-192x192.png",
"type":"image/png", "sizes":"192x192"}, {…}, {…}
],
"start_url": "/?utm_source=homescreen",
"display": "fullscreen",
"lang": "it-IT",
"background_color": "#fff",
"theme_color": "#5bb1f9",
"orientation": "portrait-primary"}

Cosa definisce il file Manifest.json
short_name: fornisce un
breve nome dell’app
leggibile dall’utente. È
destinato all'uso in cui lo
spazio non è sufficiente
per visualizzare il nome
completo della PWA.
"icons": [
{ "src": "/wp-content/uploads/apple-
icons/apple-touch-icon-192x192.png",
"type":"image/png", "sizes":"192x192"}
],
"start_url":
"/?utm_source=homescreen",
"lang": "it-IT",

name: fornisce un nome
alla PWA leggibile
dall’utente, ad esempio
tra un elenco di altre
applicazioni o
un'etichetta per
un'icona.
"icons": [
],
"start_url":
"lang": "it-IT",

icons: definisce almeno
un'icona per la PWA.
Quando si aggiunge la
PWA alla home, il browser
cerca le icone che
corrispondono alla densità
del display. Se nessuna
icona corrispondente
viene trovata, il browser
cerca l’icona più adatta al
dispositivo.
"icons": [
"type":"image/png", "sizes":"48x48"},
"type":"image/png", "sizes":"96x96"},
],
"start_url": "/?utm_source=homescreen",
"lang": "it-IT",

start_url: specifica l'URL che
viene caricato quando un
utente avvia la PWA da un
dispositivo.
"icons": [
],
"start_url":
"lang": "it-IT",

display: definisce il layout
visivo della PWA. Le possibilità
sono:
• Standalone: l'applicazione
apparirà come
un'applicazione nativa. E'
possibile mantenere una
barra di stato.
• Fullscreen: ...
• Browser: …
"icons": [
],
"start_url":
"lang": "it-IT",

sono:
• Standalone: ...
• Fullscreen: viene utilizzata
tutta l'area di
visualizzazione disponibile.
Non viene mostrato alcun
elemento del browser.
• Browser: …
"icons": [
],
"start_url":
"lang": "it-IT",

sono:
• Standalone: …
• Fullscreen: …
• Browser: l'applicazione si
apre in una scheda del
browser convenzionale o in
una nuova finestra, a
seconda del browser e della
piattaforma. Questa è
l'impostazione predefinita.
"icons": [
],
"start_url":
"lang": "it-IT",

lang: specifica la
lingua principale
usata nella PWA.
Questo valore è una
stringa contenente
una singola tag di
lingua.
"icons": [
],
"start_url":
"lang": "it-IT",

background_color: definisce il
colore di sfondo previsto per
la PWA e lo splash screen.
Questo valore è usato dai
browser quando il manifest è
disponibile prima che il foglio
di stile sia stato caricato. Ciò
crea una transizione graduale
tra l'avvio dell'applicazione
Web e il caricamento del
contenuto dell'applicazione.
"icons": [
],
"start_url":
"lang": "it-IT",

theme_color: definisce il
colore predefinito del tema.
Il parametro influisce sul modo
in cui la PWA viene visualizzata
dal sistema operativo (ad
esempio in alcune versioni di
Android il colore del tema
circonda l'icona, o definisce il
colore della barra del browser,
…).
"icons": [
],
"start_url":
"lang": "it-IT",

orientation: imposta
l’orientamento della tua app in
verticale od orizzontale.
• any
• natural
• landscape
– landscape-primary
– landscape-secondary
• portrait
– portrait-primary
– portrait-secondary
"icons": [
],
"start_url":
"lang": "it-IT",

Carica e linka il file Manifest.json
Carica il tuo file manifest.json nella root del web
server.

Carica e linka il file Manifest.json
Ora non ti resta che inserire il richiamo al tuo file
manifest.json nell’head dell’HTML di tutte le
pagine del sito web:
<link rel="manifest" href="/manifest.json">

Testa il file Manifest.json
Per testare il file
manifest.json pulisci il
browser e apri una pagina
del tuo sito.
Avvia i Dev Tools di Chrome
e naviga nella tab
Application e poi clicca nel
menu di sinistra su
Manifest.
Verifica che a destra appaia
il link Add to homescreen e
le varie icone che hai
inserito.

Service Worker
Ora devi creare l’ultima dipendenza per la tua
PWA, la più importante: il Service Worker.

Qui avviene la magia
Il Service Worker è un file JavaScript che viene
eseguito separatamente dal thread del browser
principale:
Intercetta le richieste di rete
Memorizza file nella cache
Recupera risorse dalla cache
Consegna le notifiche push

Crea il file sw.js
Crea con un editor di testo il file sw.js e copia il
contenuto dell’esempio apportando le tue
opportune modifiche.

sw.js
self.addEventListener('install', e => {
console.log('PWA Service Worker installing.');
let timeStamp = Date.now();
e.waitUntil(caches.open('evemilano_service_worker').then(cache => {
return cache.addAll([
'/',
'/?utm_source=homescreen'
]).then(() => self.skipWaiting());
}))});
self.addEventListener('activate', event => {
console.log('PWA Service Worker activating.');
event.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
return response || fetch(event.request);
}));
});

sw.js
Un service worker passa attraverso tre fasi del
suo ciclo di vita:
1. Registrazione
2. Installazione
3. Attivazione

sw.js – registrazione
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/s
w.js')
.then(function(registration) {
console.log('Registration
successful, scope is:',
registration.scope);
})
.catch(function(error) {
console.log('Service worker
registration failed, error:', error);
});
}
</script>
Questo script da inserire
nell'HEAD HTML richiama il file
sw.js con il comando
navigator.serviceWorker.register
solo se il browser supporta
questa funzione.
Successivamente stampa nella
console del browser il messaggio
di conferma o di errore della
registrazione del Service Worker
con il comando console.log().

sw.js – installazione e attivazione
Una volta che il service worker
è stato registrato si può
passare all'installazione ed
attivazione.
Install event listener: apre la
cache e la popola seguendo la
lista.
waitUntil serve per mantenere
attivo il servizio nel browser.
e.waitUntil(caches.open('evemilano_service_work
er').then(cache => {
'/',
}))});
});
event.respondWith(
return response ||
fetch(event.request);
}));
});

Activate event
listener: attiva il
servizio di caching.
event.waitUntil(self.cli
ents.claim()): prende il
controllo della cache e
la fornisce prima di
cercarla dalla rete.
'/',
}))});
});
event.respondWith(
return response ||
}));
});

Fetch event listener: il
SW intercetta le
richieste e decide se
fornire la cache o la
risorsa dalla rete.
'/',
}))});
});
event.respondWith(
return response ||
}));
});

networkOnly – ottieni solo via network.
cacheOnly – ottieni solo via cache.
fastest – ottieni da entrambi, rispondi con la
prima che arriva.
networkFirst – ottieni dal network, se fallisce
ottieni dalla cache.
cacheFirst – ottieni dalla cache ma anche dal
network e aggiorna la cache se necessario.
https://serviceworke.rs/caching-strategies.html

Limiti dimensione cache:
Chrome e Opera: variabile.
Firefox non ha limiti, chiede se > 50 MB.
Mobile Safari 50 MB max.
Desktop Safari illimitato, chiede se > 5 MB.
IE10+ massimo 250 MB, chiede se > 10 MB.

sw.js – improve it!
Puoi sbizzarrirti inserendo diversi file in cache. I
file inseriti verranno usati dall’app sia per la
navigazione online sia per quella offline.

Inserendo tutti i file critici al rendering delle
pagine si alleggerisce drasticamente la necessità
di download per il browser.
Le pagine si caricheranno molto rapidamente.

HTML
CSS
JS (interni ed esterni)
Immagini
Font
evemilano.com/sw.js

sw.js – attenzione!
Attenzione: se anche un solo file di quelli
elencati nella lista cache non dovesse essere
raggiungibile (errore 404), l’installazione della
PWA fallirà e non verrà installato nessun file nel
telefono.

sw.js – attenzione!
Più è complessa la PWA e più è difficile fare
debugging. Non esagerare con i file in cache,
potresti rendere troppo complesso il processo di
manutenzione dell’app.
Testa la tua app con la Dev Console o Lighthouse
almeno una volta al mese, o almeno dopo aver
fatto modifiche importanti al sito web.

Per testare il Service Worker
Svuota la cache del browser
Apri il tuo sito e attiva i Dev Tools di Chrome.
Apri la tab Application e poi nel menu a sinistra
clicca Service Worker.
Verifica che il servizio sia installato e attivo
(pallino verde). Eventuali errori vengono
mostrati nella Console.

Per testare la cache
Svuota la cache del browser e naviga sul tuo
sito.
Attiva i Dev Tools di Chrome e seleziona la tab
Application e poi nel menu a sinistra clicca su
Cache Storage ed infine sul tuo URL.
Se hai fatto tutto correttamente, nel riquadro a
destra dovresti vedere la lista con tutti i file che
hai inserito nella cache del Service Worker.

Web App Install Banners
Abbiamo tutto quelo
che serve.
Vediamo se appare il
Web App Install
Banner – il bottone per
aggiungere la PWA al
telefono.

Web App Install Banners
Chrome visualizza automaticamente il banner quando la tua
app soddisfa i seguenti criteri:
• Ha un Web App manifest con:
– uno short_name (utilizzato nella schermata principale)
– un name (usato nel banner)
– Icona/e png 192x192 (le dichiarazioni di icone devono includere
un tipo mime di image/png)
– Uno start_url di avvio
• Ha un service worker registrato.
• È servita su HTTPS (un requisito per l'utilizzo del service
worker).
• Meets a site engagement heuristic defined by Chrome
(this is regularly being changed).

Come testare la tua PWA
Da poco è stato rilasciato una estensione per
Chrome per testare le PWA e non solo.
Si chiama Lighthouse, ti consiglio di dargli un
occhio.
https://developers.google.com/web/

Come testare la tua PWA
Strumento open-source per verificare qualità e
la correttezza delle tue PWA.
Lighthouse esegue una serie di test sulla pagina
e genera un rapporto. Puoi utilizzare i test falliti
come suggerimento di cosa migliorare nella tua
app.

Next step?
Notifiche push
Pulsante «Salva per dopo»
La tecnologia delle PWA è in continua
evoluzione

Case history - Trivago
Trivago ha comunicato i dati di usabilità
del sito dopo aver creato la loro PWA:
• Engagement: +150%
• Repeat visits for users: da 0,8 a 2
• Il 67% degli utenti che hanno perso
connessione durante la navigazione
sono poi tornati
https://goo.gl/y5tLTN

Case history - Twitter
Twitter ha sviluppato la sua PWA:
Twitter Lite.
Vai sul sito Twitter con lo
smartphone. Se non appare il
bottone, con il menu in alto usa la
funzione “Add to home screen”.
Usa Twitter con le agevolazioni delle
PWA.

Case history - Twitter
Risultati:
• 65% aumento pagine per sessione.
• 75% aumento dei Tweets inviati.
• 20% riduzione del bounce rate.
• 70% riduzione della banda utilizzata nella
normale navigazione. Da considerare inoltre
il saving sul download dell’app che pesa 23.5
MB contro l’installazione della PWA che
pesa soltanto 600 K.
https://developers.google.com/web/showcase
/2017/twitter

Case history - TWC
The Weather Channel nel 2016 ha implementato
la tecnologia PWA in 62 lingue e 178 paesi.
Il risultato è stato un miglioramento dell’80%
sui tempi di caricamento delle pagine.
https://developers.google.com/web/showcase/
2016/weather-channel

Case history - Lancôme
Lancôme ha deciso di trasformare il suo sito web
mobile in una PWA e ha registrato:
incremento delle prestazioni dell’84%
incremento del 17% delle conversioni
incremento dell’8% chiusura carrelli abbandonati
grazie alle notifiche push.
https://developers.google.com/web/showcase/201
7/lancome

Dove studiare
• Installable Web Apps with the Web App Manifest in Chrome for Android
– https://developers.google.com/web/updates/2014/11/Support-for-installable-web-apps-
with-webapp-manifest-in-chrome-38-for-Android
• Your First Progressive Web App
– https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/
• Web App Install Banners
– https://developers.google.com/web/fundamentals/app-install-banners/
• The Web App Manifest
– https://developers.google.com/web/fundamentals/web-app-manifest/
• Introduction to Service Worker
– https://developers.google.com/web/ilt/pwa/introduction-to-service-worker
• Adding a Service Worker and Offline into your Web App
– https://developers.google.com/web/fundamentals/codelabs/offline/
• Web App Manifest
– https://developer.mozilla.org/en-US/docs/Web/Manifest
• Progressive Web Apps with Service Workers
– https://blog.booking.com/progressive-web-apps-with-service-workers.html

Come creare una PWA Progressive Web App @ Inbound Strategies 2018

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Come creare una PWA Progressive Web App @ Inbound Strategies 2018

Similar to Come creare una PWA Progressive Web App @ Inbound Strategies 2018 (20)

More from Giovanni Sacheli

More from Giovanni Sacheli (20)

Come creare una PWA Progressive Web App @ Inbound Strategies 2018

Editor's Notes