Forzar barra de pie con cookie

Contribuir Característica
1

Hola,

Estoy en proceso de crear una aplicación para mi foro en dispositivos iOS. Afortunadamente, existe un proyecto llamado PWABuilder que proporciona un proyecto de XCode listo para usar y empaquetar una aplicación web en una app. Esto también ha funcionado muy bien con mi foro de Discourse; sin embargo, no hay un botón de retroceso ni nada similar que facilite la navegación.

App de iOS generada con PWABuilder (sin pie de página de navegación):

IMG_3321.PNG
IMG_3321.PNG750×1334 89.4 KB

Sin embargo, en la PWA de iOS hay una barra de pie de página con un botón de retroceso. Aún no he encontrado una forma de mostrar esto fuera de la PWA de iOS.

La PWA de iOS tiene un pie de página de navegación, pero no se puede forzar su visualización fuera de ella (no encontré una forma fácil):

IMG_3322.PNG
IMG_3322.PNG750×1334 44.5 KB

Ahora mi pregunta es: ¿Podría este pie de página mostrarse también dentro de un WKWebView? También tengo una idea sobre cómo resolverlo. Las aplicaciones generadas con PWABuilder tienen la funcionalidad de establecer una cookie cuando se utilizan. ¿Qué tal si mostramos este pie de página de navegación siempre que el usuario tenga una cookie como “mobile_footer_nav”? De esta manera, el problema estaría resuelto.

Configuraciones que se pueden establecer dentro de una aplicación generada con PWABuilder (cookie al usar la app):

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

Estaría muy agradecido si el equipo de desarrollo pudiera echar un vistazo a esto.

(Sé que existe la aplicación DiscourseHub, pero una aplicación independiente para un foro es la opción más elegante y más fácil de usar y entender para el usuario.)

1 me gusta
2

Discourse renderiza ese pie de página basándose en ciertas condiciones. El pie de página se agrega aquí.

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

showFooterNav se define aquí.

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

Si cualquiera de esas condiciones es verdadera, la navegación se mostrará.

isiOSPWA() y isAppWebview() se definen aquí

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

Por ejemplo, isAppWebview() se ve así.

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

Puedes crear una condición adicional en tu tema, en tu sitio de Discourse, para verificar la cookie, de la siguiente manera:

const isWKWebView = () => {
  // verifica la cookie y devuelve true si existe
  // o utiliza cualquier otro método para detectar si el usuario está usando tu aplicación
}

Para otras clases, normalmente podrías modificar showFooterNav() de la siguiente manera:

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

Sin embargo, este es el controlador de la aplicación, lo que significa que se almacenará en caché antes de que tu código tenga la oportunidad de ejecutarse. En otras palabras, no podrás modificar la clase.

Dicho esto, aún puedes cambiar el valor de showFooterNav con algo como esto:

<script type="text/discourse-plugin" version="0.8">
  const isWKWebView = () => {
    // verifica y devuelve tu condición
  };

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

en la pestaña de encabezado de tu tema o en un inicializador si estás utilizando un tema remoto.

5 Me gusta
Desktop PWA Navigation
3

Muchas gracias por la ayuda rápida. Lamentablemente, obtengo un error.

Escribí estas líneas de código en el encabezado del tema y también añadí la capacidad de verificación de cookies en isWKWebView(). Si no tengo la cookie, no ocurre nada. Esto funciona por ahora. Pero si tengo la cookie, esta barra no se muestra y aparece un error en la consola: “TypeError: Se intentó asignar a una propiedad de solo lectura”.

1 me gusta
4

Solo lo probé localmente, así que quizás sea por eso.

Intenta usar

applicationController.set("showFooterNav", true);

en lugar de

applicationController.showFooterNav = true;

Editaré la publicación con ese cambio.

2 Me gusta
5

¡Funciona perfectamente! Muchas gracias :slight_smile:

Mi 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>
2 Me gusta