Progressive Web App su WordPress (PWA): Per essere presenti anche sul Mobile

Come trasformare un sito WordPress in una Progressive Web App (PWA) per essere presenti anche sulla home dei dispositivi mobile degli utenti.

Se sei interessato a questo argomento ti consiglio di leggere il post per intero.

  • Cosa sono le Progressive Web App o PWA?

    Le progressive web app sono simili alle normali App fornendo un accesso diretto al sito tramite un’icona posta sulla Home dello smartphone come farebbe qualunque App. Si possono considerare una sorta di ibridi fra le normali pagine web e le App native.

  • Quali sono le differenze fra una PWA e una normale APP?

    1> I tempi e i costi di sviluppo sono ben inferiori. 2> Non necessità di particolari autorizzazioni per funzionare e quindi non sono invasive sulla privacy. 3> Il contenuto del sito è consultabile anche offline.

  • Come trasformare un sito WordPress in una Progressive Web App?

    Anche in questo caso entrano in gioco i plugin, infatti esistono diversi software che sono in grado di tramutare il sito in WordPress in una versione PWA.

  • Come funziona una Progressive Web App?

    Per funzionare è necessario una connessione protetta HTTPS, la creazione di un file che si chiama Manifest e il Service Worker. Per avere maggiori informazioni continua a leggere questo articolo.

  • Cosa deve fare l’utente per usare una PWA?

    Si richiede da parte dell’utente l’installazione della App attraverso il browser che sta usando quando visita il sito.

WpressPlanet - Come creare un sito Web con Wordpress

Super Progressive Web Apps: Basta un click per avere una PWA

Il plugin in questione si chiama Super Progressive Apps e consente con la sua semplice installazione da parte dell’utente di avere una versione scaricabile e offline del nostro sito web sullo smartphone e rendendolo direttamente accessibile tramite un’icona posta sulla Home del dispositivo.

In questo modo il navigatore avrà accesso al sito web direttamente dal proprio smartphone andando a cliccare sull’icona. Durante la navigazione scaricherà automaticamente le pagine visitate; in questo modo saranno consultabili anche quando non si avrà a disposizione una connessione Internet.

Una volta che l’amministratore del sito avrà attivato il plugin vedrà sulla barra laterale di sinistra la voce “Super PWA” e sotto di essa le voci “Impostazioni” e “Add-On“.

Su “Impostazionil’amministratore troverà diverse funzioni le quali consentiranno di settare alcuni parametri. Come si vede dall’immagine sottostante i descrittivi dei campi sono abbastanza esaurienti per comprenderne la funzione a cui sono adibiti.

Impostazioni generali plugin
Impostazioni Plugin

I campi più importanti in questa prima sezione sono il “Nome dell’applicazione” la cui scritta viene mostrata sotto l’icona installata sullo smartphone, mentre “Icona applicazione” rappresenta l’immagine (icona) personalizzata che verrà usata sulla Home dello smartphone.

L’immagine sotto la voce “icona dello splash screen” è utilizzata, invece, nella finestra che si apre dopo il lancio dell’applicativo tramite l’icona dell’applicazione.

Sempre nelle impostazioni possiamo decidere il colore dello sfondo e quello del tema, ma la parte più importante è l’impostazione della pagina iniziale che specifica quale pagina verrà caricata quando lo si avvia da un dispositivo e la pagina offline, che identifica quale pagina dovrà essere mostrata quando il sito verrà richiamato in modalità offline.

Impostazioni plugin super progressive apps
Impostazioni di colore e orientamento

La voce Orientamento imposta lo schermo come: segui l’orientamento del dispositivo, verticale e orizzontale, invece la voce Display mostra tre tipologie di visualizzazione: a tutto schermo, come browser che mostra invece la barra degli indirizzi e interfaccia minimal.

Impostazione stato su Super PWA
Impostazioni Stato su Super Progress PWA

Nella parte finale della pagina delle impostazioni vi è lo Stato, che non è altro un check per verificare che le componenti della PWA siano attive. In questa parte delle impostazioni si trovano anche i link per visualizzare i file generati dal plugin che sono il Manifesto e il Service Worker.

La sezione Add-On consente, invece, di aggiungere il tracciamento degli accessi su Google Analytics e le icone di Apple Touch su IOS.

Add-on plugin super PWA
Add-On plugin Super PWA

Attivando il Monitoraggio UTM è possibile tracciare le visite proveniente dalla web app. I primi tre campi sono obbligatori per il monitoraggio.

