Forçar footer-nav com cookie

[alanost (Alan)]

Olá,

Estou no processo de criar um aplicativo para o meu fórum em dispositivos iOS. Felizmente, existe um projeto chamado PWABuilder que fornece um projeto XCode pronto para empacotar um webapp em um aplicativo. Isso também funcionou muito bem com meu fórum Discourse, no entanto, não há um botão de voltar ou algo similar que facilitaria a navegação.

App iOS gerado com o PWABuilder (sem rodapé de navegação):

Há uma barra de rodapé no PWA do iOS, onde existe um botão de voltar. Ainda não encontrei uma maneira de exibir isso fora do PWA do iOS.

O PWA do iOS tem rodapé de navegação, mas não é possível forçar sua exibição externa (não encontrei uma maneira fácil):

Agora, minha pergunta é: esse rodapé também poderia ser exibido dentro de um WKWebView? Também tenho uma ideia de como resolver isso. Aplicativos gerados com o PWABuilder possuem a funcionalidade de definir um cookie quando usados. Que tal exibir esse rodapé de navegação sempre que o usuário tiver um cookie como “mobile_footer_nav”? Assim, o problema estaria resolvido.

Configurações que podem ser definidas dentro de um aplicativo gerado com o PWABuilder (cookie ao usar o app):

Ficaria muito feliz se a equipe de desenvolvimento pudesse dar uma olhada nisso.

(Eu sei que existe o aplicativo DiscourseHub, mas um aplicativo separado para um fórum é a opção mais elegante e mais fácil para o usuário usar e entender.)

[Johani (Joe)]

O Discourse renderiza esse rodapé com base em algumas condições. O rodapé é adicionado aqui.

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

showFooterNav é definido aqui.

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

Se qualquer uma dessas condições for verdadeira, a navegação será exibida.

isiOSPWA() e isAppWebview() são definidos aqui

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

Por exemplo, isAppWebview() se parece com isto.

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

Você pode criar uma condição adicional no seu tema — no seu site Discourse — para verificar o cookie, assim:

const isWKWebView = () => {
  // verifique o cookie e retorne true se ele existir
  // ou use qualquer outro método para detectar se o usuário está usando seu aplicativo
}

Para outras Classes, normalmente você seria capaz de modificar o showFooterNav() assim:

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

No entanto, este é o controlador da aplicação, o que significa que ele será cacheado antes que seu código tenha a chance de ser executado. Em outras palavras, você não conseguirá modificar a Classe.

Dito isso, você ainda pode alterar o valor de showFooterNav com algo assim:

<script type="text/discourse-plugin" version="0.8">
  const isWKWebView = () => {
    // verifique e retorne sua condição
  };

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

na aba de cabeçalho do seu tema ou em um inicializador se estiver usando um tema remoto.

[alanost (Alan)]

Muito obrigado pela ajuda rápida. Infelizmente, estou recebendo um erro.

@Johani

<script type="text/discourse-plugin" version="0.8">
  const isWKWebView = () => {
    // verifique e retorne sua condição
  };

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

Escrevi essas linhas de código no cabeçalho do tema e também adicionei a verificação de cookies na função isWKWebView(). Se não houver cookie, nada acontece. Isso funciona por enquanto. Mas, se houver o cookie, essa barra não é exibida e um erro aparece no console: “TypeError: Tentativa de atribuição a propriedade somente leitura.”

[Johani (Joe)]

Eu só testei isso localmente, então talvez seja por isso.

Tente usar

applicationController.set("showFooterNav", true);

em vez de

applicationController.showFooterNav = true;

Vou editar o post com essa alteração.

[alanost (Alan)]

Funciona perfeitamente! Muito obrigado

Meu código 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>