Progressive Web Apps

Las Progressive Web Apps cambiarán el mercado mobile y SEO

Que la forma de acceso a la web es cada vez más mobile no es novedad. Durante una charla en el evento Google I/O 2016, Alex Russell, ingeniero en software de Google y referente del proyecto de Progressive Web Apps, se refirió a estas afirmando que “desdibujan la línea de separación entre el contenido web y las aplicaciones, pero mantienen las fortalezas de la web”.

¿Pero qué son las Progressive Web Apps (o PWA)? Las aplicaciones web progresivas se refieren a una nueva generación de aplicaciones que van incrementando su funcionalidad a medida que las utilizamos, se van convirtiendo en apps con su uso. Se construyen sobre estándares de desarrollo web como HTML, CSS y JavaScript, y una nueva generación de APIs de JavaScript. Lo realmente importante de entender es que las Progressive Web Apps se comportan como aplicaciones web nativas (es decir de iOS, Android, Micrososft), aunque utilizan tecnologías web. Y no necesitan descargarse de ningún app store. ¿Interesante no?

Las PWA son apps más confiables

Las PWA son apps más confiables. Funcionan sin conexión a la red

 

Hay algunas características más que es bueno conocer. Las PWA pueden acceder offline a la página (sin internet) sin tener obviamente la posibilidad de actualizar la información al instante, pero pudiendo seguir usándolas tranquilamente. Otro dato que las pone por delante de las apps tradicionales es que estos sitios web cargan rapidísimo (incluso más rápido que las apps nativas en muchos casos). Pueden disparar notificaciones en el móvil sin necesidad de que tengas abierta la página de la que en ese momento recibes notificaciones. Y lógicamente puedes agregar tus PWA a tu HomeScreen del teléfono como acceso directo. Son apps como a las que estamos habituados, solo que en una suerte de versión mejorada.

Las PWA son apps más veloces

Las PWA son apps más veloces. No demoran en la carga y tienen rápidas transiciones

 

Algo que afecta a su implementación es que como las APIs modernas no funcionan en HTTP, las PWA funcionan en HTTPs necesariamente. Para conocer los detalles más técnicos de las tecnologías web y apps nativas y por qué las PWA tienen las ventajas de ambos, recomiendo leer este excelente post.

Las PWA son apps más atractivas

Las PWA son apps más atractivas. Experiencia inmersiva y comportamiento de app en tu dispositivo

 

Progressive Web Apps y SEO

Ahora bien, ¿en qué modifican las PWA al mercado de desarrollo de apps y al mundo de los negocios en general? Para los usuarios son una ventaja y excepto algunas aplicaciones específicas que convendría mantener de la forma tradicional (al menos por el momento) la gran mayoría (me atrevo a decir un 90% de las apps que existen actualmente) no tiene una fuerte razón para no convertirse a PWA. Y en los próximos meses. ¿Por qué? Si todas las ventajas mencionadas arriba no te convencieron, voy a hacer hincapié en una pequeñez… no necesitan descargarse a tu dispositivo. Ya no tendríamos que elegir si utilizar una u otra aplicación. Ya podemos probar con mayor facilidad cuantas opciones se nos presenten interesantes y, si no nos agradan, no tuvimos que hacer espacio para esa app. No hace falta estar en un lugar con buen wifi para poder descargar sus 30MB y poder empezar a usar esa nueva app que nos recomendó un amigo en un bar, podemos probarla ahí mismo. Y sin tener que estar actualizándolas cada semana! Esto cambia el juego.

Para las empresas de desarrollo web es una buena noticia y deberían empezar a desarrollarlas ahora mismo: es más trabajo! Para el resto del mundo corporativo que lanzó o estaba pensando en lanzar una app es también una buena noticia: de esta forma será más sencillo lograr que más personas prueben su aplicación y, si es realmente buena, que la sigan utilizando.

