Cómo agregar tu app web progresiva a Google Play

1. Bienvenida

En este lab, tomará una aplicación web progresiva que haya implementado y la incluirá en una aplicación para distribuirla en Google Play Store.

Qué aprenderás

• Cómo usar Bubblewrap para empaquetar tu app web progresiva en Google Play Store
• Qué es una clave de firma y cómo se utiliza
• Cómo crear una nueva app en la Consola para desarrolladores de Google Play y configurar una versión de prueba para probarla antes de su publicación
• Qué son los Vínculos de recursos digitales y cómo agregarlos a tu aplicación web

Lo que debe saber

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

Requisitos

• Una aplicación web progresiva que se publica en vivo en Internet y que puedes modificar
• La interfaz de líneas de comandos de Bubblewrap instalada y lista para usar.
• Una cuenta de desarrollador de Google Play
• Tu clave de firma existente, si ya tienes apps lanzadas en Google Play
• Un dispositivo Android o con Sistema operativo Chrome para realizar pruebas

Temas no abarcados

• Restringir tu AWP a dispositivos Android o con Chrome OS únicamente
• La implementación de una AWP a Chrome OS y a una aplicación para Android en dispositivos móviles con la misma aplicación
• Cómo satisfacer la Política de Pagos de Google Play en tu AWP

2. Cómo lograr tu AWP en un cuadro

Bubblewrap es una herramienta que te permite incluir tu app web progresiva en un Android App Bundle tan fácil como ejecutar un par de comandos de la CLI. Para ello, se 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 AWP para generar un proyecto de Android?

Para comenzar, crea un directorio en el que deseas alojar el proyecto y moverlo a él:

$ mkdir my-pwa && cd my-pwa

Luego, ejecuta la herramienta de línea de comandos Bubblewrap para generar la configuración y el proyecto de Android del 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 solicitará descargar dependencias adicionales. Esas dependencias son Java Development Kit y las herramientas de línea de comandos de Android. A fin de asegurarte de que se descarguen las versiones correctas para cada dependencia, te recomendamos que permitas que Bubblewrap descargue las versiones correctas en lugar de usar una que ya esté disponible en la computadora.

Aquí, Bubblewrap se inicializa con la ubicación de un archivo de manifiesto de aplicación web de AWP. Esto generará una configuración predeterminada a partir del manifiesto de apps web y comenzará un asistente en la consola que te permitirá cambiar la configuración predeterminada. Sigue los pasos del asistente para cambiar cualquiera de los valores generados por la herramienta.

Clave de firma

Play Store de Google requiere que los paquetes de aplicaciones se firmen digitalmente con un certificado, a menudo denominado clave de firma. Este es un certificado autofirmado y es diferente del que se usa para entregar tu aplicación mediante HTTPS.

Bubblewrap solicitará la ruta de acceso de la clave cuando cree la aplicación. Si usas una ficha de Play Store existente 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 creas una ficha nueva en Play Store, puedes usar el valor predeterminado que proporciona Bubblewrap para que cree una clave nueva por ti:

Importante: Asegúrate de guardar la clave y las contraseñas en un lugar seguro. Los necesitarás para compilar la aplicación por primera vez y para actualizar la aplicación en Play Store con regularidad.

Salida de burbujas

Se crearon los siguientes elementos después de inicializar tu proyecto de Bubblewrap y completar el asistente:

• 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 versión, ya que se puede usar para regenerar todo el proyecto de Bubblewrap si es necesario.
• Archivos de proyecto de Android: Los archivos restantes del directorio son el proyecto de Android generado. Este proyecto es la fuente que se utiliza para el comando de compilación Bubblewrap. De manera opcional, puedes hacer un seguimiento de estos archivos con el sistema de control de versión.
• Clave de firma (opcional): Si eliges que Bubblewrap cree la clave de firma por ti, esta se enviará a la ubicación descrita en el asistente. Asegúrate de que la clave se almacene en un lugar seguro y limita la cantidad de personas que tienen acceso a ella. Es la misma la que se usa para demostrar que son tuyas las apps de Play Store.