Google analytics pwa
Campagna Google Analytics

Guarda questo video per vedere come l’utente può installare la Web App usando Chrome Android. Alla fine della procedura l’utente troverà sulla Home del proprio smartphone l’icona da te scelta in precedenza tramite le impostazioni del plugin. Nel video verrà visualizzata l’icona con la scritta Wpressplanet.

Nel caso in cui il banner per la richiesta d’installare la web app non venisse visualizzato sulla pagina web dell’utente, potrà avviare la procedura andando a cliccare sull’icona rappresentata dai tre punti in verticale e selezionare la voce “Aggiungi a schermata Home“.

Come installare Super Progressive Web Apps sul Desktop di Windows

Il plugin Progressive Super PWA permette d’installare l’app da parte dell’utente anche su Windows tramite il browser Chrome ed Edge.

Web App su Chorme

Browser Chrome su Pc

Cliccando sull’icona a forma di croce viene mostrata la finestra per installare l’app. Alla fine della procedura l’utente trovera sul desktop l’icona per lanciare la web app.

web app edge

Browser Edge su Pc

Cliccando l’icona sulla croce verrà mostrata al navigatore la finestra per lanciare la procedura d’installazione della Web App.

Questa è l’icona che viene visualizzata sul Desktop nel caso di Wpressplanet. Ti ricordo che l’icona tramite il plugin è personalizzabile con il proprio logo.

Icona Web App su Desktop
Icona Web App su Desktop

Le App installate su Chrome. Dall’immagine sottostante si vede anche l’app installata di Wpresspanet con il relativo logo.

app browser
App installate su Chrome

Richiamare la Web App tramite il Browser.

Il navigatore può richiamare la web app direttamente dal browser, basterà infatti cliccare sull’icona posta all’interno della barra degli url per aprire la finestra con il pulsante “Apri” della PWA.

Link Web App sul Browser
Link Web App sul Browser

Progressive Web App: Manifest, Service Worker e HTTPS

In questa parte dell’articolo tratterò in linea generale su come funziona una PWA. Come già accennato precedentemente è necessario che il dominio utilizzi una connessione protetta HTTPS. Per convenzione assegnerò a Manifest il nome file “manifest.json, mentre per Service Worker il file si chiamerà “serviceworker.js”.

Nel file manifest.json vengono impostate le seguenti informazioni:

  • Percorso e dimensioni delle icone;
  • Orientamento del Display;
  • Tipologia del display;
  • Descrizione;
  • Prima pagina PWA;
  • Lingua parlata;
  • Colori di sfondo e tema del browser.

Il codice fra parentesi (<link rel=”manifest” href=”/manifest.json”> <meta name=”theme-color” content=”#cc9194b”>) va inserito all’interno del tag <head></head> mentre il file manifest.json deve essere copiato nella root principale del sito. Esempio: https://miosito.it/manifest.json.

Il codice sottostante è un esempio di cosa contiene il file manifest.json.

{ "name": "MioApp", "short_name": "Mio", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "orientation": "portrait", "scope": "/Test", "start_url": "https://wpressplanet.com/area-privata-su-wordpress" }

Per generare automaticamente un file manifest.json per una specifica pagina web puoi usare questo tool online e ottenere maggiori dettagli tecnici sul sito per sviluppatori di Google.

Il Service Worker rappresenta il fulcro delle funzionalità della PWA e si occupa di creare la cache per consentire la consultazione offline dei contenuti, della gestione delle notifiche push, la sincronizzazione dei contenuti in background e tanto altro.

Anche Service Worker genera un file in javascript (servicevorker.js) che va posizionato nella root del sito web per funzionare.

Nel caso specifico di Super Progressive Apps per conoscere il contenuto di questi due file basterà andare in “Super PWA>Impostazioni” e nella parte inferiore della pagina alla voce Stato vi sono i link per visualizzare il contenuto dei rispettivi file.

Conclusione.

Super Progressive Web Apps permette di avere una versione PWA del proprio sito web su WordPress in modo molto semplice fornendo un plugin di facile impostazione. Tutto è davvero a portata di pochi click con la possibilità di avere anche una versione desktop dell’app. Non male per un software che viene fornito gratuitamente!

La tua iscrizione non può essere convalidata.
La tua iscrizione è avvenuta correttamente.

Non ti dimenticare di…

scaricare la guida su WordPress per sapere cosa fare dopo l’installazione.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *