UX ha sido el punto focal del desarrollo web moderno durante bastante tiempo. Esto está influenciado por varios factores, incluida la velocidad de carga de la página, la legibilidad, la usabilidad y el diseño. Pero ahora que más usuarios prefiera la navegación web móvil sobre el uso de computadoras de escritorio, cualquier sitio web, ya sea un blog de nicho o una tienda de comercio electrónico, debe comenzar a priorizar la compatibilidad con dispositivos móviles.
Hoy en día, es fácil aplicar un tema móvil y utilizar herramientas como las de Google. Prueba de compatibilidad con dispositivos móviles para recibir recomendaciones adicionales sobre cómo optimizar su sitio. Pero si desea llevar las cosas al siguiente nivel, puede desarrollar una aplicación web progresiva (PWA) para brindar nuevas experiencias frescas y memorables a sus usuarios móviles.
¿Qué es una aplicación web progresiva?
Una PWA aprovecha las tecnologías web modernas para habilitar 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 al cargar contenido nuevo, ni necesita conectividad a Internet para ser accesible. También son instalables, lo que significa que los usuarios pueden reutilizarlos fácilmente agregando un acceso directo a la pantalla de inicio.
Las aplicaciones web progresivas tienen el potencial de ser el próximo gran avance de la web móvil. Esto fue propuesto originalmente por Google solo un par de años atrás en 2015. Pero, en tan poco tiempo, ya ha atraído mucha atención porque es relativamente fácil de desarrollar y para la entrega de la experiencia del usuario de la aplicación.
—Rahul Varshneya, cofundador de la empresa de desarrollo de aplicaciones Arkenea.
Una PWA es un gran proyecto que podría guiar la dirección de su presencia en la web móvil en el futuro. Pero si eres completamente nuevo en las PWA, aquí hay 7 herramientas y recursos que te pondrán en el camino correcto:
1. PWA.rocks
Cuando se trata de desarrollar una PWA, debe tener una comprensión más profunda de lo que son capaces de hacer.
Para ver las PWA en acción, puede consultar PWA.rocks para ver ejemplos en varias categorías, incluidos negocios, juegos, compras y redes sociales. Esto lo ayudará a visualizar cómo podría ser su futuro PWA. También puede inspirarse en los ejemplos disponibles al conceptualizar lo que su PWA ofrecerá a los usuarios móviles.
2. nocaut
Knockear es una herramienta gratuita de código abierto que puede ayudarlo con los enlaces Model-View-View Model o MVVM. Esto le permite simplificar el proceso de codificación de las IU de JavaScript al permitirle definir vistas y enlaces declarativos que están controlados por las propiedades del modelo de vista.
La plataforma se ejecuta exclusivamente en JavaScript, que funciona con todos los principales navegadores y cualquier marco web. La biblioteca Knockout también se puede integrar fácilmente con sitios web existentes sin reescrituras extensas.
3. Constructor de PWA
La forma más rápida de crear una PWA es usar Constructor de PWA y construya rápidamente un trabajador de servicio para la funcionalidad fuera de línea, que funciona extrayendo y sirviendo el «offline.html» de su servidor web cada vez que los usuarios pierden la conexión a Internet. También puede enviar su PWA a la tienda de aplicaciones para dispositivos Android e iOS.
Para usar PWABuilder, todo lo que necesita hacer es insertar la URL de su sitio web y luego completar los detalles adicionales como su nombre, descripción del sitio e ícono preferido. También puede modificar fácilmente ciertas propiedades, como la orientación de la pantalla, el idioma y el color de fondo de su PWA. Luego, la plataforma generará automáticamente un manifiesto basado en la información que proporcione.
4. AngularJS
JavaScript suele ser el lenguaje introductorio que aprenden los estudiantes que desean aprender desarrollo web. Si es un desarrollador experimentado de Java o .NET, entonces AngularJS es uno de los mejores marcos de JavaScript que puede usar para aplicaciones web. Aun así, su sitio web ofrece un montón de guías, tutoriales y recursos que lo ayudarán a familiarizarse con la plataforma.
La última versión, Angular v4.0, proporciona el mismo entorno, ya sea que esté desarrollando para dispositivos móviles o de escritorio. En caso de que piense que Angular es demasiado complejo para sus necesidades, puede optar por Reaccionar—una biblioteca de JavaScript adaptada al desarrollo de la interfaz de usuario. Otra alternativa es Polímeroque puede proporcionarle plantillas y otros componentes reutilizables que pueden acelerar el proceso de desarrollo de PWA.
5. Desarrolladores de Google
Una PWA no es exactamente un proyecto de bricolaje para bloggers o comerciantes afiliados, pero aún se puede hacer con los recursos adecuados. Si ya tiene experiencia con los sistemas de administración de contenido pero no tiene ni idea sobre el desarrollo de aplicaciones web, entonces puede obtener los conceptos básicos a través de Desarrolladores de Googleuna biblioteca de recursos que puede ayudarte a aprender a programar.
Los desarrolladores de Google tienen un tutorial completo sobre cómo funcionan las PWA, cómo crear una y cómo hacer que funcione correctamente. También cubre otros conceptos básicos, como habilitar el «agregar al banner de la pantalla de inicio» y usar HTTPS.
6. paquete web
paquete web es una herramienta extremadamente útil para agrupar los recursos de su aplicación de JavaScript, incluidos los activos sin código, como fuentes e imágenes. Estos serán tratados como objetos de JavaScript, lo que a su vez permite que se carguen más rápido. La plataforma también facilita significativamente la gestión de dependencias.
Solo recuerde que Webpack tiene una curva de aprendizaje pronunciada, lo que significa que podría estar buscando horas de búsqueda de tutoriales y guías. Sin embargo, los recursos de aprendizaje y la documentación disponibles en su sitio web no son aptos para principiantes. La buena noticia es que Webpack está ampliamente cubierto en otros sitios, incluida la sección de documentación de Angular 4.0.
7. GitHub
Finalmente, 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, incluidos los trabajadores de servicio de JavaScript y PWA. De hecho, puede encontrar los repositorios PWA.rocks y Webpack dentro de la plataforma. Esto le ayudará a profundizar su comprensión o incluso contribuirá a un mayor desarrollo.
Hoy en día, hay un puñado de repositorios que involucran PWA en GitHub. Puede aprender de estos proyectos o iniciar su propio repositorio mientras experimenta con su primera PWA. GitHub ahora también tiene funciones de gestión de proyectos, lo que le permite colaborar sin problemas con otros desarrolladores de forma remota.
Conclusión
Las aplicaciones web progresivas son el futuro de las experiencias web móviles, pero no muchas marcas las utilizan actualmente. Con las herramientas anteriores, ahora eres completamente capaz de crear un PWA destacado y establecer una presencia autorizada. Solo tenga en cuenta que las herramientas, los recursos y las prácticas de PWA evolucionan con las tecnologías en constante evolución de principales navegadores en línea.