tutorial template pwa progresivas play para mega examples español ejemplos curso crear apps app aplicaciones android ios angular progressive-web-apps

android - template - Añadir la tienda de aplicaciones web progresiva play/app store



pwa ios (4)

Nuestro PWA está completamente construido usando un nuevo Angular. Hemos implementado todas las optimizaciones, como la sacudida de árboles, uglify, AOT, service worker, etc. Funciona muy bien y se comporta como la aplicación móvil. Si los usuarios lo agregan a la pantalla de inicio, es difícil notar la diferencia.

Nos encontramos con algunas limitaciones grandes con PWA:

  • Todas las notificaciones (cruciales) para nuestro negocio deben enviarse como SMS. Esto obviamente tiene un enorme costo beneficio. Consideramos el uso de la notificación de inserción "web" en el Android, aunque también tenemos muchos usuarios de iOS.
  • Necesitamos la capacidad de "rastrear" la ubicación geográfica en "fondo" y la API de geolocalización HTML5 no la corta.
  • Actualmente, cada vez que el usuario navega a la URL (enviar como recordatorio de SMS) tiende a abrir una nueva pestaña en el navegador (depende del teléfono). Incluso si el usuario realmente agrega la aplicación en su pantalla de inicio. Esto obviamente aumenta el tiempo de carga y crea demasiadas pestañas. Preferiríamos poner la aplicación en primer plano y navegar a una ruta en particular (o usar notificaciones push)
  • algunos de nuestros usuarios activos pueden recibir fácilmente 10 notificaciones por día y necesitan una forma fácil de navegar en la aplicación.

Nos fijamos en NativeScript y Ionic. Ambos ofrecen la capacidad de desarrollar una aplicación Angular, pero todos "parecen" diseñados para escribir aplicaciones específicamente para dispositivos móviles (... o comenzar desde cero con ellos).

Es posible que haya pasado algo por alto, pero cuál sería la mejor práctica si solo queremos poner un envoltorio alrededor de nuestra aplicación web progresiva para que pueda instalarse como una aplicación "híbrida". La aplicación simplemente navega a nuestra URL pública, es compatible con los trabajadores del servicio y también nos permite acceder a algunas funciones nativas.

Entiendo que podría faltar el punto de PWA aquí, pero escribir otra aplicación "nativa" no es realmente una opción para nosotros.

¿Cuál sería la mejor manera de exponer nuestra web progresiva como una aplicación en Google Play Store o Apple App Store?


Puede empaquetar fácilmente su PWA como aplicación iónica / Cordova.

  1. No hay manera de lograr web push en ios por ahora. Utilice Córdoba.
  2. El seguimiento de fondo no es posible. Considere una combinación de notificaciones de inserción periódicas y sincronización de fondo para ver si es de alguna ayuda.
  3. En Android, todo lo que el usuario debe hacer es hacer clic en la primera vez que se abra el enlace, no recuerde cómo está activado.
  4. Las notificaciones push le permiten especificar la URL.

Puedes leer este artículo para comprender un poco más sobre cómo he mezclado Córdova con PWA.

https://medium.com/awebdeveloper/pwa-is-future-of-mobile-how-to-tame-it-855dd42df0ec


Un gran lugar para comenzar con una aplicación web PWABuilder.com es PWABuilder.com . Esta herramienta se puede utilizar en línea o desde la CLI. Parte de ello crea un trabajador de servicios y esas cosas, pero también crea los proyectos Cordova para Android e iOS.

He usado PWABuilder solo para crear un punto de partida. Eventualmente se combinan los proyectos iOS y Android generados en uno solo para iOS, Android y Windows. Debido a que es Cordova puedes usar complementos también.


es posible que desee buscar enlaces profundos.

https://developers.google.com/web/updates/2017/02/improved-add-to-home-screen#android_intent_filters

El nuevo y mejorado Agregar a la pantalla de inicio

Paul Kinlan Por Paul Kinlan Paul es un Defensor de desarrolladores. Chrome introdujo por primera vez los banners "Agregar a la pantalla de inicio" en Chrome 42. Este fue un gran paso para la web, ya que brindó a los usuarios la capacidad de mantener fácilmente un sitio favorito en su pantalla de inicio. al igual que las aplicaciones nativas. Hemos escuchado a desarrolladores como Alibaba que los usuarios vuelven a participar 4 veces más a menudo con su sitio agregado a la pantalla de inicio. También hemos visto que el ajuste de las heurísticas para agregarlas a la pantalla de inicio con el fin de incitar antes a 48% más instalaciones.

