PWA: Ventajas de utilizar una Progressive Web App

¿Qué son las Progressive Web Apps?

Una Progressive Web App (PWA) es una aplicación web que no depende de ningún sistema operativo, funciona en cualquier navegador e incorpora diferentes funcionalidades nativas del dispositivo desde el que se accede. El objetivo de estas “páginas web” es tener una experiencia similar o igual al de una aplicación nativa, de manera que el usuario no se percate de que está en una PWA.

Características destacables que debe cumplir una Progressive Web App

• Debe ser responsive; es decir, el diseño debe adaptarse a todos los dispositivos.
• Debe utilizar notificaciones push.
• Debe utilizar Service Worker para poder acceder cuando no se tenga conexión, o ésta sea de mala calidad, y poder aplicar los diferentes sistemas de caché.
• Debe poder añadirse al escritorio del dispositivo como acceso directo, con su propio icono, añadiendo el archivo manifest.json.
• Adicionalmente, si se cumplen ciertos requisitos, Chrome mostrará un banner para instalar la web App. Estos requisitos actualmente son: Que el usuario haya visitado la página 2 veces con al menos 5 minutos de diferencia entre visitas, que se haya registrado un Service Worker y que el archivo manifest.json tenga ciertos parámetros obligatorios.
• Rápida: Se deben usar todo tipo de técnicas de WPO para que la carga sea instantánea, que la pantalla no pegue saltos al cargar, que la respuesta de la interfaz sea inmediata, etc.
• Segura: Debe utilizar el protocolo seguro https. Esto es necesario para poder instalar el Service Worker.
• Indexable y enlazable: Las PWA deben ser indexables para poder llegar a ellas a través de los diferentes buscadores.

Ventajas de las PWAs

• Son aplicaciones web, por lo que pueden ejecutarse en cualquier dispositivo que tenga un navegador web, sea en móvil o escritorio.
• No tenemos que descargarlas de ninguna Store. Permiten ser añadidas como acceso directo en el escritorio de nuestro terminal, recuperando así el contenido de manera más ágil, tengamos o no conexión a Internet.
• No ocupan espacio en la memoria del dispositivo ya que no las hemos instalado y estamos accediendo con un acceso directo.
• Permiten el envío de notificaciones push, recordando al usuario que nuestra web sigue ahí o que tenemos contenido nuevo que le puede interesar.
• Ayudan con el tráfico de usuarios.
• Tienen acceso a funcionalidades nativas del dispositivo, como cámara, geolocalización, micrófono, etc.
• Funcionan con el protocolo seguro https.
• Son ligeras y rápidas al cargar, ya que utilizan archivos html, css y js, además de guardar caché del dispositivo.
• Utilizan Service Workers.
• Tienen un coste de desarrollo menor ya que no conllevan todo el trabajo que supone realizar una aplicación nativa que va enfocada a un sistema operativo concreto. No tenemos que crear una versión para cada una, ya que se lanza a través del navegador común a todos, y se adapta a todas las resoluciones.
• Al ser una aplicación web, todas sus urls son enlazables y fáciles de compartir, además de estar indexadas por Google y se puede acceder a ellas a través de su buscador.
• La carga y mantenimiento de contenido es mucho más simple y rápido que en las aplicaciones nativas. Además, no tenemos que volver a descargarla cada vez que hay una actualización de contenido disponible, como ocurre en las apps nativas.

Algún inconveniente siempre hay…

Aunque las PWA cuentan con diversas características que nos resultan beneficiosas con respecto a las aplicaciones nativas, nos encontramos también con algunos puntos débiles:

• Como no se pueden encontrar en las tiendas de apps, no se benefician de su tráfico y no son tan visibles, ya que muchos usuarios solo buscan sus aplicaciones en estas tiendas.
• Tienen acceso a algunas funcionalidades de los dispositivos, pero no a todas, al contrario que las aplicaciones nativas.
• Algunas funcionalidades aún no son compatibles con iOS.

Pero, quién está utilizando PWA hoy en día?

Algunas de las webs más conocidas sacaron sus propias PWAs y vieron cómo sus visitas aumentaban exponencialmente. Algunos ejemplos son:

Twitter Lite: Es la PWA de la empresa Twitter, ocupa menos de un megabyte. Permite ahorrar hasta un 70% de datos y se carga un 30% más rápido.

Facebook Lite: Esta PWA apareció en 2018 manteniendo las características de su app nativa a excepción de Messenger.

Algunos otros ejemplos de PWA son las webs de Alibaba, The Weather Channel, Lancome Paris o el Huffington Post.

Algunos tips para implementar Progressive Web App en tu proyecto.

Uso de Service Workers

