Cómo agregar tu app web progresiva a Google Play

1. Te damos la bienvenida

En este lab, tomarás una app web progresiva existente que implementaste y la empaquetarás en una app para distribuirla en Play Store de Google.

Qué aprenderás

• Cómo usar Bubblewrap para empaquetar tu app web progresiva para Play Store de Google
• Qué es una clave de firma y cómo usarla
• Cómo crear una app nueva en Google Play Console para desarrolladores y configurar una versión de prueba para probar tu app antes de publicarla
• Qué son los vínculos de recursos digitales y cómo agregarlos a tu app web

Lo que debe saber

• Qué son las apps web progresivas
• Cómo usar herramientas de línea de comandos
• Comandos básicos de la shell Bash o cómo traducirlos a la shell que prefieras

Requisitos

• Una aplicación web progresiva que se publica en Internet y a la que puedes realizar cambios
• La interfaz de línea de comandos de Bubblewrap instalada y lista para usar
• Una cuenta de desarrollador de Google Play
• Tu clave de firma existente, si ya lanzaste apps en Google Play
• Un dispositivo Android o ChromeOS para realizar pruebas

Qué no se cubrirá

• Restringe tu PWA solo a dispositivos Android o solo a dispositivos ChromeOS
• Implementar una AWP para ChromeOS y una app para Android para dispositivos móviles en la misma app
• Cómo cumplir con la política de pagos de Google Play en tu PWA

2. Cómo proteger tu AWP

Bubblewrap es una herramienta que facilita la conversión de tu app web progresiva en un Android App Bundle con solo ejecutar algunos comandos de la CLI. Para ello, genera un proyecto de Android que inicia tu AWP como una Actividad web de confianza.

Antes de comenzar ¿Qué tipo de información podría necesitar Bubblewrap sobre tu PWA para generar un proyecto de Android?

Para comenzar, crea un directorio para tu proyecto y muévete a él:

$ mkdir my-pwa && cd my-pwa

Luego, ejecuta la herramienta de línea de comandos de Bubblewrap para generar la configuración y el proyecto de Android para el Android App Bundle que subirás a Play:

$ bubblewrap init --manifest=https://my-pwa.com/manifest.json

Importante: Cuando se ejecute Bubblewrap por primera vez, se te pedirá que descargues dependencias adicionales. Esas dependencias son el Java Development Kit y las herramientas de línea de comandos de Android. Para asegurarte de que se descarguen las versiones correctas de cada dependencia, te recomendamos que permitas que Bubblewrap descargue las versiones correctas en lugar de usar una que ya esté disponible en tu computadora.

Aquí, Bubblewrap se inicializa con la ubicación del archivo manifiesto de la app web de una AWP. Esto generará una configuración predeterminada a partir del manifiesto de la app web y, luego, iniciará un asistente en la consola que te permitirá cambiar la configuración predeterminada. Sigue las instrucciones del asistente para cambiar cualquiera de los valores que generó la herramienta.

Clave de firma

La Play Store de Google requiere que los paquetes de aplicación se firmen digitalmente con un certificado cuando se suben, lo que a menudo se conoce como clave de firma. Este es un certificado autofirmado y es diferente del que se usa para entregar tu aplicación a través de HTTPS.

Bubblewrap te pedirá la ruta de acceso a la clave cuando crees la aplicación. Si usas una ficha existente de Play Store para tu aplicación, deberás agregar la ruta de acceso a la misma clave que usa esa ficha.

Si no tienes una clave de firma existente y estás creando una ficha nueva en Play Store, puedes usar el valor predeterminado que proporciona Bubblewrap para que cree una clave nueva para ti:

Importante: Asegúrate de que la llave y las contraseñas estén almacenadas en un lugar seguro. Los necesitarás para compilar la aplicación por primera vez y también para actualizarla en Play Store de forma periódica.

Resultado de Bubblewrap

Después de inicializar tu proyecto de Bubblewrap y completar el asistente, se habrán creado los siguientes elementos:

