Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Progressive Web App e TWA - Francesco Giammanco

Progressive Web App e TWA - Francesco Giammanco

C18117a59c85c586bba4b6d9cebbde2f?s=128

WordCamp Catania

September 21, 2019
Tweet

Transcript

  1. Progressive Web App e TWA Una soluzione marketer ad un

    problema da Developers
  2. Francesco Giammanco SEO su Yandex e tools Yandex Consulente SEO

    e Marketing internazionale Formazione Marketing Turismo Project Manager in una Web Agency modulare.
  3. 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
  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. • Sicura: protocollo HTTPS • Facile: si attiva con un clic
  5. Svantaggi • Non tutti i browser li accettano. • Aggiornamenti

    lenti (vedi Apple). • Usa più batteria. • Facile ma poco conosciuta. • Sicura: richiede il protocollo HTTPS
  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 dei 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 dov’è 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 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)
  22. 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.
  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 • 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
  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/
  29. Ringraziamenti • Francesco Grasso • Lo Staff di WordCamp Catania

    • WordPress Meetup Palermo