PWA: La nueva generación de aplicaciones web

¿Quien no ha oido hablar de las PWA en los últimos meses? Si eres una de esas personas que aún no saben lo que es una PWA, o simplemente quieres conocer un poco mejor de que se trata, sigue leyendo.

PWA es el acrónimo de Progressive Web Apps y se trata de un tipo de aplicaciones web donde vamos a incorporar características propias de aplicaciones nativas haciendo uso de los últimas avances en los navegadores web, diferentes web API y un conjunto de buenas prácticas. Por ejemplo vamos a poder hacer uso de las notificaciones PUSH, una de las capacidades más populares de las aplicaciones nativas.

Para entender por qué este nuevo modo de desarrollar aplicaciones web esta cobrando tanta importancia solo hay que decir que su impulsor es Google y que otros gigantes de la tecnología como Apple, aunque de forma un poco reticente, se están uniendo a esta tendencia implementando en sus navegadores las características necesarias para que una PWA pueda funcionar correctamente.

Los principios de una PWA

Una PWA ha de cumplir 3 principios:

• Tiene que ser segura y generar confianza. Tiene que cargar instantáneamente y nunca verse afectada por problemas de red.
• Tiene que ser rápida. La interacción del usuario con la aplicación debe sentirse como si fuera una aplicación nativa. Las transiciones, la navegación, las animaciones, todo debe funcionar fluido.
• Tiene que ser atractiva. Las PWA se pueden instalar en el dispositivo como si fueran aplicaciones nativas, pero sin necesidad de hacerlo a través del market. Pueden recibir notificaciones push, e interactuar con otras capacidades nativas de los terminales. Ademas pueden garantizar una experiencia inmersiva al poder funcionar a pantalla completa.

Como veis, para cumplir los tres principios es necesario dotar a las aplicaciones web tradicionales con capacidades que hasta ahora solo estaban disponibles en aplicaciones nativas. Para ello ha sido necesario implementar nuevas características en los navegadores web, aquí es donde Google va más avanzado.

En general, las aplicaciones web progresivas se basan en una colección de tecnologías, conceptos de diseño y web APIs que funcionan en conjunto para proporcionar una experiencia de usuario similar a una aplicación nativa.

La tecnología detrás de una PWA

Service Workers

El service worker es el motor principal de una PWA. A alto nivel, la primera vez que accedes a una PWA desde tu navegador, el service worker se inicia como proceso dentro del navegador y ya siempre quedará corriendo, incluso cuando cierres la PWA, él seguirá funcionando.  Se encarga de gestionar todo el trafico de red de tu PWA, las notificaciones push, la cache para la carga instantánea, la actualización de la app en segundo plano y muchas cosas más.

A nivel más técnico, un service worker es un archivo JavaScript, que se ejecuta en segundo plano y se basa en eventos. Debido a que es un elemento bastante complejo existen soluciones que nos ayudan a generar un service worker preconfigurados , siendo una de las más conocidas Workbox. Para los que queráis profundizar, podéis echarle un vistazo a la especificación del W3C.

No olvidéis, que para que un service worker funcione, el navegador web tiene que soportarlo. Desde esta web podéis chequearlo: Is service worker ready?

App Shell

El App Shell es un concepto de diseño mediante el cual la carga inicial del esqueleto de la aplicación es lo primero que se hace, mientras que el contenido de la aplicación se carga después. Adoptar el uso del App Shell no es obligatorio, pero si una buena practica para lograr una carga instantánea de nuestra aplicación.

Con este modelo, podemos cachear con diferentes estrategias el esqueleto básico de nuestra app y el contenido. Idealmente el App Shell tiene que estar diseñado para ser lo minimo posible y que la carga sea lo mas rápida posible, consiguiendo de esta manera una sensación de aplicación nativa.

La carga rápida de una web es un tema muy muy importante, ya que hay estudios que demuestran que el 53% de usuarios abandonan una web si tarda en cargar mas de 3 segundos.

En este sentido, muchos frameworks están adoptando este modelo y por ejemplo a partir de Angular 5 se ofrece un modelo de App Shell.

Cache

Para dotar nuestra PWA de capacidad para trabajar offline y cargar de manera instantánea es necesario disponer de un sistema para almacenar datos. Los tradicionales API web no nos sirven para este caso de uso, por eso se ha desarrollado un nuevo cache API para poder ser usado directamente desde los service workers.

Las dos opciones con las que podemos trabajar en nuestra PWA son el cache API y el IndexedDB API. Cada uno de ellos recomendado para almacenar diferentes tipos de datos:

• Para los recursos localizables mediante URL, se recomienda el uso de la cache API desde el service worker.
• Para el resto de los datos, por ejemplo el estado de la app, se recomienda el uso de IndexedDB.

Por ejemplo, para almacenar nuestro App Shell, lo ideal sería usar el cache API, ya que esta compuesto por ficheros, JS, CSS, imagenes, etc …

App Manifest

