Come creare una PWA (bella però) con Joomla

Una PWA (Progressive Web App) è un'applicazione web, gestita come una normale pagina web, ma che si comporta un po' come un'applicazione nativa anche se non lo è. In un altro articolo vedremo come convertire la nostra PWA in un'applicazione nativa (con la possibilità di caricarla negli store quindi).

In quest'articolo invece, vedremo come creare questa PWA con Joomla. Può essere fatto anche con altri CMS ovviamente, io però, mi concentrerò su Joomla, perché al momento le informazioni online per fare una cosa simile con questo CMS sono inferiori.

Parto dicendo che voglio dare indicazioni adatte a tutti, quindi spiegherò come fare la cosa utilizzando componenti già esistenti. Purtroppo non mi risulta che esistano componenti simili gratuiti, ma la soluzione che indicherò è molto economica. L'alternativa sarebbe intervenite manualmente scrivendo del codice, ma a quel punto non sarebbe più una soluzione adatta a tutti. Quindi qui, analizzerò la soluzione più semplice.

Proporrò due soluzioni, entrambe daranno risultati professionali, ma differenti tra loro.

La prima soluzione è più semplice e immediata della seconda. Avremo la nostra PWA che girerà sullo smartphone comportandosi come un'app nativa, ma non sarà altro che la versione mobile del sito web aperta come se fosse un'applicazione nativa.

Per questa prima soluzione avremo bisogno solo del plugin Progressive Web App di ExtensionCoder, lo trovate qui in tre versioni.

Come vedete è un plugin molto economico nella versione per un dominio (con tre mesi di aggiornamenti e supporto), poi abbiamo anche la versione per tre domini (con sei mesi di aggiornamenti e supporto) e la versione per domini illimitati (con aggiornamenti e supporto a vita). Sono tutte e tre uguali, quindi per quanto riguarda questa guida è indifferente la vostra scelta, cambia solo il numero di domini in cui è possibile installare il plugin e i mesi di supporto offerti.

Vi lascio più avanti nell'articolo, alcune immagini di una PWA creata sfruttando questa soluzione.

La seconda soluzione invece, è adatta a chi prevede la possibilità di convertire in un secondo momento la PWA, in un'app nativa per Android o iOS, con la relativa possibilità di caricarle nei rispettivi store.

Per questa soluzione invece, serve sia il plugin già indicato, Progressive Web App di ExtensionCoder e serve anche un altro componente, MightySites di AlterBrains, lo trovate qui.

Anche in questo caso, vi lascio a seguire, alcune immagini di una PWA creata sfruttando questa soluzione.

Perché la seconda soluzione è più completa della prima?

Se nel primo caso, con il plugin Progressive Web App di ExtensionCoder, avremo la nostra PWA che girerà sullo smartphone comportandosi come un'app nativa, ma non sarà altro che la versione mobile del sito web aperta come se fosse un'applicazione nativa, nel secondo caso utilizzando lo stesso plugin, ma con l'aggiunta di MightySites di AlterBrains avremo per la nostra PWA, una versione completamente diversa della semplice versione mobile del nostro sito web.

Per capirci, guardate le immagini a seguire, sono due versioni di PWA di SolelyStar (un social creato da me) fatte secondo le due soluzioni suggerite.

Come vedete sono due soluzioni professionali, sta a voi decidere quale si adatta meglio al vostro progetto. Per aiutarvi nella scelta vi aiuto con alcune considerazioni.

• La PWA basata sulla prima soluzione è meno professionale della seconda? Assolutamente no, la differenza sta più nell'interfaccia. La seconda soluzione propone una grafica più da app nativa e questo è ciò che si cerca solitamente quando si prevede la possibilità futura di convertire la PWA in applicazioni che andranno pubblicate sui rispettivi store.

• La seconda considerazione riguarda la grafica, in entrambi i casi si deve lavorare sulla grafica per ottenere certi risultati. Dovete considerare che il risultato ottenuto con la prima soluzione è un bel risultato (a mio parere), ma è anche frutto di un lavoro di personalizzazione fatto sulla versione mobile del sito SolelyStar. Per farvi capire meglio, se la versione mobile del vostro sito fa schifo graficamente, la vostra PWA farà schifo graficamente seppur sarà comunque tecnicamente perfetta e funzionante.

• Il terzo punto riguarda i costi. Se scegliete la prima strada ovviamente risparmierete, perché vi servirà solo il plugin già indicato, Progressive Web App di ExtensionCoder (avete i link sopra) che nella versione per un dominio (con tre mesi di aggiornamenti e supporto) vi costa solo 19€. Se avete una buona versione mobile o siete in grado di crearla questa potrebbe essere la soluzione migliore. Se invece il vostro progetto richiede una PWA che si distacchi completamente dalla versione mobile del sito e che magari faccia proprio altre cose rispetto al sito, oltre ai 19€ di Progressive Web App di ExtensionCoder, dovrete aggiungere i 59 dollari (circa 55€) di MightySites di AlterBrains. 

Se voi visualizzate solelystar.com da smartphone e accettate di installare l'app quando richiesto vedrete proprio questa soluzione perché è quella integrata al momento nel sito. La prima soluzione l'ho ripristinata momentaneamente solo per fare gli screenshot che vedete in alto, ma il sito attualmente usa la mia seconda soluzione proposta.

Una cosa che non ho detto è che la PWA è installabile anche sul PC direttamente dal browser. Con Chrome per esempio basterà cliccare nel punto indicato a seguire:

E vi ritroverete l'app nell'apposita schermata delle app di Chrome, raggiungibile cliccando il tasto "App" come indicato a seguire: 

