Tutorial de aplicación web progresiva: cree su primera PWA

Creado por los propios Google y actualmente lanzado a plataformas populares como Windows 10, PWA puede hacer muchas de las cosas que antes eran exclusivas de las aplicaciones nativas, incluidas características como notificaciones automáticas, interfaz de aplicación atractiva, capacidades fuera de línea, instalación de aplicaciones... lo que sea. .

Y es por eso que la aparición de PWA ya no será momentánea, ya que ahora es un movimiento completo a gran escala que podría cambiar fundamentalmente la Web tal como la conocemos. Para los recién llegados, no es demasiado tarde para conocer esta tecnología emergente, ya que el proceso de creación de una PWA ahora se simplifica mucho más que antes, y es adecuado para personas interesadas como usted.

Para sus mejores propósitos de aprendizaje, hoy vamos a crear un PWA completamente funcional usando React, Node.js y Firebase.

requisitos previos

• Versión Node.js >= 8.10
• versión npm >= 5.6

Notas : la versión npm no debería ser un problema ya que su instalación de Node.js siempre viene con la última versión del administrador de paquetes de npm .

1. Cree un SPA con create-react-app

Primero, necesitamos algo sólido en lo que trabajar, y create-react-app es la herramienta perfecta para este propósito.

 npx crear-reaccionar-aplicación mi-PWA
cd mi-pwa
inicio de npm

Los comandos anteriores ayudarán a crear un entorno de aprendizaje basado en React para que pueda trabajar.

Servirlo a través de HTTPS

HTTPS es el nuevo estándar para la web y con la llegada de PWA, solo se ha vuelto más común. Normalmente, un PWA debe servirse a través de HTTPS, ya que los propios trabajadores del servicio no pueden trabajar sin él; pero como estamos trabajando en un entorno localhost, no es necesario.

2. Haz que funcione sin conexión

De forma predeterminada, los trabajadores del servicio de create-react-app deben estar preconfigurados para manejar el almacenamiento en caché sin conexión y la carga de contenido cuando el usuario no tiene conexión o en visitas posteriores.

Un trabajador de servicio es, en pocas palabras, un script de JavaScript que se ejecuta en un subproceso separado de la página y, debido a esto, no tiene acceso a la estructura DOM. Este nuevo enfoque da lugar a características más progresivas que mejoran el rendimiento, ya que los trabajadores del servicio ahora no solo manejan todas las características típicas de un PWA (capacidades fuera de línea, notificaciones automáticas, etc.), sino que también juegan un papel importante en el alivio de los cálculos pesados. de su sitio web en un hilo separado.

Para instalar trabajadores de servicio en su PWA, querrá echar un vistazo a /src/index.js .

En index.js , busque esta línea

 serviceWorker.desregistrar()

Cambie unregister() a register() y sus trabajadores de servicio se registrarán automáticamente cuando ejecute su my-pwa en modo de producción . No se recomienda habilitar los trabajadores de servicio en el modo de desarrollo, ya que puede dar lugar a casos en los que el PWA solo carga activos almacenados en caché y no incluye los cambios locales más recientes.

Para ejecutar su my-pwa en modo de producción:

 compilación de ejecución de npm
compilación de servicio npx 

Después de esto, abra Chrome y vaya a localhost:5000 , inspeccione y verá que los trabajadores del servicio se ejecutan correctamente en la pestaña Aplicación .

Y debajo de la categoría Almacenamiento en caché es donde desea verificar si el contenido sin conexión de su sitio se almacena en caché correctamente.

Notas : existe una solución alternativa para registrar a los trabajadores de servicio en el modo de no producción. Esto se logra eliminando la línea process.env.NODE_ENV === 'production' de src/serviceWorker.js .

Si desea profundizar más en esto y crear sus propios trabajadores de servicio desde cero y no depender de las configuraciones preconfiguradas de React, lo tenemos. En este tutorial, le mostramos cómo crear una aplicación web progresiva sin conexión a partir de una aplicación web simple.

