Añadir a la Pantalla de Inicio (iOS, iPadOS)

|||
|-|-|-|
| :discourse2: | Resumen | Añadir a la pantalla de inicio (iOS, iPadOS) añade una ventana emergente para los usuarios de dispositivos iOS. Esta ventana emergente se puede descartar y no aparecerá si estás viendo un foro de Discourse a través de PWA.
| :hammer_and_wrench:|Repositorio| GitHub - discourse/discourse-apple-add-to-homescreen |
| :open_book:|¿Nuevo en los temas de Discourse?| Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Características

Este componente añade una ventana emergente para los usuarios de dispositivos iOS. Esta ventana emergente se puede descartar y no aparecerá si estás viendo un foro de Discourse a través de PWA.

iPhone

iPad

Ajustes

Nombre Descripción
temporizador emergente ¿Cuánto tiempo debe esperar la ventana emergente antes de aparecer? (en milisegundos)
Traducción Por defecto
pwa_text Instala \u003cb\u003e%{siteTitle}\u003c/b\u003e en tu dispositivo iOS. Toca compartir y luego \u003cb\u003eAñadir a la pantalla de inicio.\u003c/b\u003e

Este tema incluye dos ajustes, uno para el texto que se muestra y otro para un temporizador que decide cuánto tiempo esperar hasta que aparezca la ventana emergente. Estos ajustes vienen con sus valores por defecto.

Esta ventana emergente solo aparecerá para los usuarios de iOS en un iPhone o iPad que no estén usando PWA para ver un foro de Discourse. No volverá a aparecer si un usuario hace clic en el icono x.

Edición del texto mostrado

Necesitas tomar nota al editar esta área:

Si quieres editar este texto, y quieres que siteTitle permanezca aquí, asegúrate de mantener %{siteTitle} en este texto donde te parezca adecuado.


:discourse2: ¿Alojado por nosotros? Los componentes de tema están disponibles para su uso en nuestros planes Estándar, Business y Enterprise.

27 Me gusta

¡Fantástica idea! ¡Gracias! El problema siempre ha sido y será la descubribilidad con esta función.

8 Me gusta

En el núcleo para Android usamos una verificación de nivel de confianza >= 1 para mostrar la ventana emergente, lo que actúa como un temporizador pero es mejor en mi opinión:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/pwa-install-banner.js#L41-L46

Me pregunto si este componente debería usar lo mismo :thinking:

Además, ¡me encantaría fusionar los banners de instalación de PWA de Android e iOS en un solo componente en el núcleo!

12 Me gusta

Sugiero que el texto predeterminado mencione las notificaciones push y evite mencionar “dispositivo”.

Quizás algo como:

“¡Añade %{siteTitle} a tu pantalla de inicio para registrarte en las notificaciones push! Toca compartir y luego Añadir a pantalla de inicio.”

Sería especialmente útil si el equipo de Discourse realizara algunas pruebas A/B sobre esto, para encontrar el lenguaje más probable para que los usuarios se registren en notificaciones push.

Aquí hay algunas preguntas que tengo:

  • ¿Es mejor decir “Añadir” o “Instalar”?
  • ¿Es mejor mencionar las notificaciones push aquí o retrasar su mención?
  • Si mencionamos la instalación, ¿deberíamos decir que se está instalando una “aplicación”? ¿Una “aplicación web”?
  • El iPad tiene más espacio. ¿Es mejor usar más palabras?
6 Me gusta

En el iPad, este banner no es muy bueno. El banner aparece en la parte inferior de la pantalla, pero el botón de compartir está en la parte superior. Veo que hay una pequeña flecha hacia arriba :up_arrow:, como para indicar “oye, el botón está en la cabecera”, pero dudo que eso sea suficiente. (¿Han realizado pruebas de usuario sobre esto? ¿Han visto que funcione para usuarios de iPad no expertos?)

Tampoco ayuda que le pidamos al usuario que “toque compartir”, pero el botón no se llama visiblemente “compartir”. Es un pequeño cuadro con una flecha.

image

Hace años, solía usar \u003chttps://github.com/cubiq/add-to-homescreen\u003e que mostraba un pop-up como este:

Me encantaría que Discourse hiciera algo más parecido a esto.

Ahora, el flyout es un poco frágil (¿y si el botón se mueve?), pero creo que también está bien si el botón no está exactamente donde apunta el flyout, siempre y cuando esté más o menos en el lugar correcto.