Io per SolelyStar, ho scelto la seconda soluzione, non perché reputo la prima non valida, ma perché avevo necessità specifiche come un'interfaccia più da app nativa, perché fin dall'inizio ho creato la mia PWA sapendo che poi l'avrei usata come base per l'app vera e propria che avrei realizzato in un secondo momento per gli store. Poi, essendo un social, avevo bisogno di funzionalità diverse rispetto alla versione mobile del sito, perché ricordo che la prima soluzione proposta nel mio articolo, offre come risultato proprio questo, una PWA che girerà sullo smartphone comportandosi come un'app nativa, ma non sarà altro che la versione mobile del sito web aperta come se fosse un'applicazione nativa.

Quindi perché ho integrato proprio il componente MightySites di AlterBrains alla Progressive Web App di ExtensionCoder? Cosa fa questo componente? Ve lo dico io.

Sostanzialmente crea una o più installazioni virtuali di Joomla in una cartella a scelta del nostro spazio hosting. Per esempio possiamo creare www.nomesito.com/pwa... e inserire questa installazione virtuale di Joomla lì dentro.

Quale vantaggio otteniamo da una cosa simile? Ve lo dico subito, in pratica nell'installazione virtuale che andremo a creare con MightySites avremo un secondo pannello amministrativo di Joomla e tutte le modifiche fatte da quel pannello, avranno conseguenze solo nell'installazione virtuale, cioè il secondo Joomla presente nella cartella scelta da noi, usando lo stesso esempio di prima, l'installazione di Joomla presente su www.nomesito.com/pwa

Quindi avremo un sito più un sito virtuale, con due amministrazioni. Guardate questo schema:

Sito principale: www.nomesito.com

Sito virtuale: www.nomesito.com/pwa

Amministrazione sito principale: www.nomesito.com/administrator

Amministrazione sito virtuale: www.nomesito.com/pwa/administrator

Le due installazioni permetteranno di gestire diversamente i "due Joomla" pur mantenendo lo stesso database. Quindi in sostanza, quando aggiorniamo la versione di Joomla, componenti, plugin ecc., li avremo aggiornati anche nella seconda versione virtuale di Joomla. Un altro aspetto molto utile è che condividendo il database, se qualcuno si registra al nostro sito da desktop, con gli stessi dati potrà accedere anche alla nostra PWA o alla nostra app (se decideremo di crearla in futuro usando la PWA come base). Come ho detto a inizio articolo, in un altro articolo vedremo come convertire la nostra PWA in un'applicazione nativa (con la possibilità di caricarla negli store quindi).

Ora che avete capito cosa fa MightySites potete sbizzarrirvi alla grande. Considerate che in questa seconda installazione virtuale potrete creare altri articoli, altri menu, altri moduli senza interferire con l'installazione principale. Potete anche installare altri plugin, componenti e template da utilizzare solo nella seconda versione di Joomla (vi ritroverete installati plugin, componenti e template su entrambe le versioni in realtà, ma l'effetto di questi plugin, componenti e template sarà visibile solo nelle versione di Joomla in cui vorrete usarle, o anche in entrambe se avete questa necessità).

Quindi potrete creare una seconda versione di Joomla che condivida il database con il sito principale ma che sia super-ottimizzata per il mobile. Per esempio con un template diverso, un menu diverso, componenti diversi, plugin diversi e qualsiasi cosa si possa fare con Joomla potrete farla solo su questa seconda installazione senza interferire minimamente con la prima.

Come legare ora Progressive Web App di ExtensionCoder, alla nostra installazione di Joomla super-ottimizzata per i dispositivi mobili, creata grazie al componente MightySites?

Questa è assolutamente la parte più facile. Tra le impostazioni del plugin Progressive Web App (ve lo ritroverete tra i plugin con il nome "System - Progressive Web App Maker") c'è alla prima voce della scheda "Manifesto" il campo "URL iniziale personalizzato". La scheda "Manifesto" è quella che definisce il file manifest dell'applicazione. Questo file è un elemento essenziale per il funzionamento della PWA. 

In ogni caso, nel campo "URL iniziale personalizzato", basterà scegliere "Sì" e apparirà un nuovo campo, "Avvia URL". In questo campo inseriremo l'URL dove abbiamo la nostra installazione virtuale di Joomla, per esempio "www.nomesito.com/pwa" e il gioco è fatto.

Chi andrà sul nostro sito www.nomesito.com, installando l'applicazione, si ritroverà sullo smartphone una icona (anche l'icona dell'app la definiamo noi dalle impostazioni del plugin) che cliccandola aprirà la nostra PWA richiamando la nostra seconda installazione di Joomla presente su www.nomesito.com/pwa (/pwa l'ho usato io nell'esempio, potete dare alla cartella del vostro secondo Joomla il nome che volete).

Quindi un utente che utilizzerà l'app, non si ritroverà a visualizzare praticamente la versione mobile del sito, ma una versione specifica appositamente creata per l'app. Il che si traduce in un enorme vantaggio quando in futuro (se vorrete farlo) convertirete la vostra PWA in applicazioni vere e proprie caricabili sui vari store.

Guardate l'esempio della PWA che riporto a seguire prendendo nuovamente in esame l'applicazione di SolelyStar. Potete comparare istantaneamente le due versioni spostando il cursore da sinistra a destra. 

La versione di sinistra sfrutta la prima soluzione proposta nell'articolo, quella di destra invece, si basa sulla seconda soluzione proposta.

A seguire invece alcuni brevi video in cui potete vedere le due versioni di PWA in azione.

Iniziamo con la PWA creata sfruttando la prima soluzione e che quindi si basa sulla versione mobile del sito.

Adesso invece vediamo la PWA basata su una seconda installazione di Joomla creata appositamente per la PWA.

Infine vi lascio qualche schermata del plugin Progressive Web App.