Slide utilizzate durante l'intervento sulle Progressive Web App e le Trusted Web Activities applicate a Wordpress e Woocommerce.
Trovate informazioni più precise sull'argomento su https://2019.catania.wordcamp.org/session/progressive-web-app-e-twa/
e sugli articoli https://www.francescogiammanco.it/progressive-web-app-lighthouse/
e https://www.francescogiammanco.it/trasformare-un-sito-in-twa/
2. Francesco Giammanco
SEO su Yandex e tools Yandex
Consulente SEO e Marketing
internazionale
Formazione Marketing Turismo
Project Manager Web Agency modulare e
“Palermo Ladies Open”.
3. Cos’è una PWA?
• Applicazione web che si
comporta come una pagina web
• Offre funzionalità extra (sito
offline visibile, push notifications)
• Facile: si attiva con un clic
• Sicura: richiede il protocollo
HTTPS
• Installabile su Desktop
4. Vantaggi
• Le funzioni base non
richiedono un Developer
• Si adatta al contenuto del
sito.
• Permette di realizzare
strategie marketing low cost.
• Offre servizi in app senza
spese.
5. Svantaggi
• Non tutti i browser li
accettano.
• Aggiornamenti lenti (vedi
Apple).
• Usa più batteria.
• Facile ma poco conosciuta.
6. Il SEO e le PWA
(fattori indiretti di ranking)
• Aumento dell’accessibilità (traffic
migliora il ranking), meno passaggi per
accedere al sito.
• Migliore esperienza (le push notifications
e le altre funzioni possono migliorare
l’esperienza dell’utente).
• Aspetto grafico più accattivante nei
browser.
7. Il SEO e le PWA
(fattori di ranking)
• Sito funziona in modalità offline
(uptime del server per gli utenti
pari al 100%)
• Migliore performance e velocità
• Caching del browser
8. Lighthouse
(tool integrato di Chrome)
Utilizza Lighthouse per
monitorare lo stato della tua
Progressive Web App
Premi “Ctrl + Shift + I” mentre
sei su una finestra di Chrome,
alla casella “Audits”
9. To Do List
Tutti gli strumenti per montare una PWA
• Creare il Service Worker (file javascript)
• Creare Manifest.json
• Script da inserire nelle pagine del sito.
10. Service-Worker.js
(lo potete trovare anche come sw.js)
• E’ il file che gestisce la cache del browser
• Devi inserire uno script in ogni pagina dove
vuoi che sia attivo.
• Inserisci il file nella root del sito.
11. Service-Worker.js
• Inserisci il codice nello spazio
designato dal tuo tema grafico (prima
della fine di <head>)
• Hai un tema che non lo permette?
Inserisci lo script in <head> o nel
footer delle pagine.
• NON aggiungerlo in function.php
Visita http://bit.ly/2XsEB4Q per copiare il codice
12. Service-Worker.js
• Inserisci lo script in un file che
chiamerai service-worker.js
• Inserisci il file nella root del sito.
Premi “ Ctrl + Shift + I ” su Chrome,
poi vai su Application > Service
worker per vedere se è installato
correttamente.
Visita http://bit.ly/2XsEB4Q per copiare il codice
13. Service-Worker.js
La prima sezione di codice:
• Installa il service worker,
• crea una o più cache dedicate,
• Inserisci i file che vuoi far gestire
dalla cache.
Visita http://bit.ly/2XsEB4Q per copiare il codice
14. Service-Worker.js
Seconda sezione di codice:
Cloniamo le richieste, perché una
verrà utilizzata dalla cache, una dal
browser.
Se il browser ha una versione in cache
della pagina la presenterà al posto di
caricarne una nuova.
Visita http://bit.ly/2XsEB4Q per copiare il codice
15. Manifest.json
• Crea un file Manifest.json
• Il file ha effetto sulla directory in cui è inserito e in tutte le sub
directory.
• Se vuoi che influenzi l’intero sito inseriscilo nella root.
• Il file deve essere personalizzato.
• Inserisci uno script su una sezione del sito che influenzi tutte le
pagine.
16. Manifest.json
• Crea un file Manifest.json
• Il file ha effetto sulla directory in cui è inserito
e in tutte le sottodirectory.
• Se vuoi che influenzi l’intero sito inseriscilo
nella root.
• Il file deve essere personalizzato.
Visita http://bit.ly/2XsEB4Q per copiare il codice
17. Manifest.json
• Crea un file Manifest.json
• Il file ha effetto sulla directory in cui è inserito e in tutte le sottodirectory.
• Se vuoi che influenzi l’intero sito inseriscilo nella root.
• Il file deve essere personalizzato.
Visita http://bit.ly/2XsEB4Q per copiare il codice
18. Manifest.json
• Controlla sul pannello Application di Chrome
che il file sia installato correttamente.
• Se tutto è andato correttamente, spunterà un
popup (differente su ogni browser) che
avviserà della possibilità di installare la
progressive web app del sito.
19. Manifest.json
Successivamente, una volta installata la
app sullo smartphone (o sul desktop),
sarà possible aprire le pagine del sito
dall’app,
anche durante una normale navigazione
su Google.
20. Cos’è una TWA?
• le Trusted Web Activities (TWA)
permette di pubblicare i siti sugli sugli
store (Windows, Android, iOS).
• Utilizzare una sezione di un sito
come app.
• Avere un servizio integrato (app)
integrato nel database di un e-
commerce.
21. Come si realizza una TWA
Ci sono vari metodi:
• Realizzarla a partire dale
conoscenze delle PWA
https://developers.google.com
/web/updates/2019/02/using-
twa (CORRETTO)
• Utilizzare un repository
Google e completare
l’operazione da se (CORRETTO
MA PIGRO)
• Utilizzare servizi terzi per
ricevere un APK pronta
(VELOCE MA SVANTAGGIOSO)
22. Utilizzeremo il metodo
“pigro”
• il metodo “corretto” ha
senso se dovete crescere come
developer.
• Il metodo veloce lascia il
“segno” del metodo utilizzato
(URL della App).
• Inseriremo la TWA anche su
iOS Store? No, richiederebbe
un passaggio ulteriore.
23. Iniziamo!
• Avere i permessi per creare file e cartelle nello
spazio in cui è installato il tuo sito WordPress
• Devi avere i requisiti su Lighthouse per generare
la chiamata “Add to Homescreen”
• Devi poter pubblicare app su Google Play
https://play.google.com/apps/publish/
• Scaricare Android Studio
• Scaricare da GitHub il file ZIP presente in
https://github.com/GoogleChromeLabs/svgomg-
twa
24. Crea la tua App
• Vai su https://play.google.com/apps/publish/
• Clicca su CREA APPLICAZIONE
• Inserisci le informazioni che servono per terminare la
prima parte della creazione dell’app
• Vai su Firma dell’app e copia Fingerprint SHA-256 del certificato
• Vai a generare il Digital Statement Asset tramite
https://developers.google.com/digital-asset-
links/tools/generator
25. Digital Statement Asset
• Apri https://developers.google.com/digital-asset-links/tools/generator
• Copia da Google Play Fingerprint SHA-256
Inserisci:
• 1) l’URL del sito,
• 2) il nome dellApp di Google Play
• 3) Fingerprint SHA-256 del certificato
• Genera il codice che va dentro la cartella (da creare) /.well-known/assetlinks.json
26. Crea la tua App
• Apri Android Studio e vai su File > New > Import Project
e caricare il progetto scaricato da GitHub.
• Modifica il file AndroidManifest.XML inserendo i dati
che combacino con la scheda dell’app e l’URL del sito da
inserire
• Vai su New > Image Asset per caricare le icone e le
immagini di presentazione dell’app
• Firma la app (genera una key) tramite il pannello Build >
Generate Signed Bundle / Apk
27. Crea la tua App
• Carica la tua app su Release dell’app
dentro il tuo progetto su Google Play
• Fornisci tutte le informazioni richieste
dai singoli pannelli.
• Non realizzare Beta o altro, dovresti
generare varianti della key su Android
Studio.
28. Link utili
This TWA stuff rocks!
https://medium.com/@svenbudak/this-twa-stuff-
rocks-finally-i-got-my-pwa-on-google-play-store-
b92fe8dae31f
Realizzare una PWA da zero per WordPress
https://www.francescogiammanco.it/progressive-web-
app-lighthouse/
Realizzare una TWA da zero
https://www.francescogiammanco.it/trasformare-un-
sito-in-twa/
TWA di GoogleChromeLabs
https://github.com/GoogleChromeLabs/svgomg-twa
Web App Manifest Generator
https://app-manifest.firebaseapp.com/
