Cómo hice que mi web sea PWA

En este artículo voy a abordar que es una web PWA, siglas en inglés de Progressive Web App ó una aplicación web progresiva y cómo conseguí que mi web lo sea.

Se necesita tener algo de conocimientos técnicos ya que hay que meter código en html y javascript. Si te atreves te aseguro que no es complicado siguiendo los pasos, pero tu web tiene que cumplir unos requisitos y va a depender de cómo esté desarrollada el que sea más o menos difícil conseguir pasar a PWA.

Lo primero es explicar qué significa que una web sea una PWA. Este parámetro me lo encontré por primera vez ejecutando la auditoría Google Lighthouse para ver como mejorar la calidad de una página web. Desde entonces lo he estado ignorando hasta que he tenido algo de tiempo para dedicar a estudiar qué es y por qué es importante.

Una PWA (Progressive Web App) es una aplicación web que se comporta como una aplicación nativa y que se puede instalar en dispositivos móviles y ordenadores. Las PWA utilizan tecnologías web modernas para ofrecer una experiencia de usuario mejorada, como la capacidad de trabajar offline, el acceso a notificaciones push y el acceso a la cámara y el micrófono.

Convertir una web en PWA tiene una serie de ventajas:

• En primer lugar, las PWA se pueden instalar en el dispositivo del usuario, lo que significa que la aplicación estará siempre disponible, incluso si el usuario no tiene conexión a internet.
• En segundo lugar, las PWA ofrecen una experiencia de usuario más fluida y rápida, ya que se cargan más rápido que una página web tradicional. Además, las PWA tienen la capacidad de enviar notificaciones push, lo que permite a los usuarios estar al tanto de las actualizaciones y cambios en la web.

No olvidemos que esto ha sido promovido por Google para hacer uso de las tecnologías más novedosas y potentes de los navegadores. Es decir, combinan lo mejor de las webs y lo mejor de las aplicaciones nativas. La intención es ofrecer a los usuarios una experiencia que esté más cerca de una app nativa a una app web. Las aplicaciones web se caracterizan porque no necesitan de ningún sistema operativo para ser soportadas si no que lo hacen a través de páginas web en navegadores. Gracias a las aplicaciones web progresivas encontramos un híbrido que funciona como apps nativas pero funciona al igual que una página web.

Mi web está desarrollada directamente en código html, css y javascript, y los pasos que voy a enumerar son para este tipo de páginas web. Si tu web está basada en un CMS como WordPress, Prestashop o Shopify, tendrás que buscar cómo adaptarla para tu CMS en particular. En este enlace he publicado un pequeño tutorial sobre Cómo hacer una PWA de tu web en WordPress. Si ese es tu caso ya no haría falta que siguieras leyendo a no ser que tengas curiosidad. Para los que tengan una web como la mía... Vamos al tema.

1. Crear el archivo manifest.json

Este archivo de manifiesto es el que va a definir las propiedades de la aplicación, como el nombre, los iconos, el color del tema, etc. En realidad este archivo ya lo tenía creado dentro de la carpeta /favicon/, cuando generé los archivos de icono en sus diferentes tamaños gracias a esta plataforma online: https://www.favicon-generator.org/.

Es muy sencilla de usar y solo se necesita un archivo de imagen png, jpg o gif del logo. Cuando se han generado todos los archivos que se pueden descargar la web muestra en la pantalla el enlace para descargar esos archivos y el código html que hay que incluir en la sección head.

Fuente: Favicon.ico & App Icon Generator

El código del archivo manifest.json que crea esta herramienta es este:

{
 "name": "App",
 "icons": [
  {
   "src": "\/android-icon-36x36.png",
   "sizes": "36x36",
   "type": "image\/png",
   "density": "0.75"
  },
  {
   "src": "\/android-icon-48x48.png",
   "sizes": "48x48",
   "type": "image\/png",
   "density": "1.0"
  },
  {
   "src": "\/android-icon-72x72.png",
   "sizes": "72x72",
   "type": "image\/png",
   "density": "1.5"
  },
  {
   "src": "\/android-icon-96x96.png",
   "sizes": "96x96",
   "type": "image\/png",
   "density": "2.0"
  },
  {
   "src": "\/android-icon-144x144.png",
   "sizes": "144x144",
   "type": "image\/png",
   "density": "3.0"
  },
  {
   "src": "\/android-icon-192x192.png",
   "sizes": "192x192",
   "type": "image\/png",
   "density": "4.0"
  }
 ]
}

