Progressive Web App per presentazione Skills&More

Progressive
Web App
Una soluzione marketer ad un problema da
Developers

Francesco Giammanco
Consulente SEO
Esperto di Yandex e tools Yandex (menzione ufficiale dell’Head of
Tools di Yandex)
Consulente SEO e Marketing per aziende nella top 5 nazionale
in settori competitivi (fotografia, fiscalità, ect.)
Consulente SEO internazionale (Russia, Repubblica Ceca)
Insegnante nei corsi di formazione abilitanti per l’apertura di
Strutture Ricettive settore 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

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.

Svantaggi
• Non tutti i browser li accettano.
• Aggiornamenti lenti (vedi Apple).
• Usa più batteria.
• Facile: si attiva con un clic
• 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 bot e 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 lo script preferibilemente in
<head> o nel footer delle pagine.
• Su WordPress, va bene nei classici
file del tema come header.php o
footer.php
• Non aggiungerlo in function.php in
questa forma
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.

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.

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.

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.
• Inserisci uno script su una sezione del sito che influenzi tutte le
pagine.

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.

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.

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,
sarà possible aprire le pagine del sito
dall’app,
anche durante una normale navigazione
su Google.

Ringraziamenti
La mamma
Andrea Barghigiani - SkillsAndMore
Progressive Web App presso Google Developer
Web App Manifest Generator
https://app-manifest.firebaseapp.com/
Plugin per WordPress https://superpwa.com/
pompa il morale.

Progressive Web App per presentazione Skills&More

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (15)

Semelhante a Progressive Web App per presentazione Skills&More

Semelhante a Progressive Web App per presentazione Skills&More (20)

Progressive Web App per presentazione Skills&More