Categorías
diseño de páginas web

La guía definitiva de aplicaciones web progresivas 2021

Guía de aplicaciones web progresivas 2021. La guía definitiva para alcanzar el éxito con aplicaciones web progresivas. Detalles para conseguir optimizar tus webs y dotarlas de las características y visibilidad online máxima.

¿Qué es exactamente una aplicación web progresiva? Definamos una PWA

Las aplicaciones web progresivas combinan lo mejor de la web con funciones que antes solo eran posibles en aplicaciones nativas. 

Guía de Aplicaciones Web Progresivas

Las PWA viven en el navegador como un sitio web tradicional y están completamente conectadas a la infraestructura de enlaces e índices de motores de búsqueda de la web. Al igual que las aplicaciones nativas, se pueden iniciar desde un icono de la pantalla de inicio, enviar notificaciones automáticas al dispositivo del usuario, cargar en una fracción de segundo y crearse para funcionar sin conexión. 

Las aplicaciones web progresivas no están separadas de la web. Son una mejora de la web que lo actualiza con las mejores prácticas actuales y aprovecha la tecnología web de vanguardia, como los trabajadores de servicios, para brindar una experiencia similar a una aplicación desde un navegador móvil.  

Quizás todavía no estés seguro de qué son exactamente . 

Esto es comprensible, ya que el término se difunde mucho, pero las definiciones sólidas son esquivas. Veamos la historia del término para aclarar las cosas. 

La definición original de una aplicación web progresiva

El término «Aplicación web progresiva» fue acuñado en 2015 por Francis Berriman y el ingeniero de Google Alex Russell . Habían estado observando la aparición de una nueva clase de aplicaciones web, y durante la cena decidieron definirlas y nombrarlas. 

Se les ocurrieron los siguientes criterios :

  • Responsive: para adaptarse a cualquier formato
  • Independiente de la conectividad : mejorado progresivamente con Service Workers para que puedan trabajar sin conexión
  • Interacciones similares a aplicaciones: adopte un modelo de aplicación Shell + Content para crear navegaciones e interacciones de aplicaciones
  • Fresco : transparente y siempre actualizado gracias al proceso de actualización del trabajador de servicio
  • Seguro : servido a través de TLS para evitar espionaje
  • Detectable : se pueden identificar como «aplicaciones» gracias a los manifiestos del W3C y al alcance de registro del trabajador de servicio que permite a los motores de búsqueda encontrarlos.
  • Reenganchable : puede acceder a las IU de reenganche del sistema operativo; por ejemplo, notificaciones push
  • Instalable : en la pantalla de inicio a través de indicaciones proporcionadas por el navegador, lo que permite a los usuarios «conservar» las aplicaciones que encuentran más útiles sin la molestia de una tienda de aplicaciones.
  • Vinculables : lo que significa que son de cero fricción, instalación cero y fáciles de compartir. El poder social de las URL es importante.

Puede ver cómo estos criterios cumplen la parte de «aplicación web» de la definición. 

Durante muchos años, empresas de posicionamiento seo como nosotros y otras crearon plataformas que permitieron a las empresas crear experiencias de aplicaciones con tecnologías web. Esto funciona muy bien hasta el día de hoy, pero hay compensaciones. Para crear una gran experiencia de aplicación nativa , pierde la capacidad de descubrimiento y la capacidad de vinculación de la web. 

Surgieron nuevas tecnologías web como los trabajadores de servicios (hablaremos de ellos más adelante) y cambiaron las cosas, lo que permitió a los desarrolladores crear experiencias que tomaron lo mejor de la experiencia de usuario de la aplicación nativa y lo pusieron en el navegador, conservando así todos los beneficios de la web. 

Experiencia de usuario
Mejorar la experiencia de usuario de una web

Ya no necesitaba aceptar una UX web móvil mediocre, mientras empujaba a las personas a descargar sus aplicaciones nativas para obtener el trato real. Puede brindar una excelente experiencia móvil en las tiendas de aplicaciones y la web, a todos los que interactúan con su marca en línea. 

Esto es lo que observaron Berriman y Russell. No inventaron nada, notaron un cambio en la web y lo nombraron. 

¿Qué pasa con la parte «progresiva» dentro del concepto de aplicación?

En este contexto, significa que las aplicaciones se crean con mejoras progresivas . Esta es una técnica de diseño centrada en crear una experiencia «básica» que funcione para todos, pero que se actualiza y mejora en dispositivos más avanzados. La experiencia de una aplicación web progresiva no es necesariamente la misma para todos los usuarios, se adapta según la potencia de su dispositivo y los permisos que otorgan. 