Esta herramienta hizo su función cuando la necesité pero no genera todos los iconos ni el archivo manifiesto correcto para pasar la validación de la auditoría Lighthouse. Veamos como solucionar estos errores de validación:

• Necesita estar configurado para «custom splash screen». Para resolver este error seguí las siguientes instrucciones para desarrolladores: https://developer.chrome.com/docs/lighthouse/pwa/splash-screen/
  Es por esto que en el archivo manifest hay que indicar: el nombre de la aplicación (name y short_name); el color de fondo de la aplicación cuando se carga (background_color); el color del tema (theme_color) porque es el color principal de la aplicación que se refleja en la barra de estado del dispositivo; la visualización (display) que define cómo se muestra la aplicación, puede ser «standalone», «fullscreen», «minimal-ui» o «browser» y la orientación (orientation) que define la orientación predeterminada de la aplicación, puede ser «portrait», «landscape», «portrait-primary», «portrait-secondary», «landscape-primary» o «landscape-secondary». Además, dentro del atributo icon tiene que estar incluido el de tamaño 512x512, tiene que ser en formato png y tiene que existir el archivo. Esto lo vermos en el siguiente punto.
• Se necesita tener creado un archivo de icono de tamaño 512x512 px cómo mínimo. Este tamaño de icono he encontrado que sí que lo proporciona esta otra herramienta online: realfavicongenerator.net. Es más configurable que la anterior ya que permite indicar entre otras cosas, el color del tema (theme color), el color de fondo (background color), el nombre de la aplicación. El paquete descargable que contiene todos los archivos de los iconos también tiene el archivo de manifiesto llamado site.webmanifest. Hay que renombrarlo por manifest.json para poder abrir y ver el contenido en un editor de código, o incluso directamente un navegador como Firefox. En el archivo generado por la segunda herramienta vienen definidos todos los atributos indicados en el punto anterior menos la orientación.
  

  {
      "name": "CLL Diseño y desarrollo web",
      "short_name": "CLL Diseño y desarrollo web",
      "icons": [
          {
              "src": "/android-chrome-192x192.png",
              "sizes": "192x192",
              "type": "image/png"
          },
          {
              "src": "/android-chrome-512x512.png",
              "sizes": "512x512",
              "type": "image/png"
          }
      ],
      "theme_color": "#263238",
      "background_color": "#f5f5f5",
      "display": "standalone"
  }

  Hay otro atributo más que añadir para pasar la validación de Lighthouse, display_override, pero no me voy a extender mucho sobre ello. Si quieres saber más visita este enlance: https://web.dev/articles/window-controls-overlay?hl=es-419
• El archivo manifest necesita tener definido el color del tema (theme_color) y añadir este color como meta en el head. Este atributo ya lo vimos antes pero además hay que añadir el meta tag dentro del head de la página index.html.

  <meta name="theme-color" content="#263238">

• El archivo manifest necesita tener definido un icono «maskable». Para resolver este error seguí las siguientes instrucciones para desarrolladores: https://developer.chrome.com/docs/lighthouse/pwa/maskable-icon-audit/
  Básicamente generé el icono mediante la herramienta indicada y luego añadí el código en el archivo manifest.

2. Crear los archivos Service Worker

En este punto vamos a meternos con el código javascript. Primero hay que crear e incluir el código para registrar el Service Worker. Y luego hay que crear el propio código de Service Worker para caché.

• Crear archivo regist_serviceWorker.js. Este código verifica si el objeto «serviceWorker» está disponible en el objeto «navigator» del navegador web del usuario. Si está disponible, registra el Service Worker especificado en el archivo «Service_Worker.js» ubicado en el directorio que se indique.

  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
      navigator.serviceWorker.register('./js/Service_Worker.js').then(function (registration) {
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
      }, function (err) {
        console.log('ServiceWorker registration failed: ', err);
      });
    });
  }

  Una vez que se registra el Service Worker, se devuelve una promesa que puede ser manejada por los métodos «then» y «catch». Si se registra correctamente, el método «then» se ejecuta y muestra un mensaje en la consola del navegador web con el alcance del Service Worker registrado. Si falla, el método «catch» se ejecuta y muestra un mensaje de error en la consola con la información del error.