Pero hay algo más. Si, el SEO se verá afectado por esto, para bien. Google puede rastrear una PWA tal como lo hace con una página en JavaScript, lo cual es una gran ventaja de cara a la visibilidad de los desarrollos con estas tecnologías, aunque hay algunas implicancias técnicas también que merecen atención. Desde la web de Google hacen algunas recomendaciones que es muy útil tener presentes. Las repasamos brevemente:

  • Hacer el contenido indexable. Usar carga del contenido híbrida o del lado del servidor, no del lado del cliente ya que tiene algunas complicaciones más.
  • Usar URLs limpias. Hacer cada URL accesible de forma independiente. El uso de # en las URLs debe evitarse.
  • Especificar URLs canónicas. Para eliminar la confusión entre diferentes páginas con el mismo contenido, se debe marcar una como canónica y todas las demás referir a esta.
  • Diseñar para múltiples dispositivos. Adaptar fuentes, formatos, imágenes y demás para hacer que la experiencia en cada dispositivo sea la correcta.
  • Desarrollar iterativamente. La ventaja de trabajar de esta forma es que se puede ver el impacto de cada nuevo cambio y corregir errores sobre la marcha.
  • Mejoras progresivas. Antes de usar Service Workers chequear la disponibilidad de su API en el navegador en vez de bloquear recursos de antemano según el navegador, ya que estos van mejorando constantemente.
  • Hacer pruebas con Search Console. Usar esta herramienta permite conocer si Google está pudiendo leer correctamente toda la información. Además es importante siempre recordar tener un archivo sitemap actualizado.
  • Utilizar datos estructurados. Schema.org permite etiquetar no todas quizás, pero si muchas de las páginas de una PWA de forma de darle más claridad, especificando qué tipo de contenido poseen.
  • Utilizar Open Graph y Twitter Cards. Similar al punto anterior, de corresponder, usar estos formatos de metadata es valioso.
  • Testear en múltiples navegadores. Usar herramientas que permitan comprobar que el comportamiento de la PWA es similar en los distintos navegadores.
  • Medir la performance de carga del sitio. Dado que el 40% de las personas abandonará un sitio si demanda más de 3 segundos para cargar, este es un punto importante si queremos generar una buena experiencia de usuario.
SEO para Progressive Web Apps

Es posible hacer SEO para Progressive Web Apps y así adelantarse a la competencia

 

Para saber cómo Google ve nuestra app desarrollada como PWA, podemos hacerlo a través de esta herramienta y así saber si estamos por el buen camino.

No quiero terminar el apartado de SEO sin hacer mención a una característica más que hace de las PWA algo de gran importancia: son linkeables: La web está basada en links, las apps están yendo hacía allí con el concepto de Deep Linking. Cuando un enlace apunte a una página interna de una PWA bien estructurada (siguiendo los pasos anteriores) todo lo que conocemos referido al valor de los links para buscadores, entra en juego. SEO para apps, de verdad.

 

¿Una nueva era?

En resumen, las Progressive Web Apps son una nueva generación en interacción digital y proveen una nueva experiencia de usuario, mejorada. Las empresas desarrolladoras de apps deben ser conscientes de las cuestiones que afectan la indexación en buscadores si quieren lograr un impacto tanto en la usabilidad como en la facilidad de encontrarlas en una búsqueda. Qué tan rápido comenzarán a desarrollar este tipo de aplicaciones es algo que está por verse, probablemente el impulso de los propios usuarios sea el termómetro más útil, ya que sabemos que las empresas siempre van detrás de las tendencias y son bastante temerosas de hacer cambios “a lo que ya funciona”.

Esto no viene a reemplazar un sitio web tradicional, las empresas no deberían empezar a crear Progressive Web Apps porque es la nueva tendencia en desarrollo. Esto ayuda a la experiencia en dispositivos móviles, cuando se justifica. Mientras tanto, la mayoría de los sitios web no se verán impactados por esta novedad, aunque las apps ciertamente si.

Para ver algunos ejemplos de apps PWA en funcionamiento les dejamos un link a este compendio de casos que vale la pena ver en pwa.rocks.

Compartir:Share on Facebook94Tweet about this on TwitterShare on LinkedIn28Share on Google+3Pin on Pinterest0

Querés compartir tu opinión con nosotros?

CONTACTO