Web progresiva en Nuxt 3

23 de Enero de 2023

pwa_nuxt

Introducción

Llega un nuevo requisito. Hay que hacer una aplicación mobile para uno de nuestros clientes. Hemos desarrollado unos cuantos proyectos para él y la idea es que dicha aplicación sea la extensión de uno de ellos, donde ofrezca una serie de flujos muy concretos para usuarios que van a estar siempre en la calle. No es nada más que una herramienta de gestión de incidencias, pero con particularidades muy específicas para un caso de uso muy concreto.

En este momento se abren un montón de posibilidades, la mente empieza a trabajar, rebuscando en el baúl de los recuerdos, recopilando información y tratando de organizar las ideas para escoger correctamente el stack a utilizar.

Pero hay un punto importante que nos puede ayudar a elegir. El histórico. Debemos preguntarnos qué hemos hecho hasta ahora y cómo lo hemos hecho. Para los proyectos de este cliente se ha usado Django + Nuxt (Vue), por lo tanto, ¿qué opciones tenemos?

¡Eureka! ¿Podemos hacer una PWA con Nuxt, no?

¿Qué es una PWA?

La progressive web application (PWA) o aplicación web progresiva no deja de ser un proyecto web, tal y como todos lo conocemos, pero con algunas particularidades muy concretas que lo permiten instalar en nuestro dispositivo como si fuese una aplicación del sistema más.

Existen unos requisitos mínimos para que una aplicación se considere una PWA y se pueda instalar:

  • Servirse a través de HTTPS
  • Disponer de un archivo de manifiesto
  • Tener configurado un service worker

El manifest es un archivo json que contiene algunas configuraciones de nuestra aplicación, como son el nombre, descripción, idioma, url del punto de entrada, el color de fondo o el color del tema, iconos, etc.

El service worker es un servicio en segundo plano que hace de intermediario entre la aplicación y el servidor. Éste, por ejemplo, nos puede ayudar con tareas de cacheo y la aplicación se puede servir aún cuando no tengamos conexión. Ejecutar tareas asíncronas periódicas, descargar contenido en segundo plano, etc.

Actualmente el navegador que da más soporte para dicho tipo de aplicaciones son los derivados de Chromium, como Chrome, Edge, Vivaldi, Brave, etc. En ellos podemos saber si una web es instalable si vemos el siguiente icono:

En cuanto a Firefox, no dispone aún de un soporte nativo, pero existe esta extensión que facilita la instalación y gestión.

Safari te permite instalarlas, mediante la opción “Añadir a pantalla de inicio”, aunque no tiene soporte para todas las APIs o funcionalidades que ofrece Chrome.

¿Por qué la PWA y no una app nativa?

Somos conscientes que a veces es difícil escoger la opción correcta y hay muchos elementos que luchan para ganarse un puesto en nuestra decisión. Cada caso tiene sus especificaciones y requiere su análisis, por eso hemos hecho una tabla con algunos aspectos que hemos tenido en cuenta para nuestro caso de uso:

PWA

  • 👍 Se aprovecha el know how de los proyectos anteriores.
  • 👍 Se aprovechan partes del código de los proyectos anteriores.
  • 👎 Habrá que tirar de algún framework para darle una apariencia más mobile.
  • 👍 Agilidad en el despliegues y nuevas releases (ci/cd).
  • 👎 Dependiendo del navegador, no pueden aprovechar el hardware tal y como lo haría una aplicación nativa (por ejemplo al acceder al bluetooth, accelerómetro, etc). En los basado en chromium, sí se puede.

App Nativa

  • 👎 Añadir recursos al proyecto que no tienen el contexto previo.
  • 👎 Stack completamente distinto.
  • 👍 Buena integración con el sistema.
  • 👎 El despliegue puede ser un poco más lento (tienen que pasar por las distintas tiendas).
  • 👍 Pueden aprovechar el hardware al 100%.

Al final esto influye directamente en los costes y para dicho caso de uso, donde es una aplicación bastante pequeña, puede encajar bien la PWA.

Integración con Nuxt 3

Hemos hecho una prueba de concepto con Nuxt 3.0 utilizando la librería nuxt-pwa-module. Está desarrollada por Kevin Marrec, miembro de Nuxt Labs, y pretende ser la oficial en la siguiente iteración de la actual librería oficial.

Es bastante fácil instalarla y sólo hay que seguir los pasos indicados en el propio readme del proyecto. Una vez hecho, sólo serán necesarios algunos pocos retoques en el fichero nuxt.config.ts para terminar de configurarla.

