Cómo publicar una PWA en App Store y Google Play

Una aplicación web progresiva (PWA) es un sitio web que se puede instalar desde el navegador. Esto es útil, pero la mayoría de los clientes todavía buscan aplicaciones en App Store y Google Play. Si su PWA ya funciona bien en un teléfono, puede empaquetarlo para ambas tiendas sin tener que volver a escribirlo.

El problema es que las dos tiendas tratan las aplicaciones basadas en web de manera muy diferente. Google tiene una ruta oficial para las PWA. Apple no lo hace y su equipo de revisión espera más que un sitio web reempaquetado. Esta guía cubre las opciones realistas, las reglas importantes y una lista de verificación para obtener una PWA mediante revisión.

¿Por qué publicar una PWA en las tiendas de aplicaciones?

Una PWA ya ofrece a los usuarios un mensaje de instalación, un ícono en la pantalla de inicio y una experiencia de pantalla completa. Los listados de tiendas agregan cosas que la instalación de un navegador no puede:

• Discovery. La gente busca en las tiendas productos como el suyo y una lista le proporciona una página que se clasifica allí.
• Trust. Una ficha de Play Store con reseñas y un editor verificado es una señal más fuerte que "Agregar a la pantalla de inicio" en un sitio web.
• Instalación confiable. En iPhone, la instalación de una PWA desde el navegador está oculta en el menú para compartir. La instalación de una tienda es un toque.
• Canales nativos. Una aplicación empaquetada puede utilizar notificaciones automáticas y enlaces profundos a través de la plataforma en lugar de depender de lo que expone el navegador.

Nada de esto significa que debas abandonar la PWA. El sitio web sigue siendo el producto; las aplicaciones de la tienda son otra forma de llegar a él. Para conocer las ventajas y desventajas entre una PWA, una aplicación WebView y una compilación totalmente nativa, lea PWA frente a nativo frente a WebView.

Opción 1: Actividad web confiable para Google Play

Google Play admite PWA a través de un Actividad web confiable (TWA). Una TWA es una aplicación de Android que abre su PWA en pantalla completa utilizando el navegador Chrome instalado por el usuario, en lugar de un WebView integrado. Según la documentación de Chrome, la aplicación y el sitio web se verifican entre sí con Digital Asset Links, lo que demuestra que ambos provienen del mismo desarrollador.

Herramientas como plástico de burbujas (una herramienta de línea de comandos) y PWAConstructor genere y construya el proyecto de Android para usted. Los pasos habituales son:

1. Asegúrese de que su PWA tenga un manifiesto de aplicación web válido, una URL de inicio accesible a través de HTTPS e íconos.
2. Genera el proyecto de Android con Bubblewrap o PWABuilder.
3. Publique un archivo de enlaces de activos digitales en su dominio para que se pueda verificar la aplicación.
4. Cree un paquete de aplicaciones de Android firmado y cárguelo en Google Play Console.

Cosas que debes saber antes de elegir esta ruta:

• La experiencia depende de que Chrome esté instalado y actualizado en el dispositivo. Si la verificación falla o Chrome no está disponible, los usuarios pueden ver una barra de herramientas del navegador.
• La aplicación de host no puede leer su contenido web, cookies o almacenamiento local directamente. La comunicación con código nativo es limitada.
• Aún necesita una cuenta de Play Console, una ficha de Play Store, una política de privacidad y los requisitos de prueba que Google aplica a las nuevas cuentas personales. Nuestro guía editorial los analiza, incluida la regla de prueba cerrada.

Un TWA es una buena opción si se siente cómodo con las herramientas de línea de comandos y solo necesita Android.

Opción 2: contenedor de bricolaje para iOS

Apple no tiene un equivalente TWA. Para colocar una PWA en la App Store, necesita una aplicación iOS nativa que la cargue, generalmente a través de WKWebView. La versión de bricolaje se ve así:

