Forcer le pied de page-nav avec cookie

Contribuer Fonctionnalité
1

Bonjour,
Je suis en train de créer une application pour mon forum sur les appareils iOS. Heureusement, il existe un projet appelé PWABuilder qui fournit un projet XCode prêt à l’emploi pour encapsuler une application web en une application native. Cela a très bien fonctionné avec mon forum Discourse, mais il n’y a pas de bouton retour ni d’élément similaire facilitant la navigation.

Application iOS générée avec PWABuilder (sans barre de navigation en bas) :

IMG_3321.PNG
IMG_3321.PNG750×1334 89.4 KB

Il existe cependant une barre de navigation en bas dans la PWA iOS, avec un bouton retour. Je n’ai pas encore trouvé de moyen d’afficher cette barre en dehors de la PWA iOS.

La PWA iOS possède une barre de navigation en bas, mais il n’est pas possible de l’afficher en dehors de celle-ci (je n’ai pas trouvé de solution simple) :

IMG_3322.PNG
IMG_3322.PNG750×1334 44.5 KB

Ma question est donc la suivante : cette barre de navigation pourrait-elle également être affichée à l’intérieur d’un WKWebView ? J’ai également une idée pour résoudre ce problème. Les applications générées avec PWABuilder permettent de définir un cookie lors de leur utilisation. Et si l’on affichait cette barre de navigation chaque fois que l’utilisateur possède un cookie nommé « mobile_footer_nav » ? Le problème serait alors résolu.

Paramètres configurables dans une application générée avec PWABuilder (cookie activé lors de l’utilisation de l’application) :

Bildschirmfoto 2021-10-31 um 02.11.34
Bildschirmfoto 2021-10-31 um 02.11.341366×703 176 KB

Je serais très heureux que l’équipe de développement puisse examiner cette proposition.

(Je sais qu’il existe l’application DiscourseHub, mais une application dédiée pour un forum est une option plus élégante et plus facile à utiliser et à comprendre pour les utilisateurs.)

1 « J'aime »
2

Discourse rend ce pied de page en fonction de certaines conditions. Le pied de page est ajouté ici.

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

showFooterNav est défini ici.

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

Si l’une ou l’autre de ces conditions est vraie, la barre de navigation sera affichée.

isiOSPWA() et isAppWebview() sont définis ici

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

Par exemple, isAppWebview() ressemble à ceci.

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

Vous pouvez créer une condition supplémentaire dans votre thème — sur votre site Discourse — pour vérifier le cookie, comme ceci :

const isWKWebView = () => {
  // vérifier la présence du cookie et retourner true s'il existe
  // ou utiliser toute autre méthode pour détecter si l'utilisateur utilise votre application
}

Pour d’autres classes, vous seriez normalement en mesure de modifier showFooterNav() comme suit :

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

Cependant, il s’agit du contrôleur de l’application, ce qui signifie qu’il sera mis en cache avant que votre code n’ait la possibilité de s’exécuter. En d’autres termes, vous ne pourrez pas modifier la classe.

Cela dit, vous pouvez toujours modifier la valeur de showFooterNav avec quelque chose comme ceci :

<script type="text/discourse-plugin" version="0.8">
  const isWKWebView = () => {
    // vérifier et retourner votre condition
  };

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

dans l’onglet en-tête de votre thème ou dans un initialiseur si vous utilisez un thème distant.

5 « J'aime »
Desktop PWA Navigation
3

Merci beaucoup pour votre aide rapide. Malheureusement, je rencontre une erreur.

J’ai écrit ces lignes de code dans l’en-tête du thème et j’ai également ajouté la vérification des cookies dans la fonction isWKWebView(). Si je n’ai pas le cookie, rien ne se produit. Cela fonctionne pour l’instant. Mais si j’ai le cookie, cette barre n’est malheureusement pas affichée et une erreur apparaît dans la console : « TypeError: Tentative d’assignation à une propriété en lecture seule. »

1 « J'aime »
4

Je l’ai seulement testé localement, c’est peut-être pour ça.

Essaie d’utiliser

applicationController.set("showFooterNav", true);

au lieu de

applicationController.showFooterNav = true;

Je vais modifier le post avec ce changement.

2 « J'aime »
5

Ça fonctionne parfaitement ! Merci beaucoup :slight_smile:

Mon code final :

<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>
2 « J'aime »