Cómo crear una aplicación web progresiva

Los dispositivos móviles ahora representan más de la mitad del tráfico de la web, y las aplicaciones web permiten a los usuarios hacer cosas en el navegador que compiten con las aplicaciones nativas, pero hay un problema: la calidad de las conexiones y los dispositivos varía enormemente en todo el mundo.

El último desafío de usabilidad es atender tanto a los usuarios con conexiones ultrarrápidas en Seúl como a los usuarios de la India rural con un teléfono obsoleto, y las aplicaciones web progresivas son la solución.

Los PWA utilizan la mejora progresiva para cargar el contenido más importante primero, luego agregan extras de presentación y funcionales según sea necesario, lo que significa que todos sus usuarios obtienen la misma experiencia central lo más rápido posible. Si desea llegar a la audiencia más amplia posible, las PWA son el camino a seguir.



Aunque las aplicaciones web progresivas aportan muchos beneficios y funcionalidades a la web, no requieren reescribir toda la aplicación. Cualquier aplicación se puede convertir a una PWA agregando algunas capas adicionales.

Para obtener los mejores resultados, querrá poner un gran énfasis en el rendimiento desde el principio, pero eso es cierto para cualquier aplicación web. Aquí, veremos los pasos para hacer que su aplicación sea progresiva.

01. Sirve a través de HTTPS

Seamos honestos: deberías estar haciendo esto de todos modos. SSL agrega una capa adicional de seguridad a la web, lo que ayuda a sus usuarios a sentirse seguros al usar su sitio. Con PWA, HTTPS es esencial para utilizar trabajadores de servicio y permitir la instalación de la pantalla de inicio. Puede comprar un certificado SSL de su registrador de dominios a un costo reducido y luego configurarlo a través de su servicio de alojamiento.

02. Cree un shell de aplicación

El shell de tu aplicación es lo primero que se carga, lo primero que ve el usuario. Debe existir completamente en su documento HTML de índice, con CSS en línea, para garantizar que aparezca lo más rápido posible y que su usuario no esté mirando una pantalla en blanco por más tiempo del necesario. El caparazón de la aplicación forma parte del patrón de mejora progresiva. Su aplicación debe proporcionar contenido al usuario lo antes posible y luego mejorarlo progresivamente a medida que se cargan más datos (probablemente JavaScript).

El siguiente ejemplo está tomado de una aplicación React.js. Al usuario se le presenta un esquema de la aplicación y un indicador de carga en el index.html. Luego, una vez que se carga JavaScript y React arranca, la aplicación completa se procesa dentro del shell.

|_+_|

03. Registrar un trabajador de servicios

Para aprovechar el espectro completo de beneficios de PWA (notificaciones push, almacenamiento en caché, avisos de instalación), necesitará un trabajador de servicio.

Afortunadamente, son bastante fáciles de configurar. A continuación, primero verificamos si el navegador del usuario es compatible con los trabajadores del servicio. Luego, si es así, podemos seguir adelante con el registro del archivo del trabajador del servicio, aquí llamado service ‑ worker.js . Tenga en cuenta que no necesita nada especial dentro de ese archivo en este momento; puede estar en blanco.

En el siguiente ejemplo, sin embargo, mostramos cómo aprovechar los tres eventos clave del ciclo de vida de los trabajadores de servicios. Estos son 'instalar', cuando el usuario visita su página por primera vez; 'activar', justo antes de que se complete el registro; y 'buscar', cuando la aplicación realiza una solicitud de red. El último es relevante para el almacenamiento en caché y la capacidad fuera de línea.

|_+_|

04. Agregar notificaciones push

Los trabajadores del servicio permiten que sus usuarios reciban notificaciones push a través de la API Push web. Para acceder a él, puede tocar en self.registration.pushManager desde su archivo de trabajador de servicio. Dado que el envío de notificaciones push depende en gran medida de la configuración de su backend, no profundizaremos en ello aquí.

Si está iniciando una aplicación desde cero, el servicio Firebase de Google viene con Firebase Cloud Messaging para notificaciones push relativamente sencillas. El siguiente código muestra cómo registrarse para recibir notificaciones push a través de la API Push.

|_+_|

05. Agregar un manifiesto de aplicación web