1. Crea un proyecto Xcode en una Mac.
2. Cargue su PWA en una vista web y agregue íconos, una pantalla de inicio y navegación.
3. Inscríbase en el Programa para desarrolladores de Apple y registre un ID de paquete.
4. Firme, archive y cargue la compilación en App Store Connect a través de la cadena de herramientas de Apple.
5. Pruebe con TestFlight, complete la lista y las respuestas de privacidad, y envíelas para su revisión.

PWABuilder puede generar un proyecto de iOS como punto de partida, pero aún así lo abres y lo firmas tú mismo, lo que requiere una Mac y Xcode. Cubrimos ese proceso con más profundidad en cómo convertir un sitio web a una aplicación de iOS sin Xcode o una Mac.

El problema más importante no es técnico. Lo que trataremos a continuación es si la aplicación será aceptada.

Lo que Apple espera de un contenedor PWA

Las Directrices de revisión de aplicaciones de Apple dicen que una aplicación "debe incluir funciones, contenido y una interfaz de usuario que la eleven más allá de un sitio web reempaquetado" (directriz 4.2). Una PWA cargada en una vista web simple es exactamente el tipo de envío al que se dirigen las pautas.

Otros puntos que vale la pena conocer:

• Directriz 4.2.2 dice que, aparte de los catálogos, las aplicaciones no deberían ser principalmente materiales de marketing, recortes web, agregadores de contenido o una colección de enlaces.
• Directriz 2.1 espera una compilación final y funcional y credenciales de demostración si su aplicación tiene un inicio de sesión.
• Directriz 4.2.6 dice que las aplicaciones creadas a partir de una plantilla comercializada o un servicio de generación de aplicaciones se rechazan a menos que sean enviadas directamente por el proveedor del contenido de la aplicación. Publique con su propia cuenta de desarrollador, no con la de un proveedor.

No existe una fórmula que garantice la aprobación y ninguna herramienta puede prometerla. Lo que puede hacer es darles a los revisores una razón para ver una aplicación real: navegación nativa, notificaciones automáticas a las que los usuarios optan, enlaces profundos funcionales y una experiencia de carga y fuera de línea pulida. Para obtener un tutorial completo de las reglas de revisión, consulte Directriz 4.2 de Apple: ¿Apple rechazará una aplicación de sitio web?.

Opción 3: usar un convertidor para ambas tiendas

Un convertidor como SiteTo.App realiza el empaquetado para ambas plataformas desde su URL. Usted ingresa la dirección de su sitio web, configura el nombre de la aplicación, el ícono, los colores, la pantalla de presentación y la navegación, obtiene una vista previa en su teléfono y solicita una compilación.

Según cómo funciona el producto hoy:

• Las compilaciones de Android se pueden producir como APK o AAB.
• Las compilaciones de iOS se firman con su cuenta de desarrollador de Apple y se entregan a TestFlight en su cuenta de App Store Connect, y usted las toma desde allí para enviarlas para su revisión.
• Las notificaciones push se configuran a través de Firebase.
• El sitio web sigue siendo la fuente de la verdad, por lo que los cambios que envía en la web llegan a los usuarios de la aplicación sin un nuevo lanzamiento en la tienda.
• El precio es de $29 por única vez para Android, $79 para iOS o $99 para ambos. Las tarifas de las cuentas de desarrollador de Apple y Google son independientes.

SiteTo.App trata su PWA como un sitio web: carga su URL pública dentro de la aplicación. El comportamiento de las funciones específicas de PWA, como el almacenamiento en caché del trabajador de servicio, las páginas fuera de línea o el mensaje de instalación web dentro del shell de la aplicación, depende de la vista web que utiliza la aplicación, así que pruébelas en la vista previa en lugar de asumirlas. Las notificaciones push en la aplicación se configuran a través de Firebase en lugar de a través del web push de tu PWA.

