Publishing your PWA in the Play Store in a couple of minutes using PWA Builder - Forum
Publishing your PWA in the Play Store in a couple of minutes using PWA Builder
Quote from luishp on July 7, 2020, 5:44 pmI have just found this step by step post to publish your PWA in the Play Store:
https://www.davrous.com/2020/02/07/publishing-your-pwa-in-the-play-store-in-a-couple-of-minutes-using-pwa-builder/This is my favorite method :)
I have just found this step by step post to publish your PWA in the Play Store:
https://www.davrous.com/2020/02/07/publishing-your-pwa-in-the-play-store-in-a-couple-of-minutes-using-pwa-builder/
This is my favorite method :)
Quote from Palamar on December 2, 2020, 4:48 pmHola @luishp, es posible cambiar el Splash en este modo de compilación?, he logrado despues de varios intentos hacerlo funcionar pero aún no puedo cambiar la imagen de inicio, me coloca el mismo Splash que corresponde al ícono y la app online no te permite cambiarlo...
Hola @luishp, es posible cambiar el Splash en este modo de compilación?, he logrado despues de varios intentos hacerlo funcionar pero aún no puedo cambiar la imagen de inicio, me coloca el mismo Splash que corresponde al ícono y la app online no te permite cambiarlo...
Quote from Palamar on December 2, 2020, 7:41 pmListo, ya he podido hacer prácticamente todo. Pero hay algo a lo que le doy vueltas y no hay forma. No puedo hacer desaparecer la barra del navegador. Coloco la App en FullScreen, configuro igual en PWABuilder y por último subo el archivo assetlinks.json a la carpeta que menciona el Readme (dentro de mi server) pero al instalar el APK en cualquier celular el problema persiste. He probado el archivo en el navegador para ver que puedo acceder a él correctamente y efectivamente funciona.
Por otra parte, mi app esta en un subdominio por lo que he intentado poner el archivo de links en ambas partes pero nada igual.
Que puede pasar?
Listo, ya he podido hacer prácticamente todo. Pero hay algo a lo que le doy vueltas y no hay forma. No puedo hacer desaparecer la barra del navegador. Coloco la App en FullScreen, configuro igual en PWABuilder y por último subo el archivo assetlinks.json a la carpeta que menciona el Readme (dentro de mi server) pero al instalar el APK en cualquier celular el problema persiste. He probado el archivo en el navegador para ver que puedo acceder a él correctamente y efectivamente funciona.
Por otra parte, mi app esta en un subdominio por lo que he intentado poner el archivo de links en ambas partes pero nada igual.
Que puede pasar?
Quote from Palamar on December 3, 2020, 4:56 amTe adjunto una imagen, pero el problema no es nada extraño, de hecho es un problema que "en teoría" solucionan en PWABuilder. Cuando PWABuilder termina de compilar descargas el archivo ZIP e internamente hay varios archivos, uno de ellos es el "assetlinks.json". El readme te dice que hay que colocarlo dentro de una carpeta en el server. Una de las funciones de dicho archivo es permitir que en la ejecución de la App en Android desaparezca la barra de direcciones superior. He intentado todo pero la barra no desaparece. No sé ya que se podría hacer.
En la imagen se ve la App en funcionamiento y puede verse claramente cómo aparece la barra del navegador que la esta ejecutando....al ser una app instalada desde un APK esto no debería suceder.
Te adjunto una imagen, pero el problema no es nada extraño, de hecho es un problema que "en teoría" solucionan en PWABuilder. Cuando PWABuilder termina de compilar descargas el archivo ZIP e internamente hay varios archivos, uno de ellos es el "assetlinks.json". El readme te dice que hay que colocarlo dentro de una carpeta en el server. Una de las funciones de dicho archivo es permitir que en la ejecución de la App en Android desaparezca la barra de direcciones superior. He intentado todo pero la barra no desaparece. No sé ya que se podría hacer.
En la imagen se ve la App en funcionamiento y puede verse claramente cómo aparece la barra del navegador que la esta ejecutando....al ser una app instalada desde un APK esto no debería suceder.
Uploaded files:- You need to login to have access to uploads.
Quote from luishp on December 3, 2020, 6:07 pmHola @palamar,
¿Has cambiado el valor que por defecto VisualNEO Web pone en el archivo manifest.json para display?
"display": "fullscreen"Aquí es donde se controla como se mostrará el navegador en la aplicación que por defecto no se muestra.
Yo a veces utilizo el valor minimal-ui en lugar de fullscreen.Lo que muestras en tu captura es como si hubieras instalado la app directamente como PWA (desde la web) en lugar de hacerlo desde Google Play.
Hola @palamar,
¿Has cambiado el valor que por defecto VisualNEO Web pone en el archivo manifest.json para display?
"display": "fullscreen"
Aquí es donde se controla como se mostrará el navegador en la aplicación que por defecto no se muestra.
Yo a veces utilizo el valor minimal-ui en lugar de fullscreen.
Lo que muestras en tu captura es como si hubieras instalado la app directamente como PWA (desde la web) en lugar de hacerlo desde Google Play.
Quote from Palamar on December 4, 2020, 8:29 pmSí, he cambiado el valor de display del manifiest pero aún así se muestra la barra del navegador. Ninguna de las otras opciones me ha funcionado tampoco por lo que por ahora (y si no lo soluciono en estos días), abandonaré esta forma de compilar porque la verdad frustra en vez de simplificar. Por otro lado lo que he hecho puntualmente es bajar el ZIP que te crea PWABuilder y he pasado el archivo APK al teléfono y lo he instalado tal cual como se hace con cualquier APK y el resultado es el de la captura del post anterior, con la barra del explorador. Es más he notado que ni siquiera muestra la dirección real de la app sino la raíz del dominio. Además de eso se puede ver claramente Google intentando traducir el sitio en la parte de abajo, un completo lio.
Sí, he cambiado el valor de display del manifiest pero aún así se muestra la barra del navegador. Ninguna de las otras opciones me ha funcionado tampoco por lo que por ahora (y si no lo soluciono en estos días), abandonaré esta forma de compilar porque la verdad frustra en vez de simplificar. Por otro lado lo que he hecho puntualmente es bajar el ZIP que te crea PWABuilder y he pasado el archivo APK al teléfono y lo he instalado tal cual como se hace con cualquier APK y el resultado es el de la captura del post anterior, con la barra del explorador. Es más he notado que ni siquiera muestra la dirección real de la app sino la raíz del dominio. Además de eso se puede ver claramente Google intentando traducir el sitio en la parte de abajo, un completo lio.
Quote from luishp on December 4, 2020, 8:32 pm@palamar, eso es muy raro. Yo no he tenido ese problema con las dos apps que he compilado.
¿Has rellenado todas las opciones de configuración del proyecto: nombre de la app, nombre corto, etc?Además de eso se puede ver claramente Google intentando traducir el sitio en la parte de abajo, un completo lio.
¿Has elegido español como idioma de la app en Project > Properties > Language?
@palamar, eso es muy raro. Yo no he tenido ese problema con las dos apps que he compilado.
¿Has rellenado todas las opciones de configuración del proyecto: nombre de la app, nombre corto, etc?
Además de eso se puede ver claramente Google intentando traducir el sitio en la parte de abajo, un completo lio.
¿Has elegido español como idioma de la app en Project > Properties > Language?
Quote from Palamar on December 5, 2020, 2:07 amHice todo tal cual en las opciones del PWABuilder, complete todo y no funciona. Voy a seguir viéndolo pero no creo llegar buen puerto ya que he cambiado muchas de las cosas y sigue sin funcionar.
Hice todo tal cual en las opciones del PWABuilder, complete todo y no funciona. Voy a seguir viéndolo pero no creo llegar buen puerto ya que he cambiado muchas de las cosas y sigue sin funcionar.
Quote from luishp on December 5, 2020, 12:38 pmUna pregunta @palamar ¿estás utilizando el plugin Lighthouse para Chrome?
Es muy importante comprobar que no falle ninguna de las características obligatorias para una PWA.
Si compartes la URL de tu app puedo echar un vistazo (enviamela por email si no quieres hacerla pública).
Una pregunta @palamar ¿estás utilizando el plugin Lighthouse para Chrome?
Es muy importante comprobar que no falle ninguna de las características obligatorias para una PWA.
Si compartes la URL de tu app puedo echar un vistazo (enviamela por email si no quieres hacerla pública).
Quote from Palamar on December 9, 2020, 2:49 pmNo tenía idea de que si o si hay que utilizar un plugin, no creo haberlo leído. De todos modos el test de PWABuilder me da 100% (ni en el propio ejemplo da tan bien jajaj). Por si acaso te envío por mail la dirección a ver que se puede hacer, quisiera resolverlo y utilizar este método como compilación (aunque el otro funciona de maravillas)
Saludos!
No tenía idea de que si o si hay que utilizar un plugin, no creo haberlo leído. De todos modos el test de PWABuilder me da 100% (ni en el propio ejemplo da tan bien jajaj). Por si acaso te envío por mail la dirección a ver que se puede hacer, quisiera resolverlo y utilizar este método como compilación (aunque el otro funciona de maravillas)
Saludos!
Quote from luishp on December 9, 2020, 4:27 pm@palamar el plugin no es necesario pero ayuda michísimo a optimizar la aplicación.
Así es como en unos seghundos he podido comprobar que en tu caso lo que falla es el tamaño del icono de la aplicación: asegúrate de que tenga al menos una resolución de 512x512 píxeles.
Avísame por favor si finalmente haces un tutorial de como compilar .apk en Windows :)Saludos!
@palamar el plugin no es necesario pero ayuda michísimo a optimizar la aplicación.
Así es como en unos seghundos he podido comprobar que en tu caso lo que falla es el tamaño del icono de la aplicación: asegúrate de que tenga al menos una resolución de 512x512 píxeles.
Avísame por favor si finalmente haces un tutorial de como compilar .apk en Windows :)
Saludos!
Quote from Palamar on December 9, 2020, 4:54 pmEstoy viendo eso, de hacer funcionar esto puedo hacer un tutorial incluso marcando fallas que yo he tenido en el intento. Y por si acaso voy a hacer uno con el SDK de Android (Android Studio) que a mi me pareció relativamente sencillo.
Estoy viendo eso, de hacer funcionar esto puedo hacer un tutorial incluso marcando fallas que yo he tenido en el intento. Y por si acaso voy a hacer uno con el SDK de Android (Android Studio) que a mi me pareció relativamente sencillo.
Quote from Palamar on December 11, 2020, 3:35 amBuenas, tal y cómo dije, tengo la App funcionando con PWABuilder, el problema, aparentemente de seguridad para con el certificado SSL del server. Hay que comprender que PWABuilder solo funciona con sitios que tengan SSL activado.Solucionado eso me han surgido preguntas que he querido contestarme en la práctica y no han salido del todo bien. Cito a @luishp porque parte de esto viene de otro hilo también. Hago esto a modo de documentación y por si acaso me dejen su opinión.
En primer lugar y después del tema del SSL me di cuenta que a PWABuilder "no le gustan" las PWA puestas en sub carpetas por lo que tuve que crear un subdominio, de otra manera muchas veces compila con errores.
Otro tema son las imágenes, no he visto la utilidad de subirlas al server. Lo mejor es tener una de 512x512 preparada, subirla con PWABuilder y dejar que el mismo genere todos los formatos disponibles.
Cuando se elije el idioma Español se generan errores también, lo probé unas cuantas veces pero lo mejor es dejar que el idioma sea Inglés (Por defecto)
Ahora bien, la parte que me ha quedado sin cerrar aún...
¿Cuál sería la mejor forma de actualizar las PWA?, en teoría si cambias el contenido de la web (Index, los scripts, css, etc) todo, vamos, modificar y compilar con VisualNeo otra vez. Tras subir todo, las instaladas en escritorio y APK deberían cambiar de forma automática, esto no es así y creo que se debe a nuestro amigo service-worker.root.js, el cual en vez de consultar las páginas, las cachea y dado que cuando VisualNeo compila lo hace con los mismos nombres, este proceso de actualizar demora horas (excepto que borremos toda la cache de chrome). Debido a esto lo que hice fue recompilar con VisualNeo y crear nuevamente la PWA, así y todo lo mejor fue borrar todo de 0 y recomenzar...aclaro que aún no he subido nada de esto al PlayStore. Despues de pruebas me di cuenta que las PWA instaladas en el escritorio de Windows actualizan inmediatamente pero las APK no lo hacen hasta no borrar todo rastro de la app anterior.
Por otro lado el archivo assetlinks.json tampoco actualiza inmediatamente por lo que a veces puede darnos error y la única forma de salir de ese error es re compilar nuevamente para que se nos otorgue otro numero sha256, no quiero complicar vidas pero lo he probado más de una vez (como si PWABuilder a veces compilara "mal").
Dicho esto, no puedo mentir por lo que considero que este tipo de compilación es la más dificultosa aunque en teoría debería de ser la más fácil. Pero a su favor esta el hecho de que, de hacer funcionar todo bien las app de escritorio y Android, Microsoft Store, etc. quedarían todas integradas.
Estaré haciendo un par de videos de cómo proceder con ambas formas de compilar, con PWABuilder y con ANDROID STUDIO.
Buenas, tal y cómo dije, tengo la App funcionando con PWABuilder, el problema, aparentemente de seguridad para con el certificado SSL del server. Hay que comprender que PWABuilder solo funciona con sitios que tengan SSL activado.Solucionado eso me han surgido preguntas que he querido contestarme en la práctica y no han salido del todo bien. Cito a @luishp porque parte de esto viene de otro hilo también. Hago esto a modo de documentación y por si acaso me dejen su opinión.
En primer lugar y después del tema del SSL me di cuenta que a PWABuilder "no le gustan" las PWA puestas en sub carpetas por lo que tuve que crear un subdominio, de otra manera muchas veces compila con errores.
Otro tema son las imágenes, no he visto la utilidad de subirlas al server. Lo mejor es tener una de 512x512 preparada, subirla con PWABuilder y dejar que el mismo genere todos los formatos disponibles.
Cuando se elije el idioma Español se generan errores también, lo probé unas cuantas veces pero lo mejor es dejar que el idioma sea Inglés (Por defecto)
Ahora bien, la parte que me ha quedado sin cerrar aún...
¿Cuál sería la mejor forma de actualizar las PWA?, en teoría si cambias el contenido de la web (Index, los scripts, css, etc) todo, vamos, modificar y compilar con VisualNeo otra vez. Tras subir todo, las instaladas en escritorio y APK deberían cambiar de forma automática, esto no es así y creo que se debe a nuestro amigo service-worker.root.js, el cual en vez de consultar las páginas, las cachea y dado que cuando VisualNeo compila lo hace con los mismos nombres, este proceso de actualizar demora horas (excepto que borremos toda la cache de chrome). Debido a esto lo que hice fue recompilar con VisualNeo y crear nuevamente la PWA, así y todo lo mejor fue borrar todo de 0 y recomenzar...aclaro que aún no he subido nada de esto al PlayStore. Despues de pruebas me di cuenta que las PWA instaladas en el escritorio de Windows actualizan inmediatamente pero las APK no lo hacen hasta no borrar todo rastro de la app anterior.
Por otro lado el archivo assetlinks.json tampoco actualiza inmediatamente por lo que a veces puede darnos error y la única forma de salir de ese error es re compilar nuevamente para que se nos otorgue otro numero sha256, no quiero complicar vidas pero lo he probado más de una vez (como si PWABuilder a veces compilara "mal").
Dicho esto, no puedo mentir por lo que considero que este tipo de compilación es la más dificultosa aunque en teoría debería de ser la más fácil. Pero a su favor esta el hecho de que, de hacer funcionar todo bien las app de escritorio y Android, Microsoft Store, etc. quedarían todas integradas.
Estaré haciendo un par de videos de cómo proceder con ambas formas de compilar, con PWABuilder y con ANDROID STUDIO.
Quote from Vadim on December 11, 2020, 8:18 am@palamar
¿Cambia el número de la versión del software cuando lo actualiza? Si entiendo bien, es importante cambiar el número de versión para que la aplicación PWA se actualice en los dispositivos de los usuarios.
¿Cambia el número de la versión del software cuando lo actualiza? Si entiendo bien, es importante cambiar el número de versión para que la aplicación PWA se actualice en los dispositivos de los usuarios.
Quote from Palamar on December 11, 2020, 3:12 pmSí, hay que cambiar el número y colocar la clave generada la primera vez que PWABuilder crea la App. He estado un par de días con esto y la verdad vuelvo a decir lo mismo, es un proceso dificultoso que debe hacerse con paciencia.
Sí, hay que cambiar el número y colocar la clave generada la primera vez que PWABuilder crea la App. He estado un par de días con esto y la verdad vuelvo a decir lo mismo, es un proceso dificultoso que debe hacerse con paciencia.
Quote from luishp on December 11, 2020, 8:06 pm@palamar, crear una PWA es tan sencillo como compilar tu app y subir a un servidor.
Con algunos requisitos, eso si:
- Utilizar un icono para la applicación de al menos 512x512 píxeles de resolución.
- Completar todos los campos que describen la aplicación.
- Subir la app a un dominio, subdominio o carpeta con certificado SSL (para protocolo https://)
En el caso de subirla a una subcarpeta require modificar ligeramente el archivo manifest.json.
No hace falta nada más. Las PWA son instalables por sí mismas, no necesitan tienda de aplicaciones.Si además quieres publicar la app en la Play Store o en Windows Store, el proceso es un poco más complejo pero mi experiencia personal ha sido bastante más sencilla que la tuya, siguiendo los pasos del tutorial que comparto en el primer post de este hilo lo normal es que no haya mayores problemas.
Y si los hubiese para eso está este foro. Nadie se va quedar sin ayuda y además cada vez somos más los que vamos ganando experiencia :)
Estoy deseando ver tus tutoriales.
Un abrazo.
@palamar, crear una PWA es tan sencillo como compilar tu app y subir a un servidor.
Con algunos requisitos, eso si:
- Utilizar un icono para la applicación de al menos 512x512 píxeles de resolución.
- Completar todos los campos que describen la aplicación.
- Subir la app a un dominio, subdominio o carpeta con certificado SSL (para protocolo https://)
En el caso de subirla a una subcarpeta require modificar ligeramente el archivo manifest.json.
No hace falta nada más. Las PWA son instalables por sí mismas, no necesitan tienda de aplicaciones.
Si además quieres publicar la app en la Play Store o en Windows Store, el proceso es un poco más complejo pero mi experiencia personal ha sido bastante más sencilla que la tuya, siguiendo los pasos del tutorial que comparto en el primer post de este hilo lo normal es que no haya mayores problemas.
Y si los hubiese para eso está este foro. Nadie se va quedar sin ayuda y además cada vez somos más los que vamos ganando experiencia :)
Estoy deseando ver tus tutoriales.
Un abrazo.
Quote from Palamar on December 12, 2020, 2:46 am@palamar, crear una PWA es tan sencillo como compilar tu app y subir a un servidor.
Con algunos requisitos, eso si:
- Utilizar un icono para la applicación de al menos 512x512 píxeles de resolución.
- Completar todos los campos que describen la aplicación.
- Subir la app a un dominio, subdominio o carpeta con certificado SSL (para protocolo https://)
Hola Luis!, pues claramente siento disentir con esto, si bien los requisitos son correctos no son los únicos y llevo tres compilaciones con distintos errores (hasta uno de Fetcherror que aparentemente viene de los splash de pantalla). Que se entienda que no estoy atacando a las PWA porque no es donde he tenido errores principalmente y porque además no tengo ninguna autoridad para eso, pero sí hay que dejar en claro que pueden surgir problemas y no son fáciles de afrontar (como el retardo que provoca la actualización de la web vs la app en el teléfono, producido por la cache). O sea, para no confundir, las PWA funcionan en su mayoría bien, pero la compilación de Android a partir de éstas es otra cosa.
En el caso de subirla a una subcarpeta require modificar ligeramente el archivo manifest.json.
No hace falta nada más. Las PWA son instalables por sí mismas, no necesitan tienda de aplicaciones.Sí, es una realidad, aunque para compilar un APK la cosa para mí ha cambiado y el problema lo genera el archivo de permisos que vuelcas en el servidor luego de que PWA compila. No descarto que sea problema de mi servidor, pero si lo es no veo porque otros no pueden encontrarse con el mismo problema. Lo he solucionado creando un Subdominio como menciono más arriba, pero bueno eso esta en probar, si a vos te funciona entonces a otros posiblemente también.
Si además quieres publicar la app en la Play Store o en Windows Store, el proceso es un poco más complejo pero mi experiencia personal ha sido bastante más sencilla que la tuya, siguiendo los pasos del tutorial que comparto en el primer post de este hilo lo normal es que no haya mayores problemas.
No he llegado aún :)...pero en breve, la semana entrante me pondré con eso, estaré comentando.
Y si los hubiese para eso está este foro. Nadie se va quedar sin ayuda y además cada vez somos más los que vamos ganando experiencia :)
Estoy deseando ver tus tutoriales.
Pero seguro hombre, que para eso estamos todos por acá. :)
Un abrazo grande desde el otro lado del "charco"!
@palamar, crear una PWA es tan sencillo como compilar tu app y subir a un servidor.
Con algunos requisitos, eso si:
- Utilizar un icono para la applicación de al menos 512x512 píxeles de resolución.
- Completar todos los campos que describen la aplicación.
- Subir la app a un dominio, subdominio o carpeta con certificado SSL (para protocolo https://)
Hola Luis!, pues claramente siento disentir con esto, si bien los requisitos son correctos no son los únicos y llevo tres compilaciones con distintos errores (hasta uno de Fetcherror que aparentemente viene de los splash de pantalla). Que se entienda que no estoy atacando a las PWA porque no es donde he tenido errores principalmente y porque además no tengo ninguna autoridad para eso, pero sí hay que dejar en claro que pueden surgir problemas y no son fáciles de afrontar (como el retardo que provoca la actualización de la web vs la app en el teléfono, producido por la cache). O sea, para no confundir, las PWA funcionan en su mayoría bien, pero la compilación de Android a partir de éstas es otra cosa.
En el caso de subirla a una subcarpeta require modificar ligeramente el archivo manifest.json.
No hace falta nada más. Las PWA son instalables por sí mismas, no necesitan tienda de aplicaciones.
Sí, es una realidad, aunque para compilar un APK la cosa para mí ha cambiado y el problema lo genera el archivo de permisos que vuelcas en el servidor luego de que PWA compila. No descarto que sea problema de mi servidor, pero si lo es no veo porque otros no pueden encontrarse con el mismo problema. Lo he solucionado creando un Subdominio como menciono más arriba, pero bueno eso esta en probar, si a vos te funciona entonces a otros posiblemente también.
Si además quieres publicar la app en la Play Store o en Windows Store, el proceso es un poco más complejo pero mi experiencia personal ha sido bastante más sencilla que la tuya, siguiendo los pasos del tutorial que comparto en el primer post de este hilo lo normal es que no haya mayores problemas.
No he llegado aún :)...pero en breve, la semana entrante me pondré con eso, estaré comentando.
Y si los hubiese para eso está este foro. Nadie se va quedar sin ayuda y además cada vez somos más los que vamos ganando experiencia :)
Estoy deseando ver tus tutoriales.
Pero seguro hombre, que para eso estamos todos por acá. :)
Un abrazo grande desde el otro lado del "charco"!
Quote from CDY@44 on February 24, 2021, 6:58 pmHi @palamar
Did you solved your problem with pwaBuilder generating a *.apk file with a navbar (not desired) on the top of the appli when installed on smartphone?
If you find a solution, can you share it, please. Thank you.
Best regards,
Hi @palamar
Did you solved your problem with pwaBuilder generating a *.apk file with a navbar (not desired) on the top of the appli when installed on smartphone?
If you find a solution, can you share it, please. Thank you.
Best regards,