Primeros pasos
Las Progressive Web Apps siguen siendo sitios web con características y capacidades mejoradas. No están vinculados a un componente tecnológico específico, y puedes comenzar desde cero con un sitio nuevo o actualizar tu sitio web existente sin una revisión completa. En esta guía, aprenderás a crear una buena implementación del patrón de la AWP. A continuación, te presentamos algunas estrategias para comenzar:
Permite la instalación.
Empieza de a poco. Este enfoque incluye comenzar con un archivo de manifiesto básico, una página sin conexión simple y un service worker para mostrar la página sin conexión y almacenar en caché algunos CSS y JavaScript críticos. Gracias al almacenamiento en caché fundamental de CSS y JavaScript, tu app web existente estará lista para funcionar sin conexión y, al mismo tiempo, mejorar su rendimiento.
Enfócate en una función
Elige una función nueva, como las notificaciones push o la administración de archivos, que tendrá un impacto significativo en tus usuarios o empresa. Esto te permitirá sumergirte en el grupo de AWP sin hacer demasiados cambios a la vez.
Compila una versión simple
Toma una sección existente de tu aplicación o un recorrido de usuario específico, como la reproducción de videos o el acceso a una tarjeta de embarque, y haz que funcione de frente a atrás como una AWP que prioriza el uso sin conexión, ya sea independiente o en contexto. Esto permite realizar un experimento de bajo riesgo que te permite repensar una experiencia para tus usuarios con AWP.
Empieza desde cero
Si estás rediseñando tu sitio web o puedes comenzar desde cero, esta estrategia tiene mucho sentido. Te permite compilar con mayor facilidad patrones de diseño de AWP que otras estrategias, en particular, lo que te permite aprovechar toda la potencia de los service workers desde el principio.
Cómo actualizar una app en la tienda
Con la capacidad de publicar una AWP en tiendas de aplicaciones, es posible unirla a un selector de AWP y subirla a tiendas, como Google Play Store o Windows Store. Si ya tienes una app específica de la plataforma, puedes reemplazarla con tu AWP publicada en la tienda.
Con este enfoque, los usuarios existentes obtienen una actualización de sus experiencias en la AWP, y los usuarios nuevos aún pueden usar o instalar la AWP desde el navegador o desde las tiendas de aplicaciones. Además, tendrás una app para todos, lo que permitirá ahorrar costos y tiempo, y mejorar la experiencia del usuario.
Lista de tareas de la AWP
Una aplicación web progresiva es un sitio web, lo que lleva a la pregunta: ¿Cuándo se convierte en una aplicación web progresiva? La respuesta no es tan simple, ya que el concepto de AWP no se refiere a una tecnología o pila específicas, la AWP es, en cambio, un patrón que incluye varios componentes técnicos.
Si bien no hay reglas únicas entre todos los navegadores, sí hay un conjunto de recomendaciones, denominada la lista de tareas de apps web progresivas, que te ayudarán a crear una AWP que les encantará a los usuarios.
Requisitos principales
Debido a que las AWP abarcan todos los dispositivos, desde dispositivos móviles hasta computadoras de escritorio, la lista de tareas principales de la app web progresiva trata sobre lo que debes hacer para que tu app sea instalable y confiable para todos los usuarios, sin importar el tamaño de la pantalla o el tipo de entrada.
Los requisitos principales son los siguientes:
Velocidad permanente
El rendimiento desempeña un papel importante en el éxito de cualquier experiencia en línea, ya que los sitios con buen rendimiento atraen y retienen a los usuarios mejor que aquellos con bajo rendimiento. Los sitios deben enfocarse en aplicar optimizaciones en función de métricas de rendimiento centradas en el usuario.
Funciona en cualquier navegador
Las Progressive Web Apps son apps web en primer lugar, lo que significa que deben funcionar en todos los navegadores, no solo en uno de ellos. Sin embargo, no es necesario que la experiencia sea idéntica en todos los navegadores. Puede haber funciones que no son compatibles con un navegador, con un resguardo para garantizar una buena experiencia.
Se adapta a cualquier tamaño de pantalla
Los usuarios pueden utilizar la AWP en cualquier tamaño de pantalla, y todo el contenido está disponible en cualquier tamaño de viewport.
Proporciona una página sin conexión personalizada
Cuando los usuarios están sin conexión, mantenerlos en su AWP proporciona una experiencia más fluida y nativa que regresar a la página sin conexión predeterminada del navegador.
Se puede instalar
Los usuarios que instalan o agregan apps a sus pantallas principales tienden a interactuar más con ellas y, cuando se instala la AWP, pueden aprovechar más funciones para brindar una mejor experiencia del usuario.
Características óptimas de la AWP
Para crear una app web progresiva verdaderamente excelente, que parezca la mejor de su clase, necesitas más que solo la lista de tareas principal. La lista de verificación óptima para aplicaciones web progresivas consiste en lograr que tu AWP es capaz y confiable y, al mismo tiempo, aprovechar lo que hace que la Web sea potente.
Proporciona una experiencia sin conexión.
Si permites que los usuarios utilicen tu AWP sin conexión, se creará una experiencia similar a la de una app. Para ello, identifica las funciones que no requieran conectividad, de modo que los usuarios puedan acceder al menos a algunas funciones.
Es totalmente accesible.
Asegúrate de que los lectores de pantalla entiendan todo el contenido y las interacciones de la aplicación, puedan usarse solo con un teclado, que se indique el enfoque y que el contraste de color sea fuerte. Cuando haces que tu AWP sea accesible, te aseguras de que sea accesible para todos.
Usa funciones potentes cuando estén disponibles
Desde mensajes push, WASM y WebGL hasta el acceso al sistema de archivos, los selectores de contactos y la integración con tiendas de aplicaciones. Ya están disponibles las herramientas para crear AWP altamente integradas y con gran capacidad, lo que te permite crear una experiencia del usuario con todas las funciones, que antes se reservó para las apps de la plataforma, que los usuarios pueden llevar con ellas adondequiera que vayan.
Es detectable a través de la búsqueda.
Más de la mitad de todo el tráfico del sitio web proviene de la búsqueda orgánica. Para que los usuarios encuentren tu AWP, es fundamental que te asegures de que existan URLs canónicas para el contenido y que los motores de búsqueda puedan indexar tu sitio.
Funciona con cualquier tipo de entrada
Los usuarios deben poder cambiar entre los tipos de entrada mientras usan tu aplicación sin inconvenientes, y los métodos de entrada no deben depender del tamaño de la pantalla.
Proporciona contexto para las solicitudes de permiso
Activa mensajes solo para permisos como notificaciones, ubicación geográfica y credenciales después de proporcionar una justificación en contexto para aumentar las posibilidades de que el usuario acepte las solicitudes.
Sigue las prácticas recomendadas para un código en buen estado
Mantener tu aplicación actualizada y tu base de código en buen estado hace que sea más fácil entregar nuevas funciones que cumplen con los demás objetivos establecidos en esta lista de tareas.