Con estos archivos, ahora tenemos todo lo que necesitamos para compilar un Android App Bundle.

Cómo compilar 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 la clave de firma):

$ bubblewrap build

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

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

3. Pruébalo: Bubblewrap

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

1. Crea un directorio para conservar tu proyecto de Android generado.
2. Inicializa ese directorio con Bubblewrap y el manifiesto de apps web de tu AWP.
3. Genera una nueva clave de firma o reutiliza las existentes.
4. Compila tu Android App Bundle a partir del proyecto de Android generado.

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

Ahora que tienes un Android App Bundle para tu AWP, es hora de subirlo a Google Play Store. Una vez que hayas registrado la cuenta de desarrollador, puedes 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 una versión en Play?

Crea una app

Una vez que accedas, verás una pantalla que mostrará todas tus aplicaciones. Cerca de la parte superior, verás el botón Crear app, que te mostrará la siguiente pantalla cuando crees que se creará una nueva ficha de la app para Android.

Hay varios campos que se deben completar, incluido el nombre de la app, el idioma predeterminado, si es una app o un juego, si es gratuito 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 la opción de hacer que tu app sea gratuita o pagada, la AWP que incluyes en Play debe estar disponible para el servicio de Internet más amplio a fin de que funcione. No hay forma de detectar de manera confiable que el usuario accede a tu app desde la app en lugar de hacerlo desde el navegador u otro método de instalación. Por lo tanto, te recomendamos monetizar tu AWP a través de medios distintos de los cargos por descargar la app en Play Store.

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

Configurar pruebas internas

Las pruebas internas son una excelente manera de publicar tu app rápidamente sin la revisión de un grupo de verificadores de confianza que selecciones. Consulta las tareas de la lista Comienza a probar ahora y selecciona Seleccionar verificadores.

Si haces clic en esa tarea, se te redireccionará a la página Prueba interna. Aquí administrarás la configuración de pruebas de tu app. Si deseas navegar hasta ella, abre la sección Testing en el menú Release de la barra lateral. Lo primero que debes hacer es crear una lista de direcciones de correo electrónico de 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 en la que podrá crear su lista de direcciones de correo electrónico.

En esta ventana emergente, elegirás un nombre para tu lista de direcciones de correo electrónico y podrás ingresarla de forma manual o subir un archivo CSV con las direcciones que usarás. Cuando termines, presiona el botón Guardar cambios. Si lo deseas, podrás volver a listas de direcciones de correo electrónico que ya hayas creado para agregar o quitar direcciones, según sea necesario. Después de agregar tus verificadores, es momento 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 pedirá que realices varias secciones. En la primera, Integridad de la app, puedes elegir cómo administrar la clave de firma de tu app. La opción predeterminada es permitir que Google administre la clave de firma, y es la opción recomendada, ya que es segura y mantiene la app recuperable en caso de que pierdas la clave de carga.

Firma de apps de Play

Importante: A partir de agosto de 2021, la firma de apps de Play será obligatoria 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 las apps para Android que se distribuyen a los usuarios. La clave que Bubblewrap genera para ti se convierte en la clave de carga en lugar de la clave de firma. Si bien Google administra la clave de firma por ti, administras y mantienes la clave de carga privada, que utilizas cada vez que firmas tu app para subirla a Play Console. Este sistema te permite restablecer la clave de carga en caso de que se pierda o se vea comprometida, comunicándote con el equipo de asistencia al cliente de Play.

Carga y finalización de aplicaciones

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

Si bien las apps de prueba no pasan por todo el proceso de revisión de Play Store, pueden pasar un tiempo hasta que estén disponibles para descargarse y probarse después de crear y lanzar la versión.

5. Pruébalo: Crea una app

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

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

6. Vínculos de recursos digitales

Si lograste probar tu AWP en Play, es posible que no se ejecute 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 actualizar la aplicación web para finalizar el vínculo.

Antes de comenzar: ¿Cómo pueden los vínculos de recursos digitales demostrar que son propietarios de la app y de la AWP?

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

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

Con firma de apps de Play

