Cómo construir una aplicación web progresiva

Sep 15, 2025

Cómo

[dieciséis]

Mobile ahora representa 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 rivalizan las aplicaciones nativas, pero hay un problema: la calidad de las conexiones y los dispositivos varía masivamente en todo el mundo.

Catering Tanto a los usuarios en las conexiones rápidas en los relámpagos en Seúl, y los usuarios en la India rural en un teléfono desactualizado, es el último desafío de la usabilidad, y las aplicaciones web progresivas son la solución.

Los PWA usan la mejora progresiva para cargar primero el contenido más importante, luego agregue extras de presentación y funcional según sea necesario, lo que significa que todos sus usuarios obtienen la misma experiencia básica lo más rápido posible. Si quieres alcanzar la audiencia más amplia posible, Pwas es el camino a seguir.

10 pasos para una experiencia de usuario atractiva

Aunque las aplicaciones web progresivas traen muchos beneficios y funcionalidad a la Web, no requieren reescritura de su solicitud completa. Cualquier aplicación se puede convertir a una PWA agregando algunas capas adicionales.

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

Si desea construir un sitio sin problemas, asegúrese de que Alojamiento web Es exigente y usa un decente. Creador de sitios web .

01. Servir sobre 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 en el uso de su sitio. Con PWA, HTTPS es esencial para usar trabajadores de servicio y permitir la instalación de la pantalla de inicio. Puede comprar un certificado SSL de su registrador de dominios a pocos gastos y luego configurarlo a través de su servicio de alojamiento.

02. Crea una aplicación Shell

Su aplicación SHELL es lo primero que carga, lo primero que ve el usuario. Debe existir enteramente en su documento HTML índice, con CSS en línea, para asegurarse de que aparezca lo más rápido posible y su usuario no está mirando a una pantalla blanca por más tiempo de lo necesario. La aplicación Shell forma parte del patrón de mejora progresiva. Su aplicación debe dar el contenido del usuario tan pronto como sea posible, y luego lo realice progresivamente a medida que se cargue más datos (probables javascript).

El siguiente ejemplo se toma de una aplicación React.js. El usuario se presenta con un resumen de la aplicación y un indicador de carga en el índice.html. Luego, una vez que el JavaScript carga y reaccione hacia arriba, la aplicación completa se presenta dentro del shell.

 & lt;! - index.html - & gt;
& lt; cuerpo y gt;
& lt; div id = "root" & gt;
  & lt; div id = "contenedor" & gt;
  & lt; div class = "interno-contenedor" & gt;
  & lt; div id = "encabezado" y gt;
  & lt; img src = "/ activos / icon.png" alt = "logo" / & gt;
  & lt; h1 & gt; chat & lt; / h1 & gt;
  & lt; / DIV & GT;
  & lt; div id = "Cargando-contenedor" & gt;
  & lt; img src = "/ activos / icon.png" alt = "logo" id = "loader" / & gt;
  & lt; / DIV & GT;
  & lt; / DIV & GT;
  & lt; / DIV & GT;
  & lt; / DIV & GT;
& lt; / body & gt;
// index.js
Reactmeter.render (
& lt; aplicación / & gt ;,
document.getelementbyid ('root')
)

03. Registrar un trabajador de servicios

