Slide del mio intervento sulla tecnologia delle PWA ad Inbound Strategies 9 marzo 2018.
Link alla guida online: https://www.evemilano.com/progressive-web-app/
7. Cosa sono le PWA
… is all about a FAST User Experience!
8. Cosa sono le PWA
Le PWA sono siti web che si possono installare
in smartphone Android in un modo simile alle
app native.
9. Cosa sono le PWA
La PWA combinano il meglio del web e la
migliore delle app.
10. 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à.
11. 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.
17. Indicizzabili
Le PWA sono indicizzabili da Google e quindi
possono posizionarsi e ricevere traffico
organico come qualsiasi altro sito web.
18. 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, …
24. 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.
25. Sicure
Le PWA devono per forza essere servite via
HTTPS per prevenire lo snooping e per garantire
che il contenuto non sia stato manomesso.
27. 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.
29. Navigazione quasi istantanea
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.
30. Navigazione quasi istantanea
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.
31. Navigazione quasi istantanea
Si, hai capito bene.
Mettendo in cache i file critici, il caricamento
della pagina sarà praticamente istantaneo.
Enormi vantaggi sulla user experience.
33. 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.
34. Usabilità e UE/UX
Le PWA possono
essere impostate
per essere
visualizzate a tutto
lo schermo.
35. 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.
36. 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.
37. 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.
39. 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.
42. 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.
43. Leggerezza
L’utente casuale non installa una app per fare
un singolo acquisto.
Cosa allora meglio di una PWA per essere meno
invasivi?
46. Personalizzabili
Splash screen: una volta
installata, l’app verrà
avviata con una schermata
personalizzabile con logo,
il nome completo e colore
di background.
48. 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).
49. Ancora in dubbio?
Ora che ti ho elencato tutti questi vantaggi,
sei ancora indeciso se creare la tua prima PWA?
50. 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.
55. Baseline Progressive Web App
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/
56. Baseline Progressive Web App
4. Il sito funziona cross-browser
Chrome, Edge, Firefox, Opera & Safari
57. Baseline Progressive Web App
5. Transizioni di pagina veloci
Lazy load su immagini?
CSS critico inline?
58. Baseline Progressive Web App
6. Ogni pagina ha un URL specifico
Contenuti linkabili e condivisibili
60. 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
61. Exemplary Progressive Web App
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 )
62. Exemplary Progressive Web App
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
63. Exemplary Progressive Web App
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
64. Exemplary Progressive Web App
Prestazioni e tempi di caricamento
–Primo caricamento rapido anche su 3G
65. Exemplary Progressive Web App
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
66. Exemplary Progressive Web App
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
68. 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"
69. Crea il file Manifest.json
Crea con un editor di
testo il file
manifest.json e
compilalo seguendo la
logica nell’esempio a
seguire.
71. 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.
{ "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"}
72. Cosa definisce il file Manifest.json
name: fornisce un nome
alla PWA leggibile
dall’utente, ad esempio
tra un elenco di altre
applicazioni o
un'etichetta per
un'icona.
{ "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"}
73. Cosa definisce il file Manifest.json
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.
{ "short_name": "EVE Milano",
"name": "EVE Milano Consulenza SEO",
"icons": [
{ "src": "/wp-content/uploads/apple-
icons/apple-touch-icon-48x48.png",
"type":"image/png", "sizes":"48x48"},
{ "src": "/wp-content/uploads/apple-
icons/apple-touch-icon-96x96.png",
"type":"image/png", "sizes":"96x96"},
{ "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"}
74. Cosa definisce il file Manifest.json
start_url: specifica l'URL che
viene caricato quando un
utente avvia la PWA da un
dispositivo.
{ "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"}
75. Cosa definisce il file Manifest.json
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: …
{ "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"}
76. Cosa definisce il file Manifest.json
display: definisce il layout
visivo della PWA. Le possibilità
sono:
• Standalone: ...
• Fullscreen: viene utilizzata
tutta l'area di
visualizzazione disponibile.
Non viene mostrato alcun
elemento del browser.
• Browser: …
{ "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"}
77. Cosa definisce il file Manifest.json
display: definisce il layout
visivo della PWA. Le possibilità
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.
{ "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"}
78. Cosa definisce il file Manifest.json
lang: specifica la
lingua principale
usata nella PWA.
Questo valore è una
stringa contenente
una singola tag di
lingua.
{ "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"}
79. Cosa definisce il file Manifest.json
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.
{ "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"}
80. Cosa definisce il file Manifest.json
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,
…).
{ "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"}
81. Cosa definisce il file Manifest.json
orientation: imposta
l’orientamento della tua app in
verticale od orizzontale.
• any
• natural
• landscape
– landscape-primary
– landscape-secondary
• portrait
– portrait-primary
– portrait-secondary
{ "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"}
82. Carica e linka il file Manifest.json
Carica il tuo file manifest.json nella root del web
server.
83. 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">
84. 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.
85. Service Worker
Ora devi creare l’ultima dipendenza per la tua
PWA, la più importante: il Service Worker.
86. 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
87. 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.
89. sw.js
Un service worker passa attraverso tre fasi del
suo ciclo di vita:
1. Registrazione
2. Installazione
3. Attivazione
90. 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().
91. 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.
self.addEventListener('install', e => {
console.log('PWA Service Worker installing.');
let timeStamp = Date.now();
e.waitUntil(caches.open('evemilano_service_work
er').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);
}));
});
92. sw.js – installazione e attivazione
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.
self.addEventListener('install', e => {
console.log('PWA Service Worker installing.');
let timeStamp = Date.now();
e.waitUntil(caches.open('evemilano_service_work
er').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);
}));
});
93. sw.js – installazione e attivazione
Fetch event listener: il
SW intercetta le
richieste e decide se
fornire la cache o la
risorsa dalla rete.
self.addEventListener('install', e => {
console.log('PWA Service Worker installing.');
let timeStamp = Date.now();
e.waitUntil(caches.open('evemilano_service_work
er').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);
}));
});
94. sw.js – installazione e attivazione
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
95. sw.js – installazione e attivazione
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.
96. 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.
97. sw.js – improve it!
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.
98. sw.js – improve it!
HTML
CSS
JS (interni ed esterni)
Immagini
Font
evemilano.com/sw.js
99. 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.
100. 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.
101. 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.
103. 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.
105. 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.
106. 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).
107. 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/
110. 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.
113. 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
114. 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.
115. 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
116. 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
117. 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
119. 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
Un intervento atipico dato che non parlo di SEO. Le PWA mi hanno appassionato, è poco più di un anno che ne seguo lo sviluppo. Già a novembre 2016 su EVE Milano avevo installato la prima versione della PWA su evemilano. Con questo intervento vorrei presentarvi le caratteristiche delle PWA e mostrarvi quanto sia semplice sfruttare le funzionalità base. Non voglio entrare nei dettagli tecnici anche se vi mostrerò un paio di script, dato che non sono uno sviluppatore e questo dimostra ancora di più quanto possa essere facile installare una PWA.
O applicazioni web progressive per i rispettosi della lingua italiana
Un nuovo modo per offrire esperienze utente entusiasmanti sul web. La tecnologia nasce da Google e poi è stata abbracciata da altri browser e oggi la compatibilità delle PWA è molto vasta.
Le PWA sono una tecnologia che si aggiunge in parallelo ad un sito web, abilitando funzionalità particolari. Non sostituisce il sito web e non è indipendente come una app nativa. È come aggiungere optional alla propria auto.
Quando si parla di pwa si parla di esperienza utente. Tutte le funzioni abilitate dalle pwa sono concentrate sull'offrire un'esperienza utente nuova
Le pwa possono offrire un'esperienza utente più veloce, gratificante ed interattiva
E da breve anche su smartphone apple, anche se in modo al momento limitato.
Le pwa sono il punto di unione tra un sito web e una app nativa.
Vediamo le caratteristiche tipiche di una pwa e quali di queste possono essere davvero un vantaggio in termini di esperienza utente rispetto a navigare il sito web via browser.
Rispetto alla semplicità con cui si indicizza un sito web
Compatibilità crescente: ora le pwa funzionano su chrome, opera e tutti i browser basati su Chromium, funzionano anche su firefox, samsung browser e safari - al momento parzialmente.
Sono diversi gli attori in gioco su questa tecnologia
Le pwa sono sicure. Un requisito fondamentale per abilitare le pwa è servire il contenuto via HTTPS
Paghiamo Google per fare click ed impression
Tempi di download delle dipendenze si riducono drasticamente a vantaggio della velocità di caricamento e transizione delle pagine
gira
La navigazione offline è una delle caratteristiche più interessanti delle pwa
Oltre ad essere veloci danno priorità al contenuto
Massima area visibile e visibilità verticale
È possibile analizzare specificatamente il segmento di utenti che usa il sito via pwa
Abilitare il tracciamento è molto semplice
Questo permette di segmentare gli utenti e confrontare i kpi
L'utente che usa la pwa è un utente affezionato
Un canale di affezionati che è facile targettizzare. Facendo una PWA abbiamo già le basi per abilitare facilmente le notifiche push di terze parti
Articoli del blog, quindi non massaggi acchiappaclick con offerte imperdibili. Il CTR è molto buono!
È questo per un nerd è molto importante. Una pwa non è invasiva come potrebbe essere la sua alternativa nativa
Occupa poco e non è invasiva
Un'altra caratteristica delle pwa è la possibilità di customizzare alcuni elementi con i propri colori, come ad esempio la barra degli indirizzi
Senza andare in contrasto o sovrascriversi
Vista la propaganda di Google per un web più sicuro non poteva mancare questo requisito fondamentale.
La pwa deve funzionare offline, magari non al 100% ma la pwa in aereo mode deve rispondere 200 quando viene lanciata. Quindi almeno l'url di avvio deve essere messo in cache
Problema non si pone per i siti classici in HTML o PHP ma è importante per tutti i siti basati su framework in javascript. Il sito non può avere un URL unico con contenuti dinamici, perché precluderebbe una corretta scansione ed indicizzazione. Anche una app sviluppata in javascript deve basare le proprie pagine su url unicoci. Un framework in javascript dovrebbe usare le history api.
I requisiti facoltativi si basano su best practice di usabilità
Per far capire all'utente che le funzionalità del sito potrebbero essere limitate
Caratteristiche avanzate che potrebbe sfruttare un ecommerce
Appare sotto l'icona o quando non c'è spazio per un nome più lungo
Nome lungo, appare nello spash screen o dove c'è spazio per il nome completo
L'ultimo punto è il più vago, in pratica dipende dal livello di interazione che c'è tra utente e sito web. Una visita di ritorno è un buon motivo per abilitare il bottone, diverse pagine viste di fila è un altro buon motivo per attivare il bottone.
Estensione di chrome
Alcune funzioni sono comprese in chrome dev tool
Io uso estensione