Progressive Web App e TWA - Francesco Giammanco

Progressive Web App e TWA Una soluzione marketer ad un
problema da Developers

Francesco Giammanco SEO su Yandex e tools Yandex Consulente SEO
e Marketing internazionale Formazione Marketing Turismo Project Manager in una Web Agency modulare.

Cos’è una PWA? • Applicazione web che si comporta come
una pagina • Offre funzionalità extra (sito offline visibile, push notifications) • Facile: si attiva con un clic • Sicura: richiede il protocollo HTTPS • Installabile su Desktop

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. • Sicura: protocollo HTTPS • Facile: si attiva con un clic

Svantaggi • Non tutti i browser li accettano. • Aggiornamenti
lenti (vedi Apple). • Usa più batteria. • Facile ma poco conosciuta. • Sicura: richiede il protocollo HTTPS

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 dei browser.

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

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”

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.

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 dov’è attivo. • Inserisci il file nella root del sito.

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

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

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

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

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.

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

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.

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.

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.

Come si realizza una TWA Ci sono vari metodi: •
Realizzarla a partire dall’installazione della 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)

Utilizzeremo il metodo “pigro” • il metodo “corretto” ha senso
se 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.

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

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-assetlinks/tools/generator

Digital Statement Asset • Apri https://developers.google.com/digital-asset-links/tools/generator • Vai su 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

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

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.

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/

Ringraziamenti • Francesco Grasso • Lo Staff di WordCamp Catania
• WordPress Meetup Palermo

Progressive Web App e TWA - Francesco Giammanco

Progressive Web App e TWA - Francesco Giammanco

WordCamp Catania

More Decks by WordCamp Catania

Other Decks in Education

Featured

Transcript

Progressive Web App e TWA Una soluzione marketer ad un

Francesco Giammanco SEO su Yandex e tools Yandex Consulente SEO

Cos’è una PWA? • Applicazione web che si comporta come

Vantaggi • Le funzioni base non richiedono un Developer •

Svantaggi • Non tutti i browser li accettano. • Aggiornamenti

Il SEO e le PWA (fattori indiretti di ranking) •

Il SEO e le PWA (fattori di ranking) • Sito

Lighthouse (tool integrato di Chrome) Utilizza Lighthouse per monitorare lo

To Do List Tutti gli strumenti per montare una PWA

Service-Worker.js (lo potete trovare anche come sw.js) • E’ il

Service-Worker.js • Inserisci il codice nello spazio designato dal tuo

Service-Worker.js • Inserisci lo script in un file che chiamerai

Service-Worker.js La prima sezione di codice: • Installa il service

Service-Worker.js Seconda sezione di codice: Cloniamo le richieste, perché una

Manifest.json • Crea un file Manifest.json • Il file ha

Manifest.json • Crea un file Manifest.json • Il file ha

Manifest.json • Crea un file Manifest.json • Il file ha

Manifest.json • Controlla sul pannello Application di Chrome che il

Manifest.json Successivamente, una volta installata la app sullo smartphone (o

Cos’è una TWA? • le Trusted Web Activities (TWA) permette

Come si realizza una TWA Ci sono vari metodi: •

Utilizzeremo il metodo “pigro” • il metodo “corretto” ha senso

Iniziamo! • Avere i permessi per creare file e cartelle

Crea la tua App • Vai su https://play.google.com/apps/publish/ • Clicca

Digital Statement Asset • Apri https://developers.google.com/digital-asset-links/tools/generator • Vai su Inserisci:

Crea la tua App • Apri Android Studio e vai

Crea la tua App • Carica la tua app su

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

Ringraziamenti • Francesco Grasso • Lo Staff di WordCamp Catania