Download to read offline
WordCamp Catania 2019 PWA e TWA
- 1. Progressive Web App e TWA Unasoluzione marketer ad un problema da Developers
- 2. Francesco Giammanco SEO suYandex 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 funzionibase 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 tuttii browser li accettano. • Aggiornamenti lenti (vedi Apple). • Usa più batteria. • Facile ma poco conosciuta.
- 6. Il SEO ele 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 ele 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 diChrome) 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 Tuttigli 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 trovareanche 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 ilcodice 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 loscript 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 sezionedi 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 dicodice: 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 unfile 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 unfile 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 unfile 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 sulpannello 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 voltainstallata 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 realizzauna 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 ipermessi 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 tuaApp • 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 tuaApp • 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 tuaApp • 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 TWAstuff 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