• twa-manifest.json: Es la configuración del proyecto, que refleja los valores elegidos en el asistente de Bubblewrap. Te recomendamos que hagas un seguimiento de este archivo con tu sistema de control de versiones, ya que se puede usar para regenerar todo el proyecto de Bubblewrap si es necesario.
• Archivos del proyecto de Android: Los archivos restantes del directorio son el proyecto de Android generado. Este proyecto es la fuente que se usa para el comando de compilación de Bubblewrap. También puedes hacer un seguimiento opcional de estos archivos con tu sistema de control de versiones.
• (Opcional) Clave de firma: Si eliges que Bubblewrap cree la clave de firma por ti, la clave se generará en la ubicación que se describe en el asistente. Asegúrate de guardar la clave en un lugar seguro y limita la cantidad de personas que tienen acceso a ella, ya que se usa para demostrar que las apps de Play Store provienen de ti.

Con estos archivos, ahora tenemos todo lo que necesitamos para compilar un paquete de aplicación para Android.

Compila tu Android App Bundle

Desde el mismo directorio en el que ejecutaste el comando de inicialización de Bubblewrap, ejecuta lo siguiente (necesitarás las contraseñas de tu clave de firma):

$ bubblewrap build

El comando de compilación generará dos archivos importantes:

• app-release-bundle.aab: Es el Android App Bundle de tu APW. Este es el archivo que subirás a Google Play Store.
• app-release-signed.apk: Es un formato de empaquetado de Android que se puede usar para instalar la aplicación directamente en un dispositivo de desarrollo con el comando bubblewrap install.

3. Probar: Bubblewrap

Ahora, es tu turno. Con lo que aprendiste en el paso anterior, intenta hacer lo siguiente:

1. Crea un directorio para contener el proyecto de Android generado.
2. Inicializa ese directorio con Bubblewrap y el manifiesto de la app web de tu AWP.
3. Genera una clave de firma nueva o reutiliza las existentes si las tienes.
4. Compila tu Android App Bundle desde el proyecto de Android generado.

4. Cómo agregar tu app a Google Play Store

Ahora que tienes un Android App Bundle para tu PWA, es hora de subirlo a Google Play Store. Una vez que registres tu cuenta de desarrollador, podrás ir a Play Console para acceder y comenzar.

Antes de comenzar: ¿Cuáles son los diferentes tipos de claves de firma que necesitas para crear un lanzamiento en Play?

Crea una app

Una vez que accedas, verás una pantalla que muestra todas tus apps. Cerca de la parte superior, hay un botón, Crear app, que, cuando se hace clic en él, muestra la siguiente pantalla para guiarte en la creación de una nueva ficha de Play Store para Android.

Aquí hay varios campos que debes completar, como el nombre de la app, el idioma predeterminado, si se trata de una app o un juego, si es gratuita o pagada, y varias declaraciones. No podrás crear una app sin aceptar las declaraciones, por lo que es importante que las leas y comprendas antes de aceptarlas.

Si bien tienes la opción de hacer que tu app sea gratuita o pagada, la PWA que empaquetes para incluirla en Play debe estar disponible para Internet en general para que funcione, y no hay forma de detectar de manera confiable que un usuario la esté accediendo desde tu app en lugar de desde su navegador o algún otro método de instalación. Por lo tanto, te recomendamos que monetices tu APW de otra manera que no sea cobrar por descargarla de la tienda.

Una vez que hayas completado toda la información y hagas clic en el botón Crear app en la parte inferior del formulario, se te redireccionará al panel de la nueva app. En el panel, verás listas de tareas que debes completar para configurar, comenzar a probar y lanzar tu app.

Configura las pruebas internas

Las pruebas internas son una excelente manera de lanzar tu app rápidamente sin revisión para un grupo de verificadores de confianza que selecciones. Consulta las tareas en la lista de verificación Comenzar a realizar pruebas ahora y selecciona Seleccionar verificadores.

Si haces clic en esa tarea, se abrirá la página Pruebas internas. Aquí administrarás la configuración de las pruebas de tu app. Para volver a acceder a ella, abre la sección Pruebas en el menú Versión de la barra lateral. Lo primero que debes hacer es crear una lista de direcciones de correo electrónico de los verificadores para probar tu app. Para ello, haz clic en el vínculo Crear lista de direcciones de correo electrónico en la sección Verificadores de la página. Se abrirá una ventana emergente para crear tu lista de correos electrónicos.

En esta ventana emergente, le asignarás un nombre a tu lista de direcciones de correo electrónico y podrás ingresar direcciones de correo electrónico de forma manual o subir un archivo CSV con las direcciones de correo electrónico que deseas usar. Cuando termines, presiona el botón Guardar cambios. Podrás volver a las listas de correo electrónico que ya creaste para agregar o quitar direcciones de correo electrónico según sea necesario. Después de agregar a los verificadores, es hora de crear una versión de prueba. Haz clic en el botón Crear una versión nueva en la parte superior de la página.