Históricamente, también era peligroso que el botón pudiera verse diferente de una versión de iOS a otra. Pero el botón de compartir no ha cambiado de forma desde iOS 7, y no hay ninguna razón particular para pensar que cambiará en iOS 17, así que creo que un enfoque como este funcionaría en el iPad, con un pequeño flyout apuntando hacia dónde probablemente está el botón de Compartir en la barra de cabecera.

3 Me gusta

Esta es una buena observación, Dan.

Podría ver el beneficio de mostrar este flyout en la parte superior de la página cuando se usa un iPad.

Para ser sincero, la razón por la que no incluimos ese ícono en esta versión del componente es que este ícono solo está disponible en Font-Awesome 6, y Discourse no admite esa versión todavía.

2 Me gusta

Este tipo de deseo es exactamente por lo que configuré este texto para que sea editable por un administrador. Cada persona puede tener una opinión diferente sobre lo que debe decir este popup, así que siéntete libre de editarlo a tu gusto.

1 me gusta

No creo que tenga la capacidad de hacer pruebas A/B en mi foro. ¿Es algo que ustedes podrían probar A/B?

¿Le informa al usuario por qué querría hacer eso?

1 me gusta

No estoy seguro de entender tu pregunta. Me atrevería a decir que si ya están en el foro, la razón para instalarlo en su dispositivo iOS sería evidente por sí misma.

Mi punto es que los usuarios de Apple solo están familiarizados con la instalación de aplicaciones a través de la App Store. Muy pocos entenderán qué es una PWA. Aún menos conocerán el beneficio potencial de la instalación.

Poner las notificaciones del navegador detrás de A2HS es una gran jugada por parte de Apple. Resuelve por completo los primeros problemas con las notificaciones en el escritorio.

¿Cómo hacemos saber a los usuarios lo que ganan más allá de otro icono en su pantalla de inicio?

3 Me gusta

Estoy completamente (pero espero que cortésmente) en desacuerdo. Dirijo un foro de Discourse y lo tengo a él y a otros añadidos a la pantalla de inicio. Solo pensé en hacerlo después de discusiones aquí, y no he visto ningún beneficio (las notificaciones no funcionan), así que he seguido usando la aplicación Hub.

2 Me gusta

Creo que ambos podríamos estar haciendo suposiciones sin recopilar comentarios de los administradores que lo han instalado.

Dicho esto, el texto es 100% personalizable, por lo que si un administrador siente la necesidad de aclarar más, puede hacerlo con bastante facilidad.

Mis comentarios han sido específicamente de clientes, después de mencionar que la PWA era un paso necesario para habilitar las notificaciones.

Variará entre las comunidades, pero en la era de ‘preguntar a la aplicación que no rastree’, los usuarios no son tan propensos a seguir ciegamente las instrucciones sin algún beneficio percibido. Decirle a un usuario cómo instalar la PWA sin explicar por qué definitivamente entierra la noticia principal.

Tuve este problema con un par de mis instancias autohospedadas y modificar la push notification time window mins a 0 lo solucionó para mí y para la mayoría de mis usuarios. Como efecto secundario, también hace que el comportamiento se acerque más a cómo funcionan las notificaciones de la aplicación Hub en cuanto a tiempo.

3 Me gusta

Tuve que añadir este plugin manualmente.

Tenía un repositorio vacío al hacer clic con el instalador.

Disculpa por eso, debería estar arreglado ahora.

1 me gusta

¡Buen componente! Me gusta cómo está implementado cerca de donde están los botones para compartir. Estoy de acuerdo en que deberíamos integrar esto en el núcleo y en el banner de Android.

Tengo una maqueta antigua sin implementar de hace un tiempo que podría abordar algunas ideas mencionadas aquí:

La idea con el texto aquí :point_up: era tener una especie de “qué gano yo” claro, y mostrar literalmente el logo del sitio de una manera similar a una aplicación para aclarar un poco de qué se trata todo esto.

Eso se diseñó para Android, lo que facilita las cosas porque puedes incluir un botón que añade directamente la PWA a tu dispositivo.

Desafortunadamente, iOS todavía requiere que pases por su hoja para compartir para llegar a esta acción… pero creo que podemos tener un botón que active las opciones para compartir. (ya hacemos esto al hacer clic en el ícono para compartir en las publicaciones en iOS…)

4 Me gusta

No en iOS. Puedes abrir una hoja para compartir con navigator.share(), pero no tiene el botón “Añadir a pantalla de inicio”. Para A2HS, el usuario tiene que hacer clic manualmente en el pequeño botón para compartir; de ahí la necesidad de algo como esto.

1 me gusta

Resulta que todavía estaba en una versión antigua de iOS (pre-16.4): Live notifications: "Notifications are not supported on this browser. Sorry."