¡Crea tu PWA!

Concepto de PWA.

Las siglas PWA representan PROGRESSIVE WEB APP, el cual es un concepto en el que el desarrollo de páginas web se percibe bajo el modelo de aplicación. La página web será servida en una url como tradicionalmente ha sido, pero adicional a ello, tendrá la alternativa de ser descargada en el dispositivo local creando un ícono y posteriormente una UI bastante similar a la de una aplicación.

La opción es algo que nos ofrece el buscador de forma intuitiva cuando nuestra website cumple con una serie de requisitos... entonces, un ícono con un mensaje de instalación aparecerá en la barra de búsqueda.

Requisitos.

1. Necesitamos una serie de íconos conocidos como Favicons con los que se identifica nuestra web. Usualmente tenemos un archivo .jpg .jpeg .png En cualquier caso podemos ir a la siguiente página https://favicon.io/favicon-converter/ arrastramos nuestra imagen dentro del box y descargamos. Eso nos generará un .zip con varios archivos que incluyen:

• favicon.ico
• 2 imágenes favicon.png de 16x16 y 32x32
• apple-touch-icon.png
• 2 imagenes .png con dimensiones de 192x192 y 512x512 (estos serán los logos, así que bien podemos cambiar el nombre a logo192.png y logo512.png)
• site.webmanifest que en realidad es un manifest.json (el cual es otro de los requisitos).

Necesitaremos otros archivos que van a acompañar los favicons que ya hemos generado.

Necesitamos dos logos más... uno de 256x256 y otro de 384x384
Para eso, podemos utilizar la siguiente website: https://imageresizer.com/
Por default, image resizer va preservar el aspect ratio de tu imagen pero presionando en la opción correcta, podemos definir las dimensiones como las queremos. Además, nos aseguramos de que el background sea el que queremos (ya sea sólido, o transparente) y descargamos.

Ya teniendo las imágenes, necesitamos una última a la que nos vamos a referir como maskable. Tomamos la imagen que hemos venido usando para generar nuestros favicons, y esta vez usaremos la website: https://maskable.app/editor
De las varias opciones de descarga que nos da, escogemos la dimensión que se ajuste a nuestro proyecto. (Yo lo descargué en 192x192).

Todas estás imágenes las vamos a guardar en la carpeta public.

1. Lo segundo que necesitaremos es crear un manifest.json Si estamos utilizando un proyecto creado con CRA, entonces ya tendremos uno. En todo caso, podemos crearlo manualmente o generarlo en esta web: https://app-manifest.firebaseapp.com/

Además de las propiedades que nos da el generator, necesitamos una que se llama icons el cual es un arreglo en donde declaramos los íconos de 192, 256, 384, 512 y el maskable, cada uno dentro de un objeto con las propiedades src, type, sizes:

1. Necesitamos incluir unas meta tag, algunas con propiedades específicas y otras para referenciar el manifest.json y el favicon:
   

2. Necesitamos dos documentos más, los cuales son quizá los más complejos de toda la configuración:

3. service-worker.js

4. serviceWorkerRegistration.js
   La configuración necesaria la vamos obtener de CRA.
   Lo que yo hice fue crear un proyecto nuevo con el siguiente comando:
   npx create-react-app my-app --template cra-template-pwa
   Este comando crea una versión con la configuración de los archivos mencionados antes, listos. Los tomamos y movemos a nuestro proyecto.

Adicional a eso, vamos a copiar estas lineas en nuestro index.js | main.jsx :
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
serviceWorkerRegistration.register();

¡Eso es todo!

Desde el host local tradicional en el que estamos trabajando no vamos a poder ver los resultados en su totalidad. Eso se debe a que el serviceworker está configurado para production no para development.

Lo que podemos hacer es ejecutar el build, y ejecutar el build en un servidor local.P Para eso necesitaremos serve... instalamos npm i serve

luego ejecutamos:
npm run build
serve -s build

Eso nos pondrá un host local disponible con una versión de production. Abrimos el inspector, lighthouse, PWA y hacemos el análisis y si todo ha salido bien tendremos dos confirmaciones visuales:

1. 

2.

Esto es exactamente lo que hice, paso a paso y me funcionó.
Entiendo que puede ser frustrante cuando se sigue un paso a paso y no funciona como funcionó a quien lo escribió. Espero que no sea tu caso, y te haya funcionado.

---

Glosario:

* Aplicación (como se le conoce en Sur y Centro América) se refiere a Aplicativo (como se le conoce en la península Ibérica).

* Barra de búsqueda también se puede conocer como Barra de direcciones.