Si configuraste la firma de apps de Play para tu app cuando creaste la versión (que antes se recomendaba), podrás encontrar la huella digital SHA-256 en Play Console. Recuerda que este certificado no es el mismo que se usó para subir tu aplicación. Para obtener la huella digital, accede a tu cuenta de Play Console en Lanzamientos y configuración, Allí verás varias opciones en Certificado de clave de firma de la app. 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, debes conocer la ruta de acceso a la clave de firma y las contraseñas correspondientes. Copie los valores hexadecimales de la clave SHA256.

Crea tu archivo de vínculos de recursos digitales

Bubblewrap puede administrar las huellas digitales de firma que recuperaste y generar el archivo de Vínculos de recursos digitales correcto para ti. Para agregar una huella digital con Bubblewrap, ejecuta el siguiente comando desde el mismo directorio que creaste durante Bubblewraping Tu AWP, en el que debes reemplazar <fingerprint> por la huella digital que se copió 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 en el directorio .well-known con el mismo origen que tu AWP.

assetlinks.json debe colocarse en el archivo .well-known, debe llamarse assetlinks.json, debe estar en el mismo origen que tu AWP y, por lo tanto, debe ser accesible en my-pwa.origin/.well-known/assetlinks.json. Cualquier desviación puede impedir que se encuentre y se vincule correctamente con tu app. Puedes verificar que Digital Asset Link está configurado correctamente mediante la API de Digital Asset Links.

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

Ahora, es tu turno. Aplicando 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 el archivo de Vínculos de recursos digitales a tu AWP.
4. Usa la API y tu app de prueba para verificar que tu archivo de Digital Asset Links esté configurado correctamente.

8. Ponga a prueba su conocimiento

Antes de finalizar, pon a prueba tus conocimientos y responde las siguientes preguntas para comprobar lo que aprendiste. No te pierdas las respuestas.

Después de generar su proyecto de Android con Bubblewrap, Sally confirma el archivo ______ generado con su sistema de control de versión para que pueda volver a compilarlo cuando lo necesite.

twa-manifest.json clave de firma app-release-bundle.aab build.gradle

Juan busca que su equipo de control de calidad pruebe su app para Android de AWP y ______ el paquete de aplicación para Android a un segmento de pruebas internas.

cargas compilaciones y cargas versiones signos y cargas

La app de Android de Oogie Boogie no funciona en pantalla completa. Para solucionarlo, obtienen la huella digital del certificado SHA-256 de su ______ y la suben al archivo de Vínculos de recursos digitales ubicado en ______, en el mismo origen que su AWP.

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

9. Ponga a prueba sus conocimientos: Respuestas

Respuestas a las preguntas de Ponga a prueba sus conocimientos

1. Después de generar su proyecto de Android con Bubblewrap, Sally confirma el archivo ______ generado con su sistema de control de versión para que pueda volver a compilarlo cuando lo necesite.
   • Respuesta: twa-manifest.json
   • Sección: Cómo unir tu AWP
2. Juan busca que su equipo de control de calidad pruebe su app para Android de AWP y ______ el paquete de aplicación para Android a un segmento de pruebas internas.
   • Respuesta: señales y cargas
   • Sección: Cómo agregar tu app a Google Play Store
3. La app de Android de Oogie Boogie no funciona en pantalla completa. Para solucionarlo, obtienen la huella digital del certificado SHA-256 de su ______ y la suben al archivo de Vínculos de recursos digitales ubicado en ______, en el mismo origen que su AWP.
   • Respuesta: clave de firma, /.well-known/assetlinks.json
   • Sección: Vínculos de recursos digitales

10. ¡Felicitaciones!

¡Felicitaciones! Aprendiste correctamente cómo agregar tu AWP a Google Play Store.

Cuando se sienta listo, pruebe por su cuenta los siguientes pasos:

• Crea una versión de producción de la app
• Obtén más información sobre más opciones para el lanzamiento de tu app, como las versiones exclusivas del Chrome OS y las versiones que incluyen una app para Android y una AWP para Chrome OS.
• Descubre cómo configurar la Facturación Play para tu app e implementarla en tu AWP y en el backend.

¡Feliz codificación!