Convertir Gatsby en una PWA: Service Worker y manifiesto de aplicación web

Las aplicaciones web progresivas (PWA) permiten a los desarrolladores ofrecer una experiencia similar a la de una aplicación al usuario. Si a esto le sumamos el excelente rendimiento de Gatsby.js, obtenemos un sitio web increíblemente rápido.

Los pasos de esta guía suponen que tienes un proyecto Gatsby en funcionamiento. Por lo tanto, si aún no lo tienes, puedes empezar a trabajar con Gatsby siguiendo el artículo Primeros pasos de Gatsby. Te sumergirás directamente en la configuración del sitio.

El manifiesto de la aplicación web

El manifiesto de la aplicación web es un breve archivo JSON con metadatos sobre la aplicación web. Proporciona algunas instrucciones para que el navegador sepa cómo comportarse cuando se instala en el dispositivo del usuario.

Para agregar un manifiesto de aplicación web a Gatsby, se puede instalar gatsby-plugin-manifest:

$ npm install --save gatsby-plugin-manifest

Luego, podemos agregar el complemento a nuestra configuración de Gatsby:

gatsby-config.js

module.exports = {  ...  plugins: [    {      resolve: `gatsby-plugin-manifest`,      options: {        name: `Alligator.io`,        short_name: `Alligator`,        start_url: `/`,        background_color: `#FFF`,        theme_color: `#FAE042`,        display: `standalone`,      },    },  ],}

Ahora echemos un vistazo a algunas de las opciones para configurar el manifiesto de nuestra aplicación web .

Iconos

Podemos definir un conjunto de iconos que el navegador utilizará cuando la aplicación se guarde en la pantalla de inicio del usuario. Para ello, tenemos tres opciones disponibles.

1. Automático

Hay dos opciones automáticas disponibles. Con la primera, necesitamos proporcionar a Gatsby.js el tamaño de ícono más grande con los siguientes requisitos previos:

• Al menos 512×512 de tamaño.
• Cuadrado. Si no es transparente, se agregarán barras automáticamente para que lo sea.
• Uno de los siguientes formatos: JPEG, PNG, WebP, TIFF, GIF o SVG.

Luego agregamos la siguiente línea a las opciones del complemento:

gatsby-config.js

icon: `src/images/icon.png`,

Gatsby generará un conjunto de íconos preconfigurados a partir de la fuente proporcionada.

2. Híbrido

La opción híbrida nos da un poco más de flexibilidad sobre qué iconos se generan automáticamente. Seguimos el mismo requisito previo que antes para el archivo de origen y añadimos lo siguiente a las opciones del complemento:

gatsby-config.js

icon: `src/images/icon.png`, icons: [  {    src: `/favicons/android-chrome-192x192.png`,    sizes: `192x192`,    type: `image/png`,  },  {    src: `/favicons/android-chrome-512x512.png`,    sizes: `512x512`,    type: `image/png`,  },],

Aquí podemos proporcionar las iconsconfiguraciones de matriz para los tamaños de íconos deseados.

3. Manual

Con el modo manual, somos responsables de proporcionar los íconos deseados en la carpeta estática, así como de definir todo el manifiesto de la aplicación web .

Especificamos los tamaños de los iconos en las opciones del complemento, omitiendo la iconconfiguración.

gatsby-config.js

icons: [  {    src: `/favicons/android-chrome-192x192.png`,    sizes: `192x192`,    type: `image/png`,  },  {    src: `/favicons/android-chrome-512x512.png`,    sizes: `512x512`,    type: `image/png`,  },], 

Hay algunas opciones más disponibles para anular los valores predeterminados, como la localización y la obtención de datos, que puede encontrar en la página del paquete en el sitio web de npm. También recomiendo visitar los fundamentos del manifiesto de la aplicación web para obtener más información sobre lo que puede hacer cada opción.

El trabajador de servicio

Ahora que tenemos el manifiesto de nuestra aplicación web listo, veamos cómo podemos generar un Service Worker para nuestro sitio. Para comenzar, instalemos gatsby-plugin-offline:

$ npm install --save gatsby-plugin-offline

Luego, podemos agregar lo siguiente a nuestra configuración de Gatsby:

gatsby-config.js

plugins: [`gatsby-plugin-offline`]

Importante: Para que el manifiesto de la aplicación web se almacene en caché, necesitaremos incluir gatsby-plugin-manifest BEFORE gatsby-plugin-offline .

El complemento crea un service worker para nosotros aprovechando la biblioteca Workbox de Google. Obtenemos almacenamiento automático de archivos en caché , lo que permite que las páginas estén disponibles sin conexión después de la primera visita del usuario.

Si su sitio tiene una necesidad específica que requiere un poco más del service worker , puede anular las opciones predeterminadas con una configuración de workbox. Sin embargo, tenga en cuenta que los cambios en los valores predeterminados pueden interrumpir la compatibilidad sin conexión. Asegúrese de consultar los recursos vinculados para obtener más información.

Eliminar el Service Worker

Si descubre que es necesario desactivar la funcionalidad sin conexión, puede eliminar el service worker utilizando gatsby-plugin-remove-serviceworker.

Para ello, primero deberá instalar el complemento de eliminación y desinstalarlo gatsby-plugin-offline:

$ npm install gatsby-plugin-remove-serviceworker$ npm uninstall gatsby-plugin-offline

Luego, puedes actualizar la configuración de Gatsby:

gatsby-config.js

 plugins: [-  `gatsby-plugin-offline`,+  `gatsby-plugin-remove-serviceworker`, ]

Esto garantizará que el trabajador de servicio quede anulado correctamente su registro.

Conclusión

Añadir compatibilidad sin conexión a Gatsby abre muchas posibilidades. Cosas como navegación sin conexión, recursos en caché para tiempos de carga más rápidos y guardar sitios web en las pantallas de inicio de los dispositivos móviles para acceder a ellos más fácilmente. Hay mucho más que puedes hacer con estos complementos y te recomiendo que leas los recursos vinculados a lo largo del artículo.