Las PWAs utilizan Service Workers: archivos JavaScript que contienen una serie de comandos que el navegador ejecuta en segundo plano. Así, aunque el sitio web esté cerrado, seguirá descargando el contenido imprescindible para funcionar.

Las características más interesantes de los Service Workers son:

Para utilizarlos, necesitamos:

• Soporte de navegador: Para poder hacer uso del Service Worker necesitaremos un navegador compatible.
• Protocolo https: Durante la fase de desarrollo, se puede utilizar un Service Worker a través del “localhost”, ya que se considera un servidor seguro, aunque no lo sea.
• Pueden mantener información mediante la API de IndexedDB
• Son capaces de implementar diferentes sistemas de cacheo.
• Al ser unos proxys de red programables, permiten controlar el modo en que se manejan las solicitudes de red de la página.
• No pueden acceder directamente al DOM, sino que se comunican con las páginas que controlan mediante la interfaz PostMessage

1

App Shell

Además de los Service Workers, las PWAs utilizan también la App Shell o estructura base de la aplicación, que es lo primero que se carga y visualiza. El contenido que se muestra es dinámico y se carga desde Internet.

La estructura base se guarda en la caché del Service Worker desde el momento en que se abre la aplicación, consiguiendo que ésta cargue mucho más rápido y aumentando el rendimiento de la app, además de asegurar que se pueda acceder al contenido cuando no haya conexión.

2

Visualización de la PWAs

Para controlar como se verá la página tenemos un archivo manifest.json donde añadiremos:

Ejemplo de contenido del archivo manifest.json

{
  "name": "Boream",

  "short_name": "Boream",

  "icons": [{

    "src": "/images/icons/icon-128x128.png",

      "sizes": "128x128",

      "type": "image/png"

    }, {

      "src": "/images/icons/icon-144x144.png",

      "sizes": "144x144",

      "type": "image/png"

    }, {

      "src": "/images/icons/icon-152x152.png",

      "sizes": "152x152",

      "type": "image/png"

    }, {

      "src": "/images/icons/icon-192x192.png",

      "sizes": "192x192",

      "type": "image/png"

    }, {

      "src": "/images/icons/icon-256x256.png",

      "sizes": "256x256",

      "type": "image/png"

    }, {

      "src": "/images/icons/icon-512x512.png",

      "sizes": "512x512",

      "type": "image/png"

    }],

  "start_url": "/index.html",

  "display": "standalone",

  "background_color": "#3E4EB8",

  "theme_color": "#2F3BA2"

}

El manifiesto admite una serie de iconos que van destinados a las diferentes resoluciones y sistemas operativos como se puede ver en el ejemplo.

Este archivo debe incluirse en el <head> de nuestra página:

<!-- Add link rel manifest --> <link rel="manifest" href="/manifest.json">

Por desgracia, iOs aún no admite el archivo manifest.json por lo que para poder tener estas propiedades, debemos llamarlas por separado a través de los meta correspondientes:

<!-- Add iOS meta tags and icons -->

<meta name=”apple-mobile-web-app-capable” content=”yes”>

<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>

<meta name=”apple-mobile-web-app-title” content=”PWA Clima”>

<link rel=”apple-touch-icon” href=”/images/icons/icon-152x152.png”>

• name: Nombre legible para la aplicación.
• description: Descripción general de lo que hace la aplicación.
• icons: Proporciona un array de imágenes que pueden servir como iconos de aplicación en diferentes contextos.
• startUrl: Especifica la url que se carga cuando el usuario lanza la aplicación desde un dispositivo.
• display: Define el modo de visualización de la aplicación. Dentro de éste podemos definir los siguientes modos:
  • fullscreen: Se utiliza toda la pantalla disponible. No se muestran elementos del user agent de Chrome.
  • standalone: La aplicación se mostrará como una app independiente, teniendo así su propia ventana, su propio icono en el lanzador de aplicaciones, etc.
  • minimal-ui: La aplicación se mostrará como una app independiente, pero tendrá un mínimo de elementos de interfaz para controlar la navegación.
  • browser: La aplicación se abrirá en una pestaña nueva del navegador o una ventana nueva, dependiendo del navegador.
  • orientation: Orientación por defecto.
  • theme_color: Color por defecto de la aplicación.
  • background_color: Color de fondo de la aplicación.

Lighthouse como auditor de PWAs

Lighthouse es una herramienta automatizada de código abierto, proporcionada por Google y diseñada para mejorar la calidad de nuestras PWAs. Se puede ejecutar como extensión de Chrome o desde la consola, a través de línea de comandos.

Para comenzar, tenemos que añadir la url que vamos a auditar, y Lighthouse genera un informe sobre el rendimiento de la página y nos da una serie de pautas y mejoras sobre el rendimiento de la misma.

3