Para que su aplicación sea instalable, debe incluir un manifest.json en el directorio raíz de la aplicación. Puede pensar en esto como una descripción de su aplicación, similar a lo que podría enviar a la App Store. Incluye iconos, una pantalla de presentación, un nombre y una descripción.

También hay alguna configuración sobre cómo aparece su aplicación cuando se inicia desde la pantalla de inicio del usuario: ¿Quiere mostrar la barra de direcciones en el navegador o no? ¿De qué color quieres que sea la barra de estado? Etcétera. Tenga en cuenta que un manifest.json debe incluir un espectro completo de tamaños de iconos para varios dispositivos. El siguiente código es una vista previa de algunas de las propiedades que puede incluir su manifiesto.

|_+_|

06. Configure el indicador de instalación

Cuando un usuario visita una PWA con un trabajador de servicio y un manifiesto, Chrome le pedirá automáticamente que lo instale en su pantalla de inicio, dado lo siguiente: el usuario debe visitar el sitio dos veces, con cinco minutos entre visitas.

La idea aquí es esperar hasta que el usuario demuestre interés en su aplicación y luego pedirle que la convierta en un accesorio de su dispositivo (esto contrasta fuertemente con el enfoque de la aplicación nativa, que solicita esa inversión por adelantado).

Pero puede haber casos en los que desee mostrar el mensaje de instalación en diferentes situaciones, como después de que el usuario realiza una acción útil en particular. Para hacerlo, interceptamos el beforeinstallprompt y guárdelo para más tarde, luego implemente el mensaje cuando lo consideremos oportuno.

|_+_|

07. Analiza el rendimiento de tu aplicación

El rendimiento es el corazón y el alma de las PWA. Su aplicación debe ser rápida para los usuarios en todas las condiciones de la red. La capacidad de almacenamiento en caché y sin conexión ayuda mucho, pero al final del día, su aplicación debería ser rápida incluso si el usuario no tiene el navegador para admitir la tecnología de trabajador de servicio. Esta es la definición de mejora progresiva: proporcionar una gran experiencia para todos, independientemente de la modernidad del dispositivo o las condiciones de la red.

Para hacerlo, un conjunto útil de métricas es el sistema RAIL. RAIL es lo que Google llama un 'modelo de rendimiento centrado en el usuario': un conjunto de pautas para medir el rendimiento de nuestra aplicación.

El acrónimo significa Respuesta (cuánto tiempo le toma a su aplicación responder a las acciones del usuario), Animación (manteniendo la velocidad de animación a 60 fps), Inactivo (usando el tiempo cuando su aplicación no está haciendo nada más para cargar y almacenar en caché activos adicionales) y Cargar (cargando su aplicación en un segundo o menos).

A continuación, se muestra una tabla de puntos de referencia significativos para la carga de aplicaciones, proporcionada por Meggin Kearney, redactora de tecnología en Conceptos básicos de la Web de Google .

retraso y reacción del usuario

Haga clic en el icono en la parte superior derecha para ampliar la imagen

08. Audite su aplicación con Lighthouse

Google es el mayor campeón que impulsa las aplicaciones web progresivas como el futuro de la web. Como tal, ha proporcionado una herramienta útil para guiar el desarrollo de su PWA.

Anteriormente llamado Lighthouse y suministrado como una extensión de Chrome, a partir de Chrome 60 es parte de Chrome DevTools, en la pestaña 'Auditorías'. Lo que hace Lighthouse es ejecutar su aplicación en diferentes condiciones y medir su respuesta y éxito de acuerdo con las pautas de PWA. A continuación, le da una puntuación de 100. También puede puntuar su aplicación en las mejores prácticas web al mismo tiempo.

El siguiente texto es una lista de los valores medidos por Lighthouse. En uso también muestra descripciones.

  • Registra un trabajador de servicios
  • Responde con un 200 cuando está desconectado
  • Contiene contenido cuando JavaScript no está disponible
  • Utiliza HTTPS
  • Redirige el tráfico HTTP a HTTPS
  • La carga de la página es lo suficientemente rápida en 3G
  • Se puede solicitar al usuario que instale la aplicación web
  • Configurado para una pantalla de presentación personalizada
  • La barra de direcciones coincide con los colores de la marca
  • Tiene un etiqueta con ancho o escala inicial
  • El contenido tiene el tamaño correcto para la ventana gráfica

Este artículo apareció originalmente en Web Designer; Suscríbete aquí .

Artículos relacionados: