Saltar al contenido

Ocultar barra de direcciones en aplicaciones web progresivas

Contamos con la solución a este disgusto, al menos eso pensamos. Si presentas alguna pregunta coméntalo, que sin dudarlo te ayudaremos

Solución:

La aplicación PWA muestra la barra de direcciones cuando intenta navegar por las páginas fuera de scope. Por ejemplo, si ha configurado su alcance en el archivo manifest.json como scope: "/my-pwa/" entonces toda la URL de la página debería tener prefix Me gusta esto: /my-pwa/page.html.

En Android, debe implementar un TWA (actividades web confiables) para habilitar el modo de pantalla completa. Así que te recomiendo que uses el PWABuilder para hacer eso. El PWABuilder ya le devuelve un archivo APK asignado y un assetlink.json que deberá cargar en su servidor en un .well-known carpeta en la raíz de su host: https://www.your-domain/.well-known/assetlink.json> De esa manera, Android muestra su PWA en modo de pantalla completa.

TL; DR: vea el último párrafo para la solución que finalmente lo resolvió para mí.

He tenido la barra de navegación en un PWA, aunque probé todo, así que pensé en compartir todo lo que hice, lo que funcionó y cómo lo resolví finalmente, para que no tengas que buscar soluciones en línea durante horas como tuve que

Ampliando la respuesta de @alvaropaco, en el archivo .zip que obtiene de PWABuilder, usted deber colocar el assetlink.json archivo en una carpeta llamada .well-known, directamente bajo su dominio. Debe estar accesible en https://www.your-domain.com/.well-known/assetlink.json, o la barra de navegación no se ocultará. Sin excepciones. Lea el README.html que vino con su .apk:

Próximos pasos para obtener su PWA en Google Play Store Ha generado correctamente un paquete de aplicación de Google Play Store (.apk expediente)

para su PWA.

Tus próximos pasos:

  1. Desplegar assetlinks.json a su servidor.
  2. Pruebe su paquete en un dispositivo Android o en un emulador de Android.
  3. Sube tu apk archivo a Google Play Store.

Cada paso se explica a continuación.

1. Implementar assetlinks.json

Su archivo zip contiene assetlinks.json. Este es un archivo de enlaces de activos digitales que demuestra que posee el dominio de su PWA. Sube este archivo a tu servidor en https://example.com/.well-known/assetlinks.json. (Reemplace example.com con la URL de su PWA).

‍♂️ Aviso:

Se requieren enlaces de activos digitales para que su PWA se cargue sin la barra de direcciones del navegador. Si ve una barra de direcciones del navegador en su aplicación en Android, su assetlinks.json el archivo falta, es inaccesible o es incorrecto. Consulte nuestro asistente de enlaces de activos para solucionar este problema.


Si usted es no construir tu aplicación con PWABuilder; tal vez usando bubblewrap en su lugar, o algo más, aquí hay algunas fuentes para ayudarlo a comenzar a crear un archivo assetlinks.json:

  • Guía de inicio rápido de actividades web confiables
  • Eliminación de la barra de direcciones del navegador

Nota al margen:

Al compilar mi aplicación con bubblewrap, seguía recibiendo este molesto error que no me permitía continuar porque había un problema al instalar las herramientas del SDK de Android:

C:UsersMeDesktopapp>bubblewrap build
,-----.        ,--.  ,--.  ,--.
|  |) /_,--.,--|  |-.|  |-.|  |,---.,--.   ,--,--.--.,--,--.,---.
|  .-.  |  ||  | .-. | .-. |  | .-. |  |.'.|  |  .--' ,-.  | .-. |
|  '--' '  ''  | `-' | `-' |     --|   .'.   |  |   '-'  | '-' '
`------' `----' `---' `---'`--'`----'--'   '--`--'   `--`--|  |-'
                                                           `--'
Installing Android Build Tools. Please, read and accept the license agreement
build Installing Build Tools
Error: Could not find or load main class com.android.sdklib.tool.sdkmanager.SdkManagerCli


cli ERROR undefined

Publiqué una respuesta de desbordamiento de pila separada relacionada con este problema.


Verificar assetlinks.json

Para verificar que assetlinks.json se reconozca correctamente en un dispositivo Android, ejecute estos pasos: (primero debe instalar adb y grep):

Depuración de enlaces de activos digitales

Después de generar su APK firmado. se puede instalar en un dispositivo de prueba, usando adb:

adb install app-release.apk

Si el paso de verificación falla (si la barra de direcciones aún está visible), es posible verificar si hay mensajes de error utilizando Android Debug Bridge, desde la terminal de su sistema operativo y con el dispositivo de prueba conectado.

adb logcat | grep -e OriginVerifier -e digital_asset_links

Ahora, asegúrese de que su aplicación esté completamente cerrada (fuerce su detención) y vuelva a abrirla.

Si está fallando verás Statement failure matching fingerprint. Verification failed. mensaje. Por lo tanto es importante para revisiónAndroidManifest.xml y construir.gradle archivos y verifique si las configuraciones coinciden con los enlaces de activos.json.

De lo contrario Verification succeeded. debe aparecer el mensaje.

fuente

¿Qué pasa si assetlinks.json es verificado pero la barra de navegación aún persiste?

Estaba teniendo este problema, pero finalmente lo resolví con la ayuda de esta publicación de problemas de GitHub. Resultó que tenía la host parámetro en twa-manifest.json (no manifest.json porque lo construí con bubblewrap – tiene más flexibilidad que PWABuilder, aunque solo funciona para Android) configurado en https://example.com en vez de https://www.example.com (nota la www) donde está mi sitio Realmente alojado Entonces, si lo construye con PWABuilder, primero vaya a su sitio en el navegador, haga clic en la barra de direcciones, copie el URL completay pegar ese en PWABuilder.

La barra de direcciones debería desaparecer.

Comentarios y calificaciones

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *