¡Vaya! Por más que lo intento, este archivo que he convertido a PNG aparece como JPEG. Al principio pensé que Preview había hecho una mala conversión, pero luego usé Affinity Photo, que debería ser confiable.
No creo que haya cambiado esa configuración, ya que no tiene la opción de ‘restablecer’ junto a ella.
Cuando subo otra imagen que es PNG, veo que el tipo se mantiene. Hay algo en este archivo que Discourse realmente quiere convertir. ¿Alguna idea?
Te has encontrado con un error conocido (aunque poco común) que fue corregido en el commit anterior. Sin embargo, ese commit aún no está incluido en una versión estable de Discourse.
Configurar temporalmente recompress original jpg quality en 100 debería evitar que se produzca la conversión.
(…y/o podrías intentar reducir la calidad del PNG que estás exportando para que sea inferior al valor del ajuste recompress original jpg quality.)
¡Solo asegúrate de devolver ese ajuste a su valor anterior después de haber subido tu logotipo!
Creo que debería obtener una insignia por tropezar con dos errores de Discourse en una semana. 
Sin embargo, a pesar de haber dado ambos pasos, el archivo sigue siendo convertido a JPEG. Configuré la opción al 100%, guardé mi imagen como JPG con un 92% de calidad y luego la exporté como PNG (¿no pude cambiar la calidad directamente en el PNG?). ¿Alguna otra idea para un solución alternativa, o algo que pueda haber hecho mal?
Después de cambiar a la rama stable, puedo replicar el problema (conocido):
Pero no puedo replicar el problema con la solución propuesta:
Me temo que estoy un poco confundido.
Tampoco aparece en Mozilla Firefox.
¿Hay alguna razón por la que el banner de instalación no aparezca en dispositivos iOS (especialmente ahora que admiten PWA)?
Sí, funciona increíblemente bien en mi Pixelbook Go. Las PWA son esenciales en Chrome OS.
Porque el navegador de iOS no tiene esta función y no tiene planes de añadirla.
Lo que sugerí antes es: ¿por qué no debería haber un botón o enlace en algún lugar del sitio web para instalar la PWA, como se explica en este artículo?
Ya lo tenemos desde hace años:
Lo siento, me refiero a un botón/enlace persistente menos visible, quizás en un menú, para usuarios sin la PWA.
La razón por la que veo esto como útil es que, cuando tenemos un usuario que desea instalar la aplicación, no sabemos en qué estado se encuentra y requiere mucho esfuerzo realizar una Q&A. Sería genial si tuviéramos un proceso infalible de dos pasos que podamos ofrecerles: es decir, ir al menú hamburguesa > Instalar aplicación. Así no tendremos que preocuparnos por su idioma, el número de visitas, si descartaron un banner o desinstalaron la aplicación en el pasado, o qué navegador están usando y cómo presenta la opción de instalación.
Probablemente gran parte de la confusión aquí (incluida la mía) se debe a que hay una opción de instalación de PWA diferente según el navegador:
Android Chrome (es decir, el navegador predeterminado): Supongo que de ahí obtuviste las capturas de pantalla que publicaste. Parece que aquí tienes un “Instalar aplicación” en el menú hamburguesa. Sería genial que estuviera disponible en todos los navegadores, pero parece que por ahora no es posible.
iPhone Safari (navegador predeterminado): No hay ningún botón para instalar desde el menú hamburguesa. Para instalar, debes ir al ícono de compartir (cuadrado con una flecha hacia arriba) y desplazarte hacia abajo hasta “Agregar a la pantalla de inicio”. Supongo, por la discusión aquí, que no es posible agregar el botón al menú hamburguesa. Esto sí guarda la aplicación en la pantalla de inicio, aunque no estoy seguro de si eso por sí solo le otorga la funcionalidad de PWA, como guardar el estado anterior.
Chrome de escritorio: No tengo el botón de instalar en el menú hamburguesa en mi navegador Chrome de Mac. ¿Se supone que debería estar allí? ¿Se podría agregar allí?
Safari de escritorio: Tampoco tengo el botón de instalar en el menú hamburguesa en mi navegador Safari de Mac. ¿Se supone que debería estar allí? ¿Se podría agregar allí?
Sí, lo que dice @JQ331.
La solución de Falco es el menú de Chrome. Con “menú hamburguesa” me refiero al de Discourse, no al del navegador. Dado que algunos usuarios mencionaron arriba que no funciona en Safari o Firefox, esta opción depende del navegador. Asumiendo que se pueda instalar allí, simplemente no se ofrece la opción; parece mejor una opción de menú de Discourse. Además, recuerda al usuario que esta opción existe, cuando es posible que nunca revisen el menú de Chrome.
No puedes agregar botones de instalación en nada que controle Apple, y Apple ha dicho en múltiples ocasiones que no quiere permitir que los desarrolladores creen esos botones.
Para mí sí está:
También aparece en la barra de direcciones en escritorio.
No lo ves en tu sitio web debido a lo del logotipo JPG. PWA es un objetivo en movimiento rápido y los criterios cambian constantemente. Te sugiero usar nuestro canal de lanzamiento predeterminado si deseas la máxima compatibilidad con PWA.
Me refería al menú hamburguesa de Discourse (no al menú del navegador). De hecho, ahora veo que las capturas de pantalla de Android también eran del menú del navegador, no del menú hamburguesa de Discourse.
Sería agradable tener el botón en el menú hamburguesa de Discourse; el usuario lo vería con más frecuencia y sería un poco más claro al instruir a los usuarios sobre cómo instalarlo como una PWA. Probablemente no valga la pena un gran esfuerzo de desarrollo, pero sería un toque útil.
Parece que los navegadores Chromium son los únicos que muestran el mensaje de instalación. Mozilla Firefox y Safari se basan en motores de renderizado diferentes.
Simplemente he añadido el botón creando un componente de tema.
Crea un nuevo componente de tema…
Añade el siguiente código JS, por ejemplo, en el encabezado:
<script>
let deferredPrompt; // Permite mostrar el mensaje de instalación
const installButton = document.getElementById("install_button");
window.addEventListener("beforeinstallprompt", e => {
console.log("beforeinstallprompt disparado");
// Evita que Chrome 76 y versiones anteriores muestren automáticamente un mensaje
e.preventDefault();
// Guarda el evento para poder activarlo más tarde.
deferredPrompt = e;
// Muestra el botón de instalación
installButton.hidden = false;
installButton.addEventListener("click", installApp);
});
function installApp() {
// Muestra el mensaje
deferredPrompt.prompt();
installButton.disabled = true;
// Espera a que el usuario responda al mensaje
deferredPrompt.userChoice.then(choiceResult => {
if (choiceResult.outcome === "accepted") {
console.log("Configuración de PWA aceptada");
installButton.hidden = true;
} else {
console.log("Configuración de PWA rechazada");
}
installButton.disabled = false;
deferredPrompt = null;
});
}
window.addEventListener("appinstalled", evt => {
console.log("appinstalled disparado", evt);
});
</script>
Y coloca el siguiente HTML donde necesites el botón de instalación:
<button id="install_button" hidden>Instalar</button>
Está oculto por defecto y aparecerá si la PWA no está instalada.
Lo he probado en Chrome.
¡Brillante! ¿No considerarías convertirlo en un componente de tema formal? ¿O mejor aún, modificar el componente de tema de enlaces de hamburguesa para incluirlo? ¡Porque ahí es donde yo lo querría!
¿Podrías subir el código modificado para que el botón de instalar la aplicación se muestre en el menú hamburguesa?
No parece que pueda hacer que esto funcione. Reconozco que soy nuevo en todo esto.
Cargué el componente, agregué el js al encabezado, configuré el componente en el tema predeterminado.
Pero luego el script HTML: ¿es posible tener HTML en una publicación? No parece ser así. Si no es así, ¿dónde puedo ponerlo de manera útil?
¡Gracias! Realmente espero que esto pueda ayudarme.
¿Supongo que esto solo funcionará en Android?