Nos complace compartir que el equipo ha trabajado en un complemento mejorado a la experiencia de la pantalla de inicio que hace que las aplicaciones web sean ciudadanos de primera clase de Android. En lugar de ser simplemente un icono de acceso directo, las aplicaciones web ahora se integrarán con Android. Esto significa que los usuarios que agreguen un PWA a su pantalla de inicio podrán encontrarlo en cualquier lugar donde vean otras aplicaciones (por ejemplo, en el cajón de la aplicación o en la búsqueda de aplicaciones) y abrir el sitio desde la intención. Vemos esto como el primer paso entre una serie de mejoras y tenemos la intención de convertirlo en la experiencia predeterminada para agregar a la pantalla de inicio en los próximos meses.

La experiencia mejorada de agregar a la pantalla de inicio ya está disponible en Chrome Canary y se lanzará a Chrome 57 beta en las próximas semanas.

Nota: se ha transferido a todos los usuarios en el canal estable de Chrome a partir de Chrome 59. Para probar su sitio, visite su PWA. Puede comenzar la instalación desde el menú de tres puntos> "Agregar a la pantalla de inicio" o mediante el banner de agregar a la pantalla de inicio.

Esta nueva experiencia es una gran mejora con respecto a la versión original de agregar a la pantalla de inicio, pero hay algunas diferencias entre estas aplicaciones web progresivas instaladas y las aplicaciones de Android.

Actualizar el ícono y el nombre de su aplicación Ahora tiene la capacidad de actualizar el ícono y el nombre de su aplicación web progresiva y hacer que se los refleje al usuario. Cambiar su icono o nombre en el manifiesto actualizará el icono en la pantalla de inicio después de que el usuario haya abierto el sitio posteriormente.

Filtros de intención de Android Cuando se instala una aplicación web progresiva a través de esta nueva experiencia mejorada para agregar a la pantalla de inicio, se registrará en el sistema como objetivo para el espacio de URL para su dominio. Esto significa que cuando un usuario haga clic en un enlace que se encuentra dentro del alcance de su aplicación web progresiva, su aplicación se abrirá en lugar de la apertura de Chrome con su PWA en ejecución.

Cuando instala una aplicación web progresiva, observamos su manifiesto de aplicación web y otros metadatos y creamos un APK (Kit de paquete de Android) que se instala en el dispositivo del usuario, lo que puede demorar un momento la primera vez que lo instala un usuario. su aplicación web.

Nota: Cada vez que se modifique el manifiesto de la aplicación web para generar un nuevo APK, no es una buena idea tener manifiestos que se actualicen con frecuencia. Es especialmente importante asegurarse de no usar identificadores específicos del usuario en el manifiesto (como un start_url personalizado por usuario) ya que esto genera un APK único, lo que significa que su tiempo de instalación será mucho más largo de lo que espera. En esa APK definimos un filtro de intención de Android que define cuándo debe abrirse su aplicación web. Por ejemplo, para abrir la aplicación https://airhorner.com/ cada vez que se haga clic en ese enlace, Chrome creará lo siguiente.

<intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="https" android:host="airhorner.com" android:pathPrefix="/" /> </intent-filter>

Esto es increíblemente poderoso, pero no muy flexible. Esto simplemente dice que cuando se hace clic o se intercepta un enlace en Android para todo el dominio de https://airhorner.com/ abre la aplicación.

Pero, ¿qué sucede si no desea que su PWA se abra para todas las rutas en su dominio? Ahí es donde entra en juego la propiedad de manifiesto de la aplicación web de ámbito. El alcance es un ....


Actualización 2019

Ahora Google está abierto a las aplicaciones PWA en Google Playstore, por lo tanto, se podrían usar herramientas como PWA2APK para convertir PWA existentes en aplicaciones listas para Google Playstore. El APK de Android (PWApk) generado por la herramienta se puede cargar en Playstore.

Esta herramienta ha sido tuiteada por Alex Russel, uno de los inventores de PWA.

https://twitter.com/slightlylate/status/1093681791297187840