• IMPORTANTE: Para invocar a este archivo hay que incluir este código antes del cierre de body en index.html:

  <script type="text/javascript" src="js/regist_serviceWorker.js"></script>

• Crear archivo Service_Worker.js. Este es el código que va a habilitar la funcionalidad offline y cacheado de recursos. En el archivo Service Worker, definiremos un nombre y una versión de la caché, así como las URL que queremos que se almacenen en caché. En mi caso he tomado el ejemplo de código que proporciona Google para los desarrolladores aquí: https://googlechrome.github.io/samples/service-worker/basic/ adaptando las urls a almacenar.
• Comprobar que funcione. Una vez subidos los archivos js y las modificaciones en index.html a nuestro servidor, visualizamos la página web en un navegador. En las herramientas para desarrolladores del navegador podemos ver la Consola y allí encontramos el resultado de la ejecución del código creado:
  

Con esto ya hemos terminado la parte de codificación.

3. Adaptar las imágenes a Webp

Esta mejora no es uno de los aspectos específicos que valida Lighthouse en cuanto a los mímimos requisitos PWA, pero está relacionado de manera indirecta ya que si que es un aspecto que valida en la auditoría para Performance o Rendimiento de la web y por tanto, es un punto de mejora para pasar el primer punto que valida que la web sea suficientemente rápida en cargar en dispositivos móviles.

Pero hay que tener en cuenta que este formato no es compatible con todos los navegadores o sus versiones. Por ello a la hora de implementar que las imágenes se sirvan como webp hay que añadir código para que sólo se sirvan cuando el navegador soporte este formato de imagen y en caso contrario se siga usando el formato jpg o png.

Esto se consigue con algo de código javascript y código html en cada imagen a mostrar. Y por supuesto, hay que generar el archivo webp para cada una de las imágenes jpg o png que tenemos. Lleva algo de tiempo explicar los pasos así que lo voy a dejar para otro artículo del blog.

4. Comprobar que la web cumple con los estándares PWA

Fuente: https://github.com/GoogleChrome/lighthouse/blob/main/docs/scoring.md

Ahora que ya hemos realizado los puntos anteriores es hora de ver si nuestra web cumple con una PWA. Recordad que debe ser rápida, confiable y segura, y ofrecer una experiencia de usuario óptima en cualquier dispositivo y conexión. Para comprobar que cumple con los estándares y funcionalidades de una PWA seguiremos como mínimo los siguientes pasos:

• Ejecutar la auditoría Lighthouse para ver el valor que nos da para PWA. Esta auditoría va a validar una serie de aspectos que ya hemos visto anteriormente y que podéis ver de nuevo aquí en inglés: https://developer.chrome.com/docs/lighthouse/pwa/. Si no pasamos los mínimos necesarios la herramienta nos va a dar en el detalle de cada punto cuál es la solución.
• Comprobar que hemos subido el archivo manifest.json y que hemos incluido el código para enlazarlo en el head.
• Comprobar que hemos subido los archivos regist_serviceWorker.js y Service_Worker.js, y que hemos incluido el código para ejecutar el script del primero al final de body.
• Comprobar que tu web resuelve como https y por tanto es una web segura y cumple con el requisito de privacidad y seguridad para el usuario.

Resultado favorable auditoría Lighthouse para escritorio

Resultado favorable auditoría Lighthouse para móvil

5. Instalar la PWA en dispositivo móvil o escritorio

Ahora ya podemos instalar la aplicación en nuestro ordenador o en nuestro móvil. Yo he optado por hacerlo en el ordenador que uso habitualmente, un iMac.
Desde el navegador Chrome pulsamos en los 3 puntitos arriba a la derecha y seleccionamos la opción «Instalar aplicación (o el nombre que le hemos dado)».

Captura 1 instalación PWA en escritorio

Captura 2 instalación PWA en escritorio

Captura 3 instalación PWA en escritorio
Ya tenemos instalada la aplicación que por defecto se nos ha guardado en Aplicaciones > Aplicaciones de Chrome.
También podemos probar a desinstalarla seleccionando esa opción del menú que aparece haciendo clic en los 3 puntos.

Captura 4 instalación PWA en escritorio
Para móvil se tienen que seguir unos pasos similares pero tienes que verificar que el navegador soporta este tipo de instalación.