SCR-20221215-kjw

Algunos comentarios:

  • workbox se activa para que se pueda instalar la PWA en local, en modo desarrollo. WB son un conjunto de librerías desarrolladas por Google que facilitan (y mucho) la configuración del service worker.
  • manifest: Como ya hemos comentado, nos permite configurar varios elementos de la aplicación, como el nombre, color del theme, iconos y otros.
  • templatePath: No es obligatorio. Por defecto la librería configura un service worker con una configuración por defecto. Pero a nosotros nos ha interesado utilizar nuestro propio para configuraciones extras.

Para saber si el sw está funcionando correctamente, se pueden abrir las developer tools y ver ahí los logs que expulsa workbox. Algo así:

SCR-20221215-kl6

El sw se usa mucho para gestionar la caché y con la configuración por defecto hay una serie de reglas previamente configuradas. Esa es la razón de dichos logs.

En el apartado del manifiesto podemos ver si se carga correctamente. En el caso que haya algún error, también nos lo mostrará. Si esto ocurre, la PWA no podrá ser instalada.

SCR-20221215-klr

¿UX, qué framework usar?

En el aspecto visual y experiencia de usuario, hay que seleccionar un framework para darle un aspecto más “mobile” y dentro de toda la oferta disponible, hay dos que nos gustan especialmente y destacamos. Aunque, evidentemente, siempre podemos crear nuestro propio system design.

Quasar

Es un framework open-source, con una gran variedad de componentes. Sigue las líneas guía de Material Design. Está diseñado especialmente para SPA, SSR, PWA, BEX, etc.

Vuetify

Este es otro framework de los clásicos, con una gran comunidad detrás. También dispone de una gran variedad de componentes y layouts. Sigue las guidelines de Material Design. Si se desea, tiene una versión enterprise para poder tener soporte de expertos.

Para usarlos en nuxt habrá que crear un plugin.

plugins/vuetify.js

SCR-20221215-kmw

plugins/quasar.js

SCR-20221215-knh

Luego el plugin se puede activar en la configuración de nuxt.

SCR-20221215-ko0

La caché, uno de los pilares

Como hemos comentado, uno de los usos principales del service worker (que no es el único) es gestionar la caché, ya sea de los ficheros estáticos, como de datos recibidos a través de una API para garantizar que la aplicación funcione sin conexión o simplemente por temas de rendimiento.

Aquí os mostramos un ejemplo básico de cómo implementarla para cachear imágenes:

SCR-20221216-d3f

En este artículo se explican muy bien las distintas estrategias disponibles, que resumimos a continuación:

  • CacheOnly: Se usa sólo la caché, por lo tanto, el fichero tiene que estar previamente ahí, si no, dará un 404.
  • NetworkOnly: Justo lo contrario. El asset se va a buscar siempre en el servidor.
  • CacheFirst: Se busca el asset en la caché, si no existe, se carga des del servidor y luego se cachea.
  • NetworkFirst: El asset se va a buscar en el servidor, si no existe ahí, o la conexión está caída, lo va a buscar en la caché. Un ejemplo claro de la PWA en modo offline.
  • StaleWhileRevalidate: El sw sirve el asset de la cache y paralelamente lo va a buscar en el servidor para luego actualizarla.

¿Cómo hacer que la PWA se sienta más como una app?

Si se quiere exprimir al máximo la potencia de las PWA, os facilitamos este artículo super interesante, donde analizan una aplicación de Apple y se explica como se puede implementar cada funcionalidad en una PWA. Funcionalidades descritas:

  • Cómo trabajar sin conexión
  • Descargas en segundo plano
  • Interactuar con otras aplicaciones
  • Actualizar la aplicación en segundo plano
  • Tener un estado sincronizado en la nube
  • Usar teclas de función
  • Menú contextual
  • Actuar como una aplicación predeterminada
  • Integrarse con el sistema de archivos local
  • Barra de título personalizada
  • Widgets en la pantalla de bloqueo
  • Notificaciones emergentes

Y algunas cosas más. Consultad el resumen de funciones.

Como se puede apreciar, para según qué casos, una PWA puede ser una muy buena y potente opción.

Conclusiones

Ya estamos llegando al final del artículo, y por lo que habéis visto, es otro artículo más sobre las PWA, aunque en este caso, se ha enfocado en un caso de uso muy concreto.

Dicha publicación ha sido el resultado de serie de notas recogidas para el fin ya comentado y que esperamos ir desarrollando en futuros artículos.

Comparte este artículo
Etiquetas
Artículos recientes