Para aprovechar el espectro completo de las golosinas PWA (notificaciones push, caché, instrucciones 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 admite a los trabajadores de servicio. Luego, si es así, podemos avanzar con el registro del archivo de trabajador de servicio, aquí llamado Servicio-trabajador.js . Tenga en cuenta que no necesita nada especial dentro de ese archivo en este punto, puede estar en blanco.

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

& lt; script & gt;
  Si ('ServiceWorker' en Navigator) {
  ventana.addeventlistener ('carga', función () {
  Navigator.ServiceWorker.Register ('Service-Worker.js'). Entonces (función (registro) {
  // El registro fue exitoso
  console.log ('registrado!');
  }, función (err) {
  // registro fallido :(
  console.log ('error de registro de servidumbre:', error);
  }). Captura (función (error) {
  console.log (error);
  });
  });
  } demás {
  console.log ('Servicio de servicio no es compatible');
  }
  & lt; / script & gt;
// Service-Worker.js
self.addeventlistener ('instalación', función () {
  console.log ('Install!');
});
self.addeventlistener ("activado", evento = & gt; {
  console.log ('activate!');
});
self.addeventlistener ('fetch', función (evento) {
  console.log ('¡Fetche!', Event.Request);
});

04. Añadir notificaciones push

Los trabajadores de servicio permiten a sus usuarios recibir notificaciones push a través de la API de empuje web. Para acceder a ella, puedes tocar en self.registration.pushmanager desde dentro de su archivo de trabajadores de servicio. Dado que el envío de notificaciones pushs se basa en gran medida en su configuración de backend, no nos sumergiremos aquí.

Si está iniciando una aplicación desde cero, el servicio Firebase de Google viene con la mensajería de la nube de Firebase para notificaciones de empuje relativamente indoloras (recuerde: asegúrese de mantener sus archivos de diseño seguros en almacenamiento en la nube) . El siguiente código muestra cómo registrarse para notificaciones de empuje a través de la API PUSH.

 navigator.serviceworker.ready.then (función (registro) {
  Si (! Registro.pushmanager) {
    alerta ('No hay soporte de notificaciones push');
    falso retorno;
  }
  // para suscribirse 'Push Notification` de Push Manager
  inscripción.pushmanager.subscribe ({
  USERVISIONALLY: VERDADERO // SIEMPRE Mostrar notificación cuando se recibe
  })
  .Ten (función (suscripción) {
  console.log ('suscrito');
  })
  .catch (función (error) {
  console.log ('error de suscripción:', error);
  });
})

05. Añadir un manifiesto de aplicación web

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

También hay alguna configuración para la forma en que aparece su aplicación cuando se inicia desde la pantalla de inicio del usuario: ¿desea 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 adecuado manifiesto.json Debe incluir un espectro completo de tamaños de iconos para varios dispositivos. El código a continuación es una vista previa de algunas de las propiedades que puede incluir su manifiesto.

 {
  "Short_Name": "Chat",
  "Nombre": "Chat",
  "Iconos": [
  {
  "SRC": "/ Activos / iconos.png",
  "Tamaños": "192x192",
  "Tipo": "Imagen / PNG"
  }
  ],
  "START_URL": "/? UTM_Source = HomeRescreen",
  "Background_Color": "# E05A47",
  "Theme_Color": "# E05A47",
  "Mostrar": "independiente"
}

06. Configure el indicador de instalación

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

La idea aquí es esperar hasta que el usuario demuestre interés en su solicitud, y luego pídales que lo conviertan en un accesorio de su dispositivo (esto está en un contraste agudo con el enfoque de la aplicación nativa, que solicita esa inversión por adelantado).

Pero puede haber casos en los que desea mostrar el indicador de instalación en diferentes situaciones, como después de que el usuario toma una acción útil en particular. Para hacerlo, interceptamos el antes del inicio evento y guárdelo para más tarde, luego despliegue el indicador cuando veamos FIT.

 window.addeventlistener ('antesIstallprompt', e = & gt; {
  console.log ('antes deinstallprompt evento despedido');
  e.preventdefault ();
  // Alaza el evento para que pueda ser activado más tarde.
  este.deferredprompt = e;
  falso retorno;
  });
// Cuando quiere activar la solicitud:
este.deferredprompt.prompt ();
  este.deferredprompt.userchoice.then (elección = & gt; {
  console.log (elección);
  });
esto.deferredprompt = null;

07. Analizar el rendimiento de su aplicación.

El rendimiento es el corazón y el alma de la 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 fuera de línea ayuda mucho, pero al final del día, su solicitud debe ser rápida incluso si el usuario no tiene el navegador para admitir la tecnología del trabajador de servicio. Esta es la definición de mejora progresiva, proporcione 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 ferroviario. El carril es lo que Google llama un 'modelo de rendimiento centrado en el usuario': un conjunto de pautas para medir el desempeño de nuestra aplicación.

El acrónimo significa respuesta (cuánto tiempo lleva a su aplicación responder a las acciones del usuario), la animación (manteniendo la velocidad de la animación a las 60 fps), inactiva (usando la hora en que su aplicación no está haciendo nada más para cargar y almacenar en caché los activos adicionales) y Carga (cargando tu aplicación en un segundo o menos).

Aquí hay una tabla de puntos de referencia significativos para la carga de la aplicación, según lo suministrado por Meggin Kearney, escritor de tecnología en Fundamentos web de Google .

08. Audita tu aplicación con Faro

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

Anteriormente llamado Faro y suministrado como una extensión de cromo, a partir de Chrome 60, es parte de los DevTools de Chrome, bajo la pestaña 'Auditorías'. Lo que hace el faro está ejecuta su solicitud en diferentes condiciones y mida su respuesta y éxito de acuerdo con las directrices de PWA. Luego le da una puntuación de 100. También puede marcar su aplicación en las mejores prácticas web al mismo tiempo.

El siguiente texto es una lista del faro de los valores medido. En uso también muestra descripciones.

Registra un trabajador de servicios
Responde con un 200 cuando está fuera de línea
Contiene un poco de contenido cuando Javascript no está disponible
Usa 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 salpicadura personalizada
Bar de dirección coincide con los colores de la marca
Tiene un & lt; meta name = "viewport" & gt; etiqueta con ancho o de escala inicial
El contenido es de tamaño correctamente para la ventana

Este artículo apareció originalmente en el diseñador web; Suscríbete aquí .

Artículos relacionados:

Pwas: Bienvenido a la revolución móvil.
Cómo usar la animación en aplicaciones móviles
9 SECRETOS PWA increíbles

Cómo construir una aplicación web progresiva

01. Servir sobre HTTPS

02. Crea una aplicación Shell

03. Registrar un trabajador de servicios

04. Añadir notificaciones push

05. Añadir un manifiesto de aplicación web

06. Configure el indicador de instalación

07. Analizar el rendimiento de su aplicación.

08. Audita tu aplicación con Faro

Cómo - Artículos más populares

Cómo agregar energía a sus dibujos de vida

Cómo crear un personaje de videojuegos en Zbrush

Crea un efecto de texto de vapor animado

Cómo montar su obra

Cómo diseñar figuras gráficas

Cómo enfatizar el punto focal de una imagen

Crea paisajes impresionantes en Houdini

Cómo pintar vidrio curvado en un casco espacial

Categorías