El app manifest es un archivo JSON con un formato especifico donde caracterizamos nuestra PWA y sus metadatos. Es la clave para convertir nuestra aplicación en un una aplicación instalable. En ese fichero se especifica el nombre, la URL de inicio, el tema, los iconos. La especificación completa la podéis consultar desde aquí.

Un ejemplo de manifest.json

{
  "short_name": "SG PWA",
  "name": "Solid Gear PWA example",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "launcher-icon-2x.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "launcher-icon-4x.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "index.html?launcher=true"
}

¿Como pruebo una PWA?

Cuando accedes a una PWA desde un navegador sin soporte, la experiencia de usuario es similar a la de cargar una página web normal. No te darás cuenta de que es una PWA.

La magia solo se percibe cuando accedes desde un navegador/dispositivo con soporte. Si eres usuario de Android, instala Chrome y accede a cualquiera de las apps de PWA ROCKS. Si eres usuario iOS aún tendrás que esperar un poco más.

Como ejemplo para el articulo, os dejo unas capturas de mi dispositivo al acceder a la web de Telegram.

 

¿Quieres desarrollar una PWA?

Llegados a este punto seguro que ya tiene mas claro lo que es una aplicación web progresiva y ahora estarás pensando en como crear tu propia PWA o como probar alguna (aunque seguramente ya lo hayas hecho sin darte cuenta).

Para desarrollar una PWA puedes empezar desde 0 creandote tu propio App Shell, diseñando la estrategia de cache, creando un service worker, etc… y quizá sea la mejor manera de aprender los conceptos. Si ya eres desarrollador web y más o menos tienes claro de que va el tema, existen multitud de esqueletos y App Shell a partir de los cuales puedes comenzar a desarrollar tu app ahorrando mucho tiempo.

Personalmente los últimos días he estado jugando con un toolkit que ha publicado la gente de Ionic. Como ellos indican, han juntado todo lo necesario para crear una buena PWA:

• Ionic (Si no lo conocéis, es un framework open source, para el desarrollo de aplicaciones móviles, web y ahora PWA, basadas en HTML5, CSS y JS)
• Routing
• Stencil
• Push Notifications setup
• Showing a toast when a new version of the PWA is available
• Unit Tests
• Pre-Rendering
• zero config lazy-loading
• zero config code-splitting
• Polyfills selectively loaded depending on the browser support
• ES6 by default for new browsers, ES5 for older browsers
• Everything needed for an add to homescreen PWA (service worker, web manifest and iOS meta tags)
• lazy-img component for lazy loading below the fold images

Hoy no vamos a entrar más a fondo en como construir una PWA. En el próximo articulo veremos como crear una PWA desde cero usando este toolkit y todas las características que nos ofrece de serie.

¿Qué esta cambiando con la llegada de las PWA?

Para aquellos que nos dedicamos al desarrollo de aplicaciones nativas, nos puede parecer que la llegada de las PWA supondrá un cambio en las reglas del juego. Las PWA como ya hemos dicho, aúnan lo mejor de los dos mundos y es verdad que tenemos que tomarlas muy en serio.

La clave del éxito de las PWA se basará en tres características que aún no habíamos comentado:

• Segura: Las PWA solo funcionan vía HTTPS para evitar intromisiones y para garantizar que el contenido no se haya manipulado.
• Descubrible: se puede identificar como «app» gracias al manifiesto W3C y al alcance de registro de service worker, lo que permite que los motores de búsqueda la encuentren.
• Fácilmente distribuible : Para mi la más importante de todas. Acceder a una PWA es tan fácil como conocer la URL. Es una característica universal de la web, fácil de distribuir, de compartir y familiar para la gran mayoría de los usuarios de internet.

Con las características que hemos visto en este articulo, podríamos implementar gran cantidad de las aplicaciones que hay actualmente en los market ofreciendo la misma experiencia de usuario y casi seguro, con un coste de desarrollo mucho menor. Pero ¿Qué pasara con los market y toda la monetización que generan?. Es una guerra oculta entre los intereses de los dos más grandes y donde Apple parece que va perdiendo fuelle!.

Desde luego 2018 va a ser un año muy movido.

Referencias

• https://developers.google.com/web/progressive-web-apps/checklist
• https://github.com/hemanth/awesome-pwa
• https://github.com/TalAter/awesome-progressive-web-apps
• https://developers.google.com/web/fundamentals/?hl=en
• https://developers.google.com/web/fundamentals/payments/
• https://developers.google.com/web/fundamentals/security/credential-management/
• https://www.w3.org/TR/service-workers/
• https://www.joshmorony.com/building-a-cryptocurrency-price-tracker-pwa-in-ionic/
• https://pwa.rocks/

 Otros artículos relacionados

• https://ahorasomos.izertis.com/solidgear/working-offline
• https://ahorasomos.izertis.com/solidgear/que-nos-deparo-la-movilidad-en-2017-y-tendencias-para-2018?lang=es