La experiencia del usuario (UX) ha sido el punto central del desarrollo web moderno desde hace bastante tiempo. En ella influyen varios factores, como la velocidad de carga de la página, la legibilidad, la usabilidad y el diseño. Pero ahora que un mayor número de usuarios prefiere la navegación web móvil en lugar de utilizar los ordenadores de sobremesa, cualquier sitio web -ya sea un blog de nicho o una tienda de comercio electrónico- debería empezar a dar prioridad a la compatibilidad con los dispositivos móviles.
Hoy en día, es fácil aplicar un tema que responda a los dispositivos móviles y utilizar herramientas como la prueba de compatibilidad con dispositivos móviles de Google para recibir recomendaciones adicionales sobre cómo optimizar el sitio. Pero si quieres llevar las cosas al siguiente nivel, puedes desarrollar una aplicación web progresiva (PWA) para ofrecer nuevas experiencias frescas y memorables a tus usuarios móviles.
¿Qué es una aplicación web progresiva?
Una PWA aprovecha las tecnologías web modernas para permitir funciones similares a las de una aplicación. A diferencia de los sitios web móviles tradicionales, una PWA no tiene que actualizar toda la página cuando se carga un nuevo contenido, ni necesita conectividad a Internet para ser accesible. También son instalables, lo que significa que los usuarios pueden reutilizarlas fácilmente añadiendo un acceso directo a la pantalla de inicio.
Las aplicaciones web progresivas tienen el potencial de ser la próxima gran cosa para la web móvil. Esto fue propuesto originalmente por Google hace apenas unos años, en 2015. Pero, en tan poco tiempo, ya ha atraído mucha atención porque es relativamente fácil de desarrollar y por la entrega de experiencia de usuario de la aplicación.
- PWA.rocks
Cuando se trata de desarrollar una PWA, es necesario tener un conocimiento más profundo de lo que son capaces de hacer.
Para ver las PWA en acción, puedes consultar en PWA.rocks ejemplos de varias categorías, como negocios, juegos, compras y social. Esto te ayudará a visualizar cómo podría ser tu futura PWA. También puedes inspirarte en los ejemplos disponibles a la hora de conceptualizar lo que tu PWA ofrecerá a los usuarios móviles.
- Knockout
Knockout es una herramienta gratuita y de código abierto que puede ayudarte con los enlaces de Modelo-Vista-Vista o MVVM. Esto le permite simplificar el proceso de codificación de las interfaces de usuario de JavaScript al permitirle definir vistas y enlaces declarativos que son controlados por las propiedades del modelo de vista.
La plataforma se ejecuta puramente en JavaScript, por lo que funciona con los principales navegadores y cualquier marco web. La biblioteca Knockout también puede integrarse fácilmente con sitios web existentes sin necesidad de reescribir mucho.
- PWABuilder
La forma más rápida de crear una PWA es utilizar PWABuilder y construir rápidamente un service worker para la funcionalidad offline, que funciona sacando y sirviendo el “offline.html” de tu servidor web cada vez que los usuarios pierden la conectividad a Internet. También puedes enviar tu PWA a la tienda de aplicaciones para dispositivos Android e iOS.
Para utilizar PWABuilder, todo lo que tienes que hacer es insertar la URL de tu sitio web y luego rellenar los detalles adicionales como tu nombre, la descripción del sitio y el icono preferido. También puedes modificar fácilmente algunas propiedades como la orientación de la pantalla de tu PWA, el idioma y el color de fondo. A continuación, la plataforma generará automáticamente un manifiesto basado en la información que proporciones.
- AngularJS
JavaScript suele ser el lenguaje introductorio que aprenden los estudiantes que desean aprender desarrollo web. Si eres un desarrollador Java o .NET con experiencia, entonces AngularJS es uno de los mejores frameworks de JavaScript que puedes utilizar para aplicaciones web. Aun así, su sitio web ofrece un montón de guías, tutoriales y recursos que te ayudarán a aprender a manejar la plataforma.
La última versión, Angular v4.0, ofrece el mismo entorno tanto si desarrollas para móvil como para escritorio. En caso de que pienses que Angular es demasiado complejo para tus necesidades, puedes optar en su lugar por React, una librería JavaScript adaptada al desarrollo de interfaces de usuario. Otra alternativa es Polymer, que puede proporcionarte plantillas y otros componentes reutilizables que pueden acelerar el proceso de desarrollo de PWA.
- Desarrolladores de Google
Una PWA no es exactamente un proyecto de bricolaje para los blogueros autodidactas o los vendedores afiliados, pero todavía se puede hacer con los recursos adecuados. Si ya tienes experiencia con los sistemas de gestión de contenidos pero no tienes ni idea de desarrollar aplicaciones web, puedes aprender lo básico a través de Google Developers, una biblioteca de recursos que puede ayudarte a aprender a codificar.
Google Developers tiene un completo tutorial sobre cómo funcionan las PWA, cómo construir una y cómo hacer que funcione correctamente. También cubre otros aspectos básicos como la habilitación del “banner de añadir a la pantalla de inicio” y el uso de HTTPS.
- Webpack
Webpack es una herramienta extremadamente útil para agrupar los recursos de tu aplicación JavaScript, incluyendo los activos que no son de código, como las fuentes y las imágenes. Estos serán tratados como objetos JavaScript, lo que a su vez permite que se carguen más rápidamente. La plataforma también facilita considerablemente la gestión de las dependencias.
Sólo hay que recordar que Webpack tiene una curva de aprendizaje pronunciada, lo que significa que podrías estar buscando horas de tutoriales y guías. Sin embargo, los recursos de aprendizaje y la documentación disponible en su sitio web no son fáciles de usar para los principiantes. La buena noticia es que Webpack está ampliamente cubierto en otros sitios, incluyendo la sección de documentación de Angular 4.0.
- GitHub
Por último, GitHub es un sitio web impulsado por la comunidad que mantiene repositorios de proyectos. Cubre una amplia gama de temas relacionados con la programación, incluyendo JavaScript y los trabajadores de servicios PWA. De hecho, puedes encontrar los repositorios PWA.rocks y Webpack dentro de la plataforma. Esto te ayudará a profundizar en tus conocimientos o incluso a contribuir a un mayor desarrollo.
Hoy en día, hay un puñado de repositorios relacionados con las PWA en GitHub. Puedes aprender de estos proyectos o iniciar tu propio repositorio mientras experimentas con tu primera PWA. GitHub ahora también tiene características de gestión de proyectos, lo que le permite colaborar sin problemas con otros desarrolladores de forma remota.
Conclusión
Las Progressive Web Apps son el futuro de las experiencias web móviles, pero actualmente no hay muchas marcas que las utilicen. Con las herramientas anteriores, ahora eres totalmente capaz de crear una PWA destacada y establecer una presencia autorizada. Sólo hay que tener en cuenta que las herramientas, recursos y prácticas de las PWA evolucionan con las tecnologías en constante evolución de los principales navegadores online.