Forza footer-nav con cookie

[alanost (Alan)]

Ciao,
sto creando un’app per il mio forum su dispositivi iOS. Fortunatamente, esiste un progetto chiamato PWABuilder che offre un progetto XCode pronto per impacchettare una web app in un’app. Questo ha funzionato egregiamente anche con il mio forum Discourse; tuttavia, non c’è alcun pulsante indietro o funzionalità simile che faciliti la navigazione.

App iOS generata con PWABuilder (nessuna barra di navigazione in basso):

Tuttavia, nella PWA per iOS è presente una barra in basso con un pulsante indietro. Non ho ancora trovato un modo per visualizzarla al di fuori della PWA su iOS.

La PWA su iOS ha una barra di navigazione in basso, ma non è possibile forzarne la visualizzazione esterna (non ho trovato un modo semplice):

La mia domanda è: è possibile visualizzare anche questa barra all’interno di una WKWebView? Ho anche un’idea su come risolvere il problema. Le app generate con PWABuilder offrono la funzionalità di impostare un cookie quando vengono utilizzate. E se si visualizzasse questa barra di navigazione ogni volta che l’utente ha un cookie chiamato “mobile_footer_nav”? In tal modo, il problema sarebbe risolto.

Impostazioni che possono essere configurate all’interno di un’app generata con PWABuilder (cookie attivo durante l’uso dell’app)

Sarei molto felice se il team di sviluppo potesse dare un’occhiata a questa proposta.

(So che esiste l’app DiscourseHub, ma un’app dedicata per un forum è un’opzione più elegante e più facile da usare e comprendere per gli utenti.)

[Johani (Joe)]

Discourse renderizza quel footer in base ad alcune condizioni. Il footer viene aggiunto qui.

discourse/app/assets/javascripts/discourse/app/templates/application.hbs at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub

showFooterNav è definito qui.

discourse/app/assets/javascripts/discourse/app/controllers/application.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

Se una di queste condizioni è vera, la barra di navigazione verrà visualizzata.

isiOSPWA() e isAppWebview() sono definiti qui

discourse/app/assets/javascripts/discourse/app/lib/utilities.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

Ad esempio, isAppWebview() appare così.

discourse/app/assets/javascripts/discourse/app/lib/utilities.js at 1472e47aae5bfdfb6fd9abfe89beb186c751f514 · discourse/discourse · GitHub

Puoi aggiungere una condizione supplementare nel tuo tema, all’interno del tuo sito Discourse, per verificare la presenza di un cookie, ad esempio in questo modo:

const isWKWebView = () => {
  // controlla la presenza del cookie e restituisci true se esiste
  // oppure utilizza qualsiasi altro metodo per rilevare se l'utente sta utilizzando la tua applicazione
}

Per altre classi, normalmente potresti modificare showFooterNav() nel seguente modo:

api.modifyClass("controller:application", {
  pluginId: "show-footer-nav",
  @discourseComputed
  showFooterNav() {
    // ...
  }
});

Tuttavia, si tratta del controller dell’applicazione, il che significa che verrà memorizzato nella cache prima che il tuo codice abbia la possibilità di essere eseguito. In altre parole, non potrai modificare la classe.

Detto questo, puoi comunque cambiare il valore di showFooterNav con qualcosa del genere:

<script type="text/discourse-plugin" version="0.8">
  const isWKWebView = () => {
    // controlla e restituisci la tua condizione
  };

  if (isWKWebView()) {
    const applicationController = api.container.lookup("controller:application");
    applicationController.set("showFooterNav", true);
  }
</script>

nella scheda intestazione del tuo tema o in un inizializzatore se stai utilizzando un tema remoto.

[alanost (Alan)]

Grazie mille per il rapido aiuto. Purtroppo ricevo un errore.

@Johani

<script type="text/discourse-plugin" version="0.8">
  const isWKWebView = () => {
    // verifica e restituisci la tua condizione
  };

  if (isWKWebView()) {
    const applicationController = api.container.lookup("controller:application");
    applicationController.showFooterNav = true;
  }
</script>

Ho inserito queste righe di codice nell’intestazione del tema e ho anche aggiunto la funzionalità di controllo dei cookie in isWKWebView(). Se non ho il cookie, non succede nulla. Questo funziona per ora. Ma se ho il cookie, questa barra purtroppo non viene visualizzata e nella console appare un errore: “TypeError: Tentativo di assegnazione a una proprietà di sola lettura.”

[Johani (Joe)]

L’ho provato solo in locale, quindi forse è per questo.

Prova a usare

applicationController.set("showFooterNav", true);

invece di

applicationController.showFooterNav = true;

Aggiornerò il post con questa modifica.

[alanost (Alan)]

Funziona perfettamente! Grazie mille

Il mio codice finale:

<script type="text/discourse-plugin" version="0.8">
function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

if (getCookie("app-platform") != "") {
    const applicationController = api.container.lookup("controller:application");
    applicationController.set("showFooterNav", true);
}
</script>