Puedes comparar convertidores en nuestro la mejor guía de conversión de sitios web a aplicaciones, y ver el lado del costo en ¿Cuánto cuesta convertir un sitio web en una aplicación?. Si su sitio se ejecuta en una plataforma específica, el paginas de la plataforma explique qué verificar para esa pila.

¿Qué ruta deberías tomar?

• Solo Android, cómodo con la línea de comando: un TWA a través de Bubblewrap o PWABuilder es un buen camino oficial.
• iOS y tienes una Mac y un desarrollador que se siente cómodo con Xcode: un contenedor de bricolaje brinda control total, pero usted es dueño de cada reconstrucción y de las actualizaciones del SDK.
• Ambas tiendas, sin poseer proyectos nativos: un convertidor es el menor esfuerzo y usted mantiene el sitio web como producto.
• Una PWA que depende en gran medida del comportamiento sin conexión o de la sincronización en segundo plano: Pruebe cuidadosamente antes de comprometerse, sea cual sea la ruta que elija.

Prepare su PWA antes de empaquetarla

Una ficha de Play Store expone las debilidades que oculta una pestaña del navegador. Antes de empaquetar:

• Verifique que todas las pantallas respondan y se puedan usar con el tacto y el gesto de retroceso del sistema.
• Asegúrese de que el inicio de sesión, el pago y la carga de archivos funcionen en una vista integrada, incluida cualquier autenticación de terceros que abra una ventana emergente o redireccionamiento.
• Agregue una página de política de privacidad y una página de soporte a las que se pueda acceder sin iniciar sesión.
• Decide qué enlaces externos se abren en la aplicación y cuáles abren el navegador.
• Maneje los estados de error y sin conexión con un mensaje claro en lugar de una pantalla en blanco.
• Elimine cualquier mensaje que solicite a los usuarios que "instalen esta aplicación", ya que ya lo hicieron.

El lista de verificación de preparación y planificador de costos puede ayudarle a detectar huecos antes de construir.

Listado de tiendas y lista de verificación de reseñas

• Las cuentas de desarrollador son propiedad de su empresa, no de un contratista.
• El nombre, el ícono y las capturas de pantalla de la aplicación muestran la aplicación real y coinciden con la compilación.
• La política de privacidad y las respuestas de privacidad de la tienda cubren el sitio web, los análisis y las herramientas de pago cargadas en la aplicación.
• Las credenciales de revisor funcionan y se incluyen en las notas de revisión.
• La aplicación agrega valor nativo más allá del sitio web, como navegación, notificaciones o enlaces profundos.
• Ambas compilaciones se probaron en dispositivos reales en una instalación nueva.
• Se asigna a alguien para observar, revisar los mensajes y responder con detalles.

Preguntas frecuentes

¿Puedo publicar una PWA en la App Store sin un contenedor nativo?

No. La App Store solo distribuye archivos binarios de aplicaciones nativas. Una PWA debe estar empaquetada dentro de una y la aplicación empaquetada debe cumplir con las pautas de Apple.

¿Se permite una PWA en Google Play?

Sí. Google admite PWA a través de actividades web confiables y también puede publicar una aplicación contenedora.

¿Mi PWA seguirá funcionando sin conexión dentro de la aplicación?

Depende de la ruta y de la vista web. Pruebe el comportamiento sin conexión en la vista previa o en una versión de prueba en lugar de asumir que se mantiene.

¿Necesito una Mac?

Para una versión DIY de iOS, sí. Un convertidor crea la aplicación por usted, aunque aún necesita una cuenta de desarrollador de Apple para App Store Connect.

¿La publicación garantiza la aprobación?

No. Apple y Google deciden sobre cada envío. Una mejor lista y una experiencia más parecida a una aplicación mejoran sus probabilidades, pero no pueden garantizar el resultado.

Próximos pasos

Si su PWA está lista, previsualízalo como una aplicación con SiteTo.App y pruébalo en tu propio teléfono antes de decidir una ruta. Una vez que esté satisfecho, revise precios y sigue el crear y publicar guía.