Crea una versión de prueba

Después de hacer clic en el botón Crear una versión nueva, se te guiará por varias secciones. En la primera, Integridad de la app, eliges cómo administrar la clave de firma de tu app. La opción predeterminada es permitir que Google administre tu clave de firma, y es la opción recomendada, ya que es segura y permite recuperar tu app en caso de que pierdas la clave de carga.

Firma de apps de Play

Importante: A partir de agosto de 2021, se requiere la firma de apps de Play para que Play Store administre y proteja la firma final de tu aplicación. Con la firma de apps de Play, Google administra y protege la clave de firma de tu app, y la utiliza para firmar tus apps para Android y distribuirlas a los usuarios. La clave que genera Bubblewrap para ti se convierte en tu clave de carga en lugar de tu clave de firma. Si bien Google administra la clave de firma por ti, tú administras y mantienes privada tu clave de carga, que usas cada vez que firmas tu app para subirla a Play Console. Este sistema te permite restablecer la clave de carga si la pierdes o se ve comprometida, para lo cual debes comunicarte con el equipo de asistencia de Play.

Carga y finalización de la app

Después de elegir cómo administrar tu clave de firma, se te pedirá que subas tu paquete de aplicación a la versión. Para ello, arrastra y suelta el archivo app-release-bundle.aab que generó Bubblewrap en el formulario. Para finalizar el lanzamiento, completa los detalles restantes y haz clic en los botones Guardar, Revisar lanzamiento y, por último, Iniciar lanzamiento para pruebas internas para comenzar el lanzamiento. De esta manera, tu app estará disponible para los verificadores internos. En la pestaña Verificadores de la página Pruebas internas, puedes copiar un vínculo para compartirlo con los verificadores y que puedan acceder a tu app.

Si bien las apps de prueba no pasan por el proceso de revisión completo de Play Store, es posible que tarden un tiempo en estar disponibles para su descarga y prueba después de que crees y lances la versión.

5. Pruébalo: Crea una app

Ahora, es tu turno. Con lo que aprendiste en el paso anterior, intenta hacer lo siguiente:

1. Crea una app nueva para tu PWA en Play Console.
2. Configura las pruebas internas para la app y agrégate como verificador.
3. Sube tu paquete de aplicación y crea una versión de prueba para tu app.
4. Instala tu app desde Play Store en tu dispositivo Android o ChromeOS con el vínculo de prueba.

6. Vínculos de recursos digitales

Si ya probaste tu APW en Play, es posible que notes que no se ejecuta en pantalla completa. Esto se debe a que aún no verificaste la propiedad del sitio a través de un archivo de Vínculos de recursos digitales. Si bien Bubblewrap puede configurar y compilar tu paquete de aplicación para Android, debes completar el vínculo actualizando tu aplicación web.

Antes de comenzar: ¿Cómo pueden los Vínculos de recursos digitales demostrar que tú eres el propietario de tu app y tu AWP?

Obtén la huella digital SHA-256 de tu app

Para configurar los vínculos de activos digitales de tu PWA, necesitarás la huella digital SHA-256 del certificado que se usa para firmar el paquete que el usuario recibe en su teléfono.

Con la firma de apps de Play

Si configuraste la Firma de apps con Play para tu app cuando creaste la versión (como se recomendaba anteriormente), puedes encontrar la huella digital SHA-256 en Play Console. Recuerda que este certificado es diferente del que se usa para subir tu aplicación. Para obtener la huella digital, en tu aplicación en Play Console, ve a Versiones -> Configuración -> Integridad de la app. Allí, verás varias opciones en Certificado de clave de firma de apps. Copia el valor de la huella digital del certificado SHA-256.

Sin la firma de apps de Play

Si inhabilitaste la firma de apps de Play, la clave que se usará para firmar la aplicación final será la misma que usas para subir la aplicación a Play Console. Puedes usar keytool de Java para extraer la huella dactilar:

$ keytool -list -v \
    -keystore <keystore-file-path> \
    -alias <key-alias> \
    -keypass <key-password> \
    -storepass <store-password> | grep SHA256

$     SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...

Para usarla, deberás conocer la ruta de acceso a tu clave de firma y las contraseñas correspondientes. Copia los valores hexadecimales de la clave SHA256.

