{"id":31663,"date":"2024-11-12T12:39:31","date_gmt":"2024-11-12T12:39:31","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31663"},"modified":"2025-05-21T15:11:59","modified_gmt":"2025-05-21T15:11:59","slug":"pwa-progressive-web-apps","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/es\/wiki\/pwa-progressive-web-apps","title":{"rendered":"PWA (Aplicaci\u00f3n web progresiva)"},"content":{"rendered":"

\u00bfQu\u00e9 es una PWA o aplicaci\u00f3n web progresiva?<\/span><\/h2>\n

Las aplicaciones web progresivas o PWA por sus siglas en ingl\u00e9s (Progressive web apps), son aplicaciones web que se ven, se sienten y act\u00faan como aplicaciones nativas, pero que se ejecutan en el navegador como cualquier p\u00e1gina web.\n<\/p>\n

En este contexto, en lugar de distinguirse claramente de las aplicaciones nativas que descargamos en el m\u00f3vil y las aplicaciones web a las que accedemos mediante el navegador, las PWAs se ubican a medio camino entre ambas, con el objetivo de brindar una experiencia de aplicaci\u00f3n similar a la nativa, mientras se mantiene una base de c\u00f3digo \u00fanica, ejecutable en cualquier dispositivo.\n<\/p>\n

As\u00ed pues, por una parte, podemos decir que una aplicaci\u00f3n nativa es aquella que se ejecuta directamente en un dispositivo, sea un smartphone, una desktop, etc. Y como ha sido dise\u00f1ada para una plataforma espec\u00edfica, permite aprovechar al m\u00e1ximo todas las capacidades del dispositivo.\n<\/p>\n

Por otra parte, las aplicaciones web est\u00e1n constituidas, precisamente, para ejecutarse en la web a trav\u00e9s de los navegadores, y, por ende, pueden utilizarse en cualquier dispositivo que pueda acceder a un navegador sin la necesidad de mantener una base de c\u00f3digo espec\u00edfica para el dispositivo. Sin embargo, este tipo de aplicaciones tiene funciones m\u00e1s limitadas y no consiguen sacar provecho de las capacidades m\u00e1ximas de los equipos.\n<\/p>\n

Es aqu\u00ed donde entran en juego las bondades de las aplicaciones progresivas, pues como ya se coment\u00f3, son una mezcla de ambos tipos de apps: est\u00e1n dise\u00f1adas para su uso en navegadores (empleando tecnolog\u00edas HTML, CSS y Javascript) pero adem\u00e1s pueden acceder al hardware de los dispositivos, enviar notificaciones y funcionar tal como lo har\u00eda cualquier aplicaci\u00f3n nativa.\n<\/p>\n

\"\n<\/p>\n

Ejemplo de una PWA en trivago.com<\/a>\n<\/p>\n

Caracter\u00edsticas de las PWAs<\/span><\/h2>\n

Cualquier aplicaci\u00f3n web es capaz de convertirse en una aplicaci\u00f3n web progresiva, ya que se cimientan sobre la misma tecnolog\u00eda: HTML, CSS y Javascript. Sin embargo, una PWA se comporta y funciona muy diferente a los sitios web en muchos aspectos.\n<\/p>\n

A nivel estructural, una PWA contiene un archivo de manifiesto en formato JSON, el cual alberga los metadatos de la app, tales como: el nombre y el \u00edcono, entre otros m\u00e1s. Este manifiesto permite que la aplicaci\u00f3n se pueda a\u00f1adir a la pantalla de inicio de cualquier dispositivo y que la usuaria\/o interact\u00fae con ella como con cualquier aplicaci\u00f3n nativa, es decir, se abra como tal, aunque sencillamente se trate de una pesta\u00f1a del navegador.\n<\/p>\n

Adem\u00e1s, las PWAs deben ser muy ligeras para que puedan equipararse con el rendimiento de las apps nativas. Por ello, deben cargar con rapidez mientras entregan la misma experiencia en cualquier dispositivo sin importar si una usuaria\/usuario se conecta desde un smartphone o desktop. Todo esto se logra, en gran medida, gracias a los micro servicios.\n<\/p>\n

Siguiendo esta l\u00ednea, un micro servicio es una manera de dividir las funciones de una app entre diversas tareas peque\u00f1as que se ejecutan de manera independiente al resto de la aplicaci\u00f3n. Mayormente, se aplican en el procesamiento de tareas o para enviar y recibir datos, aunque tambi\u00e9n proporciona funcionalidades offline a las mismas aplicaciones.\n<\/p>\n

A estas tareas se las conoce como trabajadores de servicio, es decir, un tipo de trabajador web que se trata como un subproceso separado del navegador, lo que los vuelve \u00fatiles para tareas inform\u00e1ticas intensas o cuando las conexiones son p\u00e9simas.\n<\/p>\n

As\u00ed y para no deteriorar la experiencia de usabilidad, estas tareas se descargan para procesos que operan en segundo plano y que, al culminar la tarea, la app puede recuperar el resultado sin perjudicar el rendimiento.\n<\/p>\n

Sabiendo esto, los trabajadores de servicio o subprocesos se instalan en un dispositivo, utilizando una API de trabajador web est\u00e1ndar que se encarga de, entre muchas otras funciones, monitorear y enviar notificaciones autom\u00e1ticas. De esta forma, la experiencia de usabilidad no se ve perjudicada y, adem\u00e1s, cuando se buscan nuevas notificaciones, puede ejecutarse incluso en segundo plano.\n<\/p>\n

\u00bfPara qu\u00e9 se utiliza una PWA?<\/span><\/h2>\n

Las aplicaciones web progresivas se utilizan, por lo general, con apps que funcionan como software de servicios almacenados en la nube. De hecho, est\u00e1n pensadas para poder acceder a ellas donde sea y desde cualquier dispositivo.\n<\/p>\n

Un ejemplo muy conocido de una aplicaci\u00f3n progresiva es Facebook, pues cuando sus usuarias\/usuarios visitan el sitio web desde un dispositivo compatible con la PWA, se despliega una notificaci\u00f3n que permite a la usuaria\/o instalar la extensi\u00f3n de Facebook como si fuera una app en el dispositivo e incluso a\u00f1ade un \u00edcono a la pantalla de inicio donde se muestra la pesta\u00f1a de Facebook en el navegador.\n<\/p>\n

As\u00ed pues, las PWAs son de inter\u00e9s para cualquier marca, ya que pueden incrementar la participaci\u00f3n de las usuarias y usuarios en un sitio web, as\u00ed como tambi\u00e9n puede disminuir la tasa de rebote<\/a> si se compara con un inicio de sesi\u00f3n t\u00edpico en cualquier sitio web.\n<\/p>\n

\u00bfC\u00f3mo funcionan las aplicaciones progresivas?<\/span><\/h2>\n

Las PWAs se construyen sobre numerosas tecnolog\u00edas adicionales para proporcionar la experiencia y funcionalidad de una aplicaci\u00f3n nativa. Es por ello que, adem\u00e1s del manifiesto o los trabajadores de servicio, algunas hacen uso del almacenamiento web o la tecnolog\u00eda Web Assembly, entre muchas otras m\u00e1s.\n<\/p>\n

Por ejemplo, el almacenamiento web proporciona una funcionalidad de alojamiento de base de datos (clave-valor), utilizando el sistema de almacenamiento local del mismo dispositivo, facilitando de este modo el guardado de datos por sesi\u00f3n y tambi\u00e9n de los constantes.\n<\/p>\n

Esto no solo permite descargar los datos guardados en el dispositivo de la usuaria\/o, sino que tambi\u00e9n incrementa la velocidad de su recuperaci\u00f3n, as\u00ed como tambi\u00e9n mejora su funcionamiento mientras la persona est\u00e1 desconectada.\n<\/p>\n

Por otro lado, la Web Assembly permite que el c\u00f3digo precompilado se ejecute en un navegador. Esto significa que los c\u00f3digos escritos en lenguajes como el C, C++ y Javascript se pueden utilizar en la PWA, lo cual resulta de gran ayuda junto con los webs workers porque de este modo, las aplicaciones progresivas pueden traspasar tareas que requieren de un uso intensivo del procesador de los dispositivos de las usuarias\/os hacia servidores remotos y lenguajes de programaci\u00f3n que son m\u00e1s eficientes que Javascript en tareas espec\u00edficas, todo ello sin ralentizar la experiencia del usabilidad.\n<\/p>\n

Importancia de las PWAs en el SEO<\/span><\/h2>\n

Las aplicaciones web progresivas no generan un beneficio inherente en el SEO, pero la correcta implementaci\u00f3n de las buenas pr\u00e1cticas puede asegurar que una PWA est\u00e9 tan bien optimizada para el SEO como el mismo sitio web.\n<\/p>\n

Con todo, las desarrolladoras\/es deben ser cuidadosas\/os con sus optimizaciones, pues existe un problema que afecta a las aplicaciones de una p\u00e1gina y consiste en lo expresado a continuaci\u00f3n.\n<\/p>\n

Se sabe que los sitios web tradicionales se procesan en un servidor y env\u00edan el documento HTML completo a la app cliente. Ahora bien, cuando el o la navegante cliquea en un enlace, se lo reenv\u00eda a una p\u00e1gina diferente, la cual carga un nuevo documento HTML que, a su vez, es escaneado e indexado<\/a> por los buscadores durante su an\u00e1lisis de contenidos, como las keywords<\/a>, para luego incluirlos en sus resultados de b\u00fasqueda.\n<\/p>\n

Sin embargo, una PWA y una aplicaci\u00f3n de una sola p\u00e1gina mueven la mayor parte del renderizado<\/a> al lado del cliente, mientras que los nuevos datos se actualizan en vivo y en unidades discretas sin que la usuaria o usuario tenga que refrescar la p\u00e1gina completa.\n<\/p>\n

Inicialmente, esto caus\u00f3 problemas con los buscadores, puesto que esperaban que se tratara de p\u00e1ginas web con URLs<\/a> \u00fanicas para indexar.\n<\/p>\n

Sin embargo, la tecnolog\u00eda de b\u00fasqueda ha madurado gracias a la API del historial del HTML5<\/a>, la cual ahora proporciona una manera de que las PWAs puedan generar URLs vinculables, que facilitan a los motores de b\u00fasqueda la indexaci\u00f3n y dirigen a las usuarias\/usuarios al contenido correcto dentro de una aplicaci\u00f3n progresiva.\n<\/p>\n

Ampliar conocimientos<\/span><\/h2>\n