¿Por qué son mejores las App PWA sobre una App nativa, especialmente para usuarios de Apple?

Reading Time: 4 minutes

Siempre he sido usuario de Android y de hecho lo soy, pero desde hace un tiempo llevo un iPhone en el bolsillo. Ya «me tocaba» ser el sufridor de Apple dentro de la empresa…

Después del párrafo anterior probablemente ya no caigo bien ni a los fieles a Apple ni a los defensores de Android. A los de Android por «haberme pasado al lado oscuro» tan fácilmente, pero de hecho no lo ha sido por muchas razones, pero me voy a centrar en el concepto del que quiero dar mi opinión: las apps de apple, si si el AppStore.

Tienda de Apps de Apple

Siempre he criticado a Apple por su tienda de Apps y ahora como he dicho puedo hacerlo desde la experiencia porque tengo un iPhone XR.

Apple «vende» que su tienda es fantástica porque solo encontrarás aplicaciones de calidad, sin porno, símbolos nácis, temas de drogas, etc etc. Y es cierto que no encuentras esas cosas, pero la calidad de las Apps es la misma que encuentras en Android y en ocasiones incluso peor.

Para colmo como está el tópico de que «los usuarios de Apple están acostumbrados a pagar» pues la mayoría de Apps son de pago. Realmente esto no me parece mal, teniendo en cuenta además que soy desarrollador je je. Pero no es por este motivo, es porque si pago una cantidad justa y no tengo publicidad, sería fantástico. Desde mi punto de vista, pagar Apps estaría mejor si te dan un período de prueba, algo razonable, una hora o dos. Teóricamente esto es posible en Apple pero no en todas las Apps, con lo cual el sistema no sirve. En Android por cierto, esto se puede hacer con todas las Apps.

Apps de Apple desde el punto de vista de un desarrollador

Está claro que esto al usuario (no desarrollador) de Apps no le importa nada. Él quiere descargar su App y listo. Es normal.

Sin embargo esto tiene un aspecto muy importante que le afecta de lleno, aunque no lo crea.

¿Cuántas Apps fantásticas se estarán perdiendo los usuarios de Apple debido a la política de desarrolladores?

Este tema no lo conoce mucha gente, como digo, ni les importa, pero el sometimiento que tiene Apple con los desarrolladores es algo exagerado.

Para empezar el mínimo a pagar para tener una cuenta de desarrollador con derecho a subir Apps es de 99€ al año. En Android pagas 20€ como único pago y listo. Ya esto supone una barrera importante. Desarrolladores independientes como yo por ahora sin ánimo de lucro (mis apps personales son gratis y sin anuncios) podría tener Apps en ios, pero «da coraje» tener que pagarle a Apple por tener un escaparate de artículos gratis. ¿Cuantos habrá como yo?…

Por otro lado los permisos que se necesitan para poner en una App… realmente es increíble pero los pasos a seguir en una app con notificaciones serán unos 20, creando unos 10 certificados, y no te equivoques en ninguno, sino vuelta a empezar.

Hay muchos más temas (que ya hablaré en otro post) pero para finalizar el tema de la «review». Cuando un desarrollador envía una app lista para la tienda pasa por un proceso de revisión. Alguien de Apple necesita identificarse en tu App (debes darle usuario y contraseña) y estudiarla para ver si encuentra alguna esvástica o alguna teta…

¿Hay solución para usuarios y desarrolladores? Si.

La solución se llama PWA. Resumiendo son Apps que se instalan en tu dispositivo, se hace entrando en una web. El sistema de instalación aun no está muy fino en iOS, pero seguro que es por motivos estratégicos. Hice un pequeño video para mostrar como se hace en un iPhone:

La App queda igual que si la hubieras instalado del Apple store, pero con muchas ventajas, como por ejemplo que pesan mil veces menos… en serio señores de Apple esto tenéis que mirároslo no puede ser que una mini App ocupe 100 Megas… tendremos que ser bien pensados y no pensar que intentáis ocuparnos así porque si nuestro iPhone para llenarlo y tener que pensar en que necesito uno nuevo más grande…

¿Qué es lo malo de una PWA?

Realmente lo peor es el «escaparate», eso se pierde. Es decir, la tienda de apps. Cuando alguien piensa en buscar una herramienta o juego, piensa en ir a la tienda y buscarla. Otra gente puede ir a buscar en google pero hay que ser más específico en los términos de búsqueda o saldrán webs informativas en lugar de Apps o PWAs que realmente es lo que estás buscando. En la tienda de Apps, con términos más simples solo aparecen apps. Esta es la diferencia.

Con respecto a las tiendas Google ya ha avanzado en este aspecto pues se pueden subir PWAs a la tienda, sin embargo la forma de hacerlo a mi personalmente no me gusta. Supongo que no habrá otra manera más sencilla, por seguridad y organización, pero no me gusta. Hay que generar un APK con android studio y unas características especiales… Solo hay que subirlo una vez, será el «ancla» de la PWA en la store. Para subir actualizaciones solo hay que subir los archivos de la PWA a la web y no hay que subir nada más en el APK.

Lo bueno de este método es que las PWA no son un tipo raro de Apps en la store, simplemente se mezclan con el resto de apps.

En Apple por supuesto no se ha hecho nada de esto, al menos de forma pública.

Yo tengo un pequeño escaparate de PWAs: gratiss.es

gratiss.es

Futuro

El futuro pinta espectacular para los que desarrollamos PWAs. Se están integrando todo tipo de servicios y APIs, sobre todo por parte de Google en Chome y de Mozilla. Lento por ahora por parte de Apple.

Además cada vez más webs ofrecen la instalación, esto es … se transforman en PWA y puedes instalarlo en casi cualquier dispositivo móvil o PC.

¿Como instalar una PWA en un iPhone o un iPad?

Reading Time: < 1 minute

Para ir al grano aquí está el vídeo, después dejo algo de verborrea:

Instalar una PWA en un iPhone

Este es uno de los escollos que le faltan a las PWA para triunfar más aun. La instalación no es lo más fácil del mundo y no lo es especialmente en iPhone.

Hay que pulsar en compartir y después añadir a la pantalla de inicio. Está algo oculto.

Es algo raro teniendo en cuenta que Apple fue uno de los precursores de esta tecnología. Pero en este aspecto no han avanzado mucho.

No es así en los casos de Android, Windows e incluso en Mac, donde la instalación es mucho más sencilla y desde el primer momento se ofrece la posibilidad de instalar.

Por cierto, la PWA que aparece en el video es una de las mías y la podéis probar en www.lista-compra.com (también la tengo en la Play store pero no viene a cuento 🙂

El «nuevo mundo» de las PWA

Reading Time: 5 minutes

Para empezar… definamos ese «nuevo mundo»

¿Has pensado alguna vez que las Apps de las tiendas de Google y Apple son un paso atrás?. A mi como desarrollador se me pasa siempre por la cabeza, el atraso que es que los usuarios tenga que hacer «algo» para tener todas las novedades. Las PWA podrían ser el futuro.

Una PWA o Progressive Web App, según la wikipedia es:

Progressive web applications (PWAs) are web applications that load like regular web pages or websites but can offer the user functionality such as working offline, push notifications, and device hardware access traditionally available only to native applications. PWAs combine the flexibility of the web with the experience of a native application.

https://en.wikipedia.org/wiki/Progressive_web_applications

Traduciendo y yendo al grano son webs que al entrar te ofrecen al usuario instalación, especialmente en Android pero también en iPhone, Windows y Mac. Además una vez instalada funcionan muy similar a como lo haría una App nativa: funcionamiento offline, notificaciones push, acceso a hardware y más.

Si, con el mismo código generas una App para el 95% de los usuarios y contextos, llama la atención ¿verdad?

Por mi parte, para aprender lo máximo posible sobre PWAs lo he llevado a la práctica publicando un pequeño juego que desarrollé, el típico juego de memoria SIMON, si te interesa puedes probarlo e instalarlo (por supuesto) aquí: http://gratiss.es/juego-simonjr/

¿Y para que quiero una web offline?

Muchos ya conocéis la respuesta, pero otros seguramente no lo sabréis y la respuesta es muy fácil: Evidentemente una web de noticias, por ejemplo, no tiene demasiado sentido tenerla offline (aunque también), pero una herramienta web sería muy útil tenerla siempre a mano con un icono en el escritorio y notificaciones push.

Esa es la respuesta, sirve especialmente para herramientas o juegos, imaginemos por ejemplo una App simple de lista de tareas. Es muy fácil hacer una web app que gestione una lista pero si el usuario no la tiene siempre a mano y sincronizada no es útil (ni contemporánea). Pues esto lo solucionan las PWA.

El desarrollo web está de moda

Muchos se echarán las manos a la cabeza al leer esto, pero yo tengo la absoluta convicción de que el futuro de las apps es híbrido o incluso web 100%, tengo pendiente escribir algo específicamente sobre esto.

Actualmente empresas grandísimas con muchos recursos económicos hacen webs híbridas. Es una web embebida dentro de un código nativo (android e iphone). Evidentemente empresas pequeñas también lo hacen. ¿Cómo no va a ser beneficioso desarrollar una única App (con un único código) y poder publicarlo tanto en android como en iphone? ¡Ah si!, perdón, no es beneficioso para los desarrolladores puros nativos, un abrazo para todos ellos por cierto 🙂

Las PWA son un paso previo. Un gran paso previo. No es necesario subir una app a ninguna tienda, es simplemente eso: una web que se puede instalar. Teóricamente son un primer paso para que posteriormente el usuario, contento con el funcionamiento que le aporta el servicio que le da la PWA, acabe por instalarse la app de la tienda (probablemente híbrida también, de hecho, el mismo código). Pero el funcionamiento es tan parecido o tan potente que probablemente no haya necesidad de instalarse una app con lo que para muchos usuarios conlleva: buscar la app en la tienda, saber la clave de descarga, tener espacio en el móvil, etc, etc.

¡Parece que todo son ventajas! pero… no es oro todo lo que reluce.

¿Por que no triunfan las PWAs de forma masiva?

Evidentemente no todo son ventajas, el principal problema es que son muy muy nuevas y se va asumiendo poco a poco. Chrome (como no podía ser de otra forma) ha sido la primera en incorporarlas sobre todo en Android, al entrar en una PWA desde Android en chrome te ofrece la posibilidad de instalarla. Y digo bien con «instalar» ya que no es solo un acceso directo a una web, sino un espacio para los archivos y recursos necesarios, igual que una Aplicación nativa.

En Windows y Mac también se pueden instalar, pero el navegador no te ofrece la posibilidad nada mas entrar (no tardará mucho en hacerlo), hay que hacerlo a través del menú de tres puntos del navegador, ahí está la posibilidad de instalar.

Así se ve al abrir la PWA instalada en un Mac.

En iOS sorprendentemente también es posible pero usando Safari (tiene sentido que sea en safari porque es algo muy íntimo con el sistema operativo) evidentemente no ofrece la instalación pero pulsando en «compartir» se puede añadir a la pantalla de inicio y queda prácticamente como una app.

Tiene por tanto el handicap de que no es tan fácil instalar como podría ser, algo que contra resta lo fácil que es tenerla instalada y desarrollar una PWA, nada que ver con una App de la store. De todas formas, no creo que tarden mucho en estandarizar todo el sistema.

¿Que características tiene que tener una web para ser una PWA instalable?

Son solo cuatro puntos a tener en cuenta pero se deben cumplir de manera exhaustiva:

  1. Incluir un manifest.json (imprescindible que incluya un short_name)
  2. Icono png de 192×192 píxeles
  3. Service workers activado
  4. El dominio donde está la PWA debe ser https

Vamos punto por punto:

manifest.json e icono

Es un archivo JSON que describe las características de nuestra PWA. Yo lo he resumido al mínimo. Leerás en otros sitios la cantidad de iconos que puedes poner… si, tantos como te alcance la paciencia, pero realmente solo necesitarás el de 192px cuadrado en PNG, puede llevar transparencia.

Otros valores importantes son el short_name, que es el que se mostrará en el escritorio tras instalar (debajo del icono); Y la start_url que es el punto de inicio de la PWA.

Así tu manifest puede tener esta pinta:

{
 "short_name": "MyApp",
 "name": "This is my cool App",
 "icons": [
    {
    "src": "icon_192x192.png",
    "type": "image/png",
    "sizes": "96x96"
    }
 ],
 "start_url": "index.html"
}

Y hay que enlazarlo en la cabecera del html así:

<link rel="manifest" href="/manifest.json">

Serviceworkers

No lo conozco con detalle pero es una especie de proxy para el manejo de urls dentro de la PWA y también hace de caché de archivos. Así la PWA podrá funcionar sin internet mostrando las imágenes que tenga cacheadas y navegando por las distintas páginas que esté compuesta.

También es un servicio que se queda funcionando en segundo plano y sirve por ejemplo de listener para mostrar notificaciones push.

No pongo el código porque es demasiado largo, si alguien está interesado puedo enviárselo sin problema. Os dejo un enlace donde Google lo explica con pelos y señales y deja código para que utilicéis: https://developers.google.com/web/fundamentals/codelabs/offline/?hl=es

HTTPS

Esto es un requisito pero debería ser obligatorio en todas tus webs puesto que la tendencia actual es hacerlo todo con el protocolo seguro. Servicios como este y muchos otros «obligan» a usar https para que funcionen, de hecho para instalar el service workers es necesario hacerlo por protocolo seguro.

Tengo pendiente otro post a cerca de «securizar» tu dominio pero se resume en instalar un certificado en tu servidor. Se puede adquirir pero hay un servicio gratuito que lo hace todo, es Let’s Encrypt.

Conclusión

Así que como verás no es tan complicado hacer una PWA y tiene multitud de ventajas. Como he dicho antes simplemente son webs que se instalan pero para que sean todo un éxito pasa por que estandaricen la forma de ofrecer la instalación y porque no… tiendas de PWAs que ya hay algunas, por ejemplo esta que he montado yo 🙂 https://gratiss.es