Entonces, ¿es suficiente la definición de Berriman y Russell? El problema es que pocas PWA realmente cumplen con todos esos criterios. Son más como una lista de deseos, un objetivo al que apuntar o un caso modelo. 

Definición de Google de una aplicación web progresiva

Microsoft ha estado entusiasmado con las PWA durante algún tiempo. Apple tomó algo de convicción y ahora está (en su mayoría) dentro. Sin embargo, entre las grandes tecnologías, fue Google quien realmente defendió las PWA desde el principio. 

Dicho esto, los propios Google no parecen estar 100% seguros de la definición. En 2015, publicaron una lista de 10 características, luego la redujeron a seis y luego agregaron tres nuevas. 

Actualmente, la definición de Google de una aplicación web progresiva incluye tres pilares. En su página de introducción , afirman que las PWA son:

“Aplicaciones web que se han diseñado para que sean capaces, fiables e instalables . Estos tres pilares los transforman en una experiencia que se siente como una aplicación específica de la plataforma «

Esto es más útil, pero quizás tampoco es la definición definitiva, ya que es amplia. Sin embargo, apunta al punto clave, que las PWA están trayendo experiencias a la web que tradicionalmente estaban asociadas exclusivamente con plataformas nativas. 

La definición técnica de una aplicación web progresiva 

Una tercera forma en que podemos definir una PWA es especificando criterios puramente técnicos, en lugar de UX. 

Esto es lo que el desarrollador web y autor Jeremy Keith intentó en su publicación de blog de 2017 ¿Qué es una aplicación web progresiva? .

Keith piensa que la confusión sobre las definiciones de PWA es infundada y que, básicamente, se deben cumplir tres criterios:

  1. HTTPS: las PWA deben ejecutarse en servidores seguros que empleen HTTPS. Los trabajadores de servicio son esenciales para su potencial y solo se pueden usar si tiene HTTPS en su lugar.
  2. Un Service Worker: esencialmente un archivo JavaScript que se ejecuta por separado del «hilo» del navegador principal y permite al desarrollador controlar cómo la aplicación maneja las solicitudes de red y el almacenamiento en caché. Esto ayuda a impulsar la impresionante velocidad y las capacidades fuera de línea de las PWA.
  3. Un manifiesto de aplicación web: un archivo JSON que proporciona una descripción de la aplicación al navegador, incluidos detalles como el nombre, el autor, el icono, la descripción y los recursos para ejecutarla. Esto asegura que la aplicación sea detectable. 
HTTPS en aplicaciones web progresivas

Keith continúa señalando que esta es una definición mínima y básica. Las PWA son capaces de mucho más, pero deben cumplir estos tres criterios técnicos para hacer el corte. 

Así que hemos visto la definición original de observación / aspiración, la definición impulsada por UX de Google y una definición técnica minimalista. ¿Qué podemos suponer? Aunque todavía puede haber un poco de ambigüedad, ahora tenemos una buena idea de lo que es una aplicación web progresiva. 

Una PWA es un sitio web moderno, seguro y de carga rápida que utiliza tecnologías web de vanguardia para lograr estas características. A diferencia de los sitios web tradicionales, funciona y se siente como una aplicación nativa para el usuario, y «escapa» de la pestaña del navegador en el proceso. 

Esta es una excelente manera de decirlo. Las PWA son la última generación de la web. Son aplicaciones web que pueden aprovechar el potencial de la tecnología de navegador moderna. Al convertir su propio sitio web en una PWA, le proporciona la “energía” necesaria para que funcione de manera óptima. 

Beneficios de la aplicación web progresiva

Anteriormente dijimos que si tienes una página web y está vinculado de alguna manera al éxito de su negocio, debe crear una PWA. 

Puede parecer una afirmación audaz, pero es la verdad. ¿Por qué? 

En pocas palabras, al no crear una PWA, es probable que deje clientes, ingresos y crecimiento sobre la mesa. Como lo expresaron Pete LePage y Sam Richard del equipo web de Google:

Las empresas que han lanzado Progressive Web Apps han obtenido resultados impresionantes. Por ejemplo, Twitter experimentó un aumento del 65% en las páginas por sesión, un 75% más de tweets y una disminución del 20% en la tasa de rebote, todo mientras reducía el tamaño de su aplicación en más del 97%. 

¿Necesitas diseñar una Progressive Web Apps?

Nos encargamos de todo. Contacta con nosotros.

E-mail: info@linkposicionamientoweb.com
https://www.linkposicionamientoweb.com

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *