Puede ser un poco difícil configurar Trusted Web Activities, especialmente si lo único que quiere hacer es mostrar tu sitio web. En esta guía, se explica cómo crear un proyecto básico que utiliza Trusted Web Activities, y cubre todas las trampas.
Al final de esta guía, harás lo siguiente:
- Usaste Bubblewrap para compilar una aplicación. que use una Actividad web de confianza y apruebe la verificación.
- Comprende cuándo se usan tus claves de firma.
- Debes poder determinar la firma con la que se compila tu aplicación para Android.
- Aprende a crear un archivo básico de Vínculos de recursos digitales.
Para seguir esta guía, necesitarás lo siguiente:
- Tener instalado Node.js 10 o una versión posterior en la computadora de desarrollo
- Un teléfono o emulador de Android conectado y configurado para el desarrollo (Habilita la depuración por USB si estás usando un teléfono físico).
- Un navegador compatible con la Actividad web de confianza en tu teléfono de desarrollo. Chrome 72 o versiones posteriores funcionarán. Pronto se admitirán otros navegadores.
- Un sitio web que desees ver en la Actividad web de confianza.
Una Actividad web de confianza permite que tu app para Android inicie una pestaña del navegador en pantalla completa sin para cualquier IU del navegador. Esta función se limita a tus sitios web, y debes comprobarlo estableciendo Vínculos de recursos digitales. Hablaremos más al respecto más adelante.
Cuando inicies una Actividad web de confianza, el navegador comprobará que los Vínculos de recursos digitales verifiquen esto se denomina verificación. Si falla la verificación, el navegador volverá a mostrar su sitio web como Pestaña Personalizar.
Cómo instalar y configurar Bubblewrap
Bubblewrap es un conjunto de bibliotecas y un comando Line Tool (CLI) para Node.js que ayuda a los desarrolladores a generar, compilar y ejecutar apps web progresivas. dentro de aplicaciones para Android, mediante Trusted Web Activity.
La CLI se puede instalar con el siguiente comando:
npm i -g @bubblewrap/cli
Configura el entorno
Cuando ejecutes Bubblewrap por primera vez, te ofrecerá descargar e instalar automáticamente el las dependencias externas requeridas. Recomendamos que permitas que la herramienta lo haga, ya que garantiza que que las dependencias estén configuradas correctamente. Consulta la documentación de Bubblewrap para usar un o la instalación existente de Java Development Kit (JDK) o Android.
Inicializa y compila el proyecto
Para inicializar un proyecto de Android que une una AWP, debes ejecutar el comando init:
bubblewrap init --manifest=https://my-twa.com/manifest.json
Bubblewrap leerá el Manifiesto web. pedirles a los desarrolladores que confirmen los valores que se usarán en el proyecto de Android y generar el proyecto usando esos valores. Una vez que se haya generado el proyecto, ejecuta el siguiente comando para generar un APK:
bubblewrap build
Ejecutar
El paso de compilación generará un archivo llamado app-release-signed.apk. Este archivo se puede instalar en un
de desarrollo para realizar pruebas, o bien subirse a Play Store para su lanzamiento.
Bubblewrap proporciona un comando para instalar y probar la aplicación en un dispositivo local. Con la dispositivo de desarrollo conectado a la computadora ejecute lo siguiente:
bubblewrap install
De manera alternativa, se puede usar la herramienta adb que se usan.
adb install app-release-signed.apk
Ahora, la aplicación debería estar disponible en el selector de dispositivos. Cuando abras la aplicación, Ten en cuenta que tu sitio web se lanza como una pestaña personalizada, no como una actividad web de confianza, esto es porque aún no configuramos la validación de Vínculos de recursos digitales, pero primero...
Alternativas de interfaz gráfica de usuario (GUI) para Bubblewrap
El Compilador de AWP proporciona una interfaz GUI que usa el envoltorio de burbujas. para potenciar la generación de proyectos de Trusted Web Activity. Encuentra más instrucciones usar PWA Builder para crear una app para Android que abra tu AWP en esta entrada de blog.
Nota sobre las claves de firma
Los Vínculos de recursos digitales tienen en cuenta la clave con la que se firmó un APK y una causa común de error en la verificación es usar una firma incorrecta. (Recuerda que, si falla la verificación, iniciarás tu sitio web como una pestaña personalizada con la interfaz de usuario del navegador en la parte superior de la página). Cuando Bubblewrap compile la aplicación, se creará un APK con una configuración de clave durante el paso init. Sin embargo, cuando publiques tu app en Google Play, es posible que se cree otra clave para ti, según cómo decidas manejar las claves de firma. Obtén más información sobre las claves de firma y cómo se relacionan con Bubblewrap y Google Play.
Configurando tu archivo de vínculo de recursos
Los vínculos de recursos digitales consisten básicamente en un archivo en tu sitio web que dirige a tu aplicación y a metadatos en tu aplicación que dirigen a tu sitio web.
Después de crear el archivo assetlinks.json, súbelo a tu sitio web en .well-known/assetlinks.json en relación con la raíz) para que el navegador pueda verificar tu aplicación correctamente. Consulta un análisis detallado sobre los Vínculos de recursos digitales para obtener más información sobre cómo se relaciona con tu clave de firma.
Verificando el navegador
Una actividad web de confianza intentará cumplir con la selección de navegador predeterminada del usuario. Si el navegador predeterminado del usuario es compatible con Trusted Web Activities, este se iniciará. De lo contrario, se elegirá si cualquier navegador instalado es compatible con Trusted Web Activities. Por último, el comportamiento predeterminado es volver al modo de pestañas personalizadas.
Esto significa que si estás depurando algo relacionado con Trusted Web Activities, debes asegúrate de usar el navegador que crees. Puedes usar el siguiente comando para verificar qué navegador se está usando:
> adb logcat -v brief | grep -e TWAProviderPicker
D/TWAProviderPicker(17168): Found TWA provider, finishing search: com.google.android.apps.chrome
Próximos pasos
Esperamos que si siguió esta guía, tendrá una actividad web de confianza y suficiente conocimiento para depurar lo que sucede cuando falla la verificación. Si no es así, consulta más conceptos de Android para desarrolladores web o informa un problema de GitHub en estos documentos.
Para continuar, te recomiendo que comiences crear un ícono para tu app. Una vez hecho esto, puedes considerar implementar tu app en Play Store.