3. Configurar agregar a la pantalla de inicio

Si todo se ha hecho correctamente hasta el momento, debería ver un pequeño icono de instalación (+) al iniciar la compilación de producción de su my-pwa .

Dado que todo se hace automáticamente para usted, probablemente se esté preguntando cómo fue posible todo esto. No te preocupes, por eso estamos aquí.

Para preparar su PWA A2HS (Agregar a la pantalla de inicio), necesitamos un manifest.json . El archivo manifest.json que se envía con su create-react-app es un archivo JSON muy básico que determina cómo aparecen los íconos de su aplicación para el usuario y define su apariencia en la pantalla de inicio. Para personalizarlos, cambie el archivo existente en /public/manifest.json .

 {
  "short_name": "Mi primera PWA",
  "name": "Crea una PWA simple",
  "iconos": [
    {
      "src": "favicon.ico",
      "tamaños": "64x64 32x32 24x24 16x16",
      "tipo": "imagen/icono x"
    },
    {
      "origen": "logo192.png",
      "tipo": "imagen/png",
      "tamaños": "192x192"
    },
    {
      "origen": "logo512.png",
      "tipo": "imagen/png",
      "tamaños": "512x512"
    }
  ],
  "url_inicio": ".",
  "pantalla": "independiente",
  "tema_color": "#000000",
  "background_color": "#ffffff"
}

La mayoría de las cosas aquí se explican por sí mismas, pero si desea profundizar más en manifest.json y los eventos que conducen a una instalación de PWA, hemos escrito un artículo sobre esto. No olvides comprobarlo.

Notas : para que el manifest.json funcione, deberá incluirlo en index.html . Por defecto, create-react-app ya debería haber hecho esto por ti.

 <enlace rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Cuando tenga su PWA registrada con los trabajadores del servicio y un manifest.json adecuado, se activará un beforeinstallpromt una vez que el usuario inicie su aplicación, solicitando su permiso para instalar su PWA en la pantalla de inicio del usuario.

Sin embargo, debe tener en cuenta que solo estamos arañando la superficie del proceso A2HS (Agregar a la pantalla de inicio), y aún queda mucho por aprender. Creemos que la mejor manera de aprender algo es construyéndolo desde cero, por lo que hemos preparado una breve guía sobre esta característica específica de PWA. La guía lo guiará a través de varias partes importantes en los eventos de instalación de una PWA.

Alternativamente, si te sientes perezoso y desmotivado, también estamos aquí para ayudarte. Nuestro generador de manifiestos está diseñado para automatizar todo este proceso por usted.

4. Configurar notificaciones automáticas

Los navegadores han recorrido un largo camino en su compatibilidad con las notificaciones automáticas. Recientemente, Chrome incluso introdujo Activadores de notificación para permitir la visualización de notificaciones en modo avión. Ese es un gran paso adelante para las notificaciones automáticas.

Y a estas alturas, debe estar preguntándose dónde está esa parte que usa Firebase en este tutorial. Bueno, esto es todo. En esta parte, aprenderá sobre el proceso de integración de notificaciones automáticas en una PWA mediante Firebase, específicamente sobre la función Mensajería en la nube que permite el envío de mensajes mediante solicitudes HTTPS.

Pero dado que todo el proceso es un poco largo, y también para ayudarlo a realizar un mejor seguimiento de todo, hemos preparado para usted nuestro propio tutorial de integración de notificaciones automáticas. Con este tutorial, no debería tener ningún problema al intentar enviar notificaciones automáticas a un token de usuario o a un grupo de usuarios.

Conclusión

Y eso es todo para un PWA completo. No dude en enviarnos cualquier pregunta si se siente atrapado en alguna parte del tutorial y haremos todo lo posible para responderlo.

Lee mas:
Cómo integrar PWA en Magento 2