Crea tu archivo de Vínculos de recursos digitales

Bubblewrap puede administrar las huellas digitales de la firma que recuperaste y generar el archivo correcto de Digital Asset Links para ti. Para agregar una huella digital con Bubblewrap, ejecuta el siguiente comando desde el mismo directorio que creaste durante Cómo convertir tu PWA en Bubblewrap y reemplaza <fingerprint> por la huella digital que copiaste en el paso anterior.

$ bubblewrap fingerprint add <fingerprint>

Este comando agregará la huella digital a la lista de huellas digitales de la aplicación y generará un archivo assetlinks.json. Sube este archivo al directorio .well-known en el mismo origen que tu PWA.

assetlinks.json debe colocarse en .well-known, debe llamarse assetlinks.json, debe estar en el mismo origen que tu APW y, por lo tanto, debe ser accesible en mi-apw.origen/.well-known/assetlinks.json. Cualquier desviación de esto impedirá que se encuentre y se vincule correctamente a tu app. Puedes verificar que tu vínculo de recurso digital esté configurado correctamente con la API de Digital Asset Links.

7. Pruébalo: Vínculos de recursos digitales

Ahora, es tu turno. Con lo que aprendiste en el paso anterior, intenta hacer lo siguiente:

1. Busca la huella digital SHA-256 de tu app.
2. Genera un archivo de Vínculos de recursos digitales para tu app.
3. Sube tu archivo de Vínculos de recursos digitales a tu PWA.
4. Verifica que tu archivo de Vínculos de recursos digitales esté configurado correctamente con la API y tu app de prueba.

8. Ponga a prueba su conocimiento

Antes de terminar, responde las siguientes preguntas para poner a prueba tus conocimientos y ver qué aprendiste. ¡No mires las respuestas!

Después de generar su proyecto para Android con Bubblewrap, Sally confirma el archivo ______ generado en su sistema de control de versiones para poder volver a compilarlo cuando lo necesite.

twa-manifest.json signing key app-release-bundle.aab build.gradle

Jack quiere que su equipo de QA pruebe su app para Android de PWA. Por lo tanto, ______ su Android App Bundle en un segmento de pruebas internas.

cargas compilaciones y cargas versiones firmas y cargas

La app para Android de la PWA de Oogie Boogie no se ejecuta en pantalla completa. Para solucionar ese problema, obtienen la huella digital del certificado SHA-256 para su ______ y la suben a su archivo de Vínculos de recursos digitales ubicado en ______ en el mismo origen que su APW.

Llave de carga, /.well-known/assetlinks.json Llave de carga, /assetlinks.json Llave de firma, /.well-known/assetlinks.json Llave de firma, /assetlinks.json

9. Pon a prueba tus conocimientos: respuestas

Respuestas a las preguntas de la sección Pon a prueba tus conocimientos

1. Después de generar su proyecto para Android con Bubblewrap, Sally confirma el archivo ______ generado en su sistema de control de versiones para poder volver a compilarlo cuando lo necesite.
   • Respuesta: twa-manifest.json
   • Sección: Cómo proteger tu AWP con Bubblewrap
2. Jack quiere que su equipo de QA pruebe su app para Android de PWA. Por lo tanto, ______ su Android App Bundle en un segmento de pruebas internas.
   • Respuesta: Señales y cargas
   • Sección: Cómo agregar tu app a Google Play Store
3. La app para Android de la PWA de Oogie Boogie no se ejecuta en pantalla completa. Para solucionar ese problema, obtienen la huella digital del certificado SHA-256 para su ______ y la suben a su archivo de Vínculos de recursos digitales ubicado en ______ en el mismo origen que su APW.
   • Respuesta: Clave de firma, /.well-known/assetlinks.json
   • Sección: Vínculos de recursos digitales

10. ¡Felicitaciones!

¡Felicitaciones! Aprendiste a agregar tu PWA a Google Play Store.

Cuando te sientas listo para hacerlo, prueba estos pasos por tu cuenta:

• Crea una versión de producción de la app
• Profundiza en más opciones para lanzar tu app, incluidos los lanzamientos solo para ChromeOS y los lanzamientos que incluyen una app para Android para dispositivos móviles y una PWA para ChromeOS.
• Obtén información para configurar Play Billing para tu app y, luego, implementarlo en tu APW y en tu backend.

¡Feliz codificación!