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