Diseño web receptivo y aplicación web progresiva (PWA): las diferencias

Dado que estos dos son tan similares en la forma en que se ven y funcionan, debe preguntarse por qué no hay una comparación más detallada entre los dos enfoques populares para el desarrollo web: diseño web receptivo y aplicación web progresiva. Bueno, esto es todo . En este artículo, compararemos el diseño web receptivo con la aplicación web progresiva y descubriremos en qué se diferencian realmente entre sí.

Diseño web adaptable

Lo que es

El diseño web receptivo (RWD) es un enfoque para el desarrollo web descrito por primera vez por Ethan Marcotte en 2010, cinco años antes de la concepción de la aplicación web progresiva.

Cómo funciona

Básicamente, la filosofía del diseño web receptivo es que el diseño y el desarrollo deben realizarse con el objetivo de responder al dispositivo del usuario, lo que significa responder al comportamiento, tamaño, plataforma y orientación del dispositivo en uso. Esto se logra con el uso de cuadrículas fluidas, imágenes flexibles y consultas de medios CSS:

Las cuadrículas fluidas, las imágenes flexibles y las consultas de medios son los tres ingredientes técnicos para el diseño web receptivo...

Ethan Marcotte, Diseño Web Responsivo

Rejillas fluidas

Los sitios web receptivos diseñados con cuadrículas fluidas pueden manejar mejor los diferentes tamaños de pantalla del mercado ya que, en lugar de definir dimensiones basadas en píxeles, la cuadrícula fluida adopta un nuevo cálculo basado en porcentajes.

Imágenes flexibles

Las imágenes en la web no son naturalmente fluidas, pero con algunas configuraciones (propiedad de width configurada en 100% y la propiedad de height configurada en auto ), cualquier imagen se puede hacer para que responda en todos los dispositivos.

Consultas de medios CSS

Si bien una página web receptiva con imágenes flexibles y cuadrículas fluidas es técnicamente receptiva, no se ve tan bien como podría ser. Aquí es donde entran en juego las consultas de medios CSS, ya que se utilizan para crear una experiencia aún mejor, adaptada a diferentes dispositivos. Estas experiencias personalizadas a menudo se introducen mediante la adición de puntos de interrupción que surten efecto en tamaños de pantalla específicos.

En general, el diseño web receptivo ha hecho que la Web actual sea mucho más accesible, ya que el enfoque elimina la necesidad de más fases de desarrollo que antes se requerían para adaptarse a los diferentes tamaños de pantalla del mercado. O, en palabras de su creador, este enfoque del desarrollo web finalmente nos permite “ diseñar para el flujo y reflujo de las cosas ”.

Ejemplos

Los sitios web receptivos son un lugar común hoy en día, y casi todos los sitios web con los que te encuentras son algo receptivos en su naturaleza.

Aplicaciones web progresivas

Lo que es

Acuñada por primera vez por Alex Russel en 2015, la aplicación web progresiva es la próxima evolución natural de la web debido a sus muchos beneficios sobre el típico sitio web receptivo. La parte “ progresiva ”, según Pete LePage – Google Developer Advocate, se puede explicar como “ a medida que el usuario crea una relación progresiva con la aplicación con el tiempo, se vuelve cada vez más poderosa ”.

Para ponerlo en términos sencillos, un PWA es su sitio web similar a una aplicación con (casi) todas las funciones que puede esperar de una aplicación móvil nativa , incluidas notificaciones automáticas, capacidades fuera de línea, etc. Y debido a esto, toda la experiencia es un paso adelante con respecto a su contraparte del sitio web receptivo, ya que PWA puede conservar todos los supuestos beneficios que vienen con una plataforma basada en la web.

 Artículo relacionado: ¿Qué es una aplicación web progresiva?

Cómo funciona

En realidad, es bastante fácil resumir los componentes principales de una PWA. Básicamente, para hacer posibles todas las funciones progresivas antes mencionadas, estos son los requisitos:

Manifiesto de la aplicación web

El manifiesto de la aplicación web es un archivo JSON que proporciona los metadatos necesarios para el proceso de instalación de su PWA y determina cómo se presenta su PWA en la pantalla de inicio del usuario.

trabajadores de servicios

Considerado universalmente como el componente fundamental que hace posibles todas las características progresivas de PWA, los trabajadores de servicio se ejecutan independientemente del navegador y en un subproceso diferente al JavaScript principal.

Contextos seguros

Como un nuevo estándar de la Web, se requiere que una PWA se corte a través de un protocolo seguro: HTTPS. Esto garantiza una comunicación segura entre el usuario y el servidor y, a cambio, garantiza una experiencia sin riesgos.

Ejemplos

Como las PWA no se comportan de manera diferente a las aplicaciones móviles nativas, es posible que haya visitado un sitio de PWA antes sin saberlo. Piense en grandes sitios similares a aplicaciones como Instagram y Pinterest: todos funcionan con PWA.

 Lectura recomendada: 12 mejores ejemplos de aplicaciones web progresivas en 2020

donde se superponen

Una experiencia similar con características modernas.

Si todo tiene sentido para usted hasta ahora, debería ver que el diseño web receptivo (RWD) y PWA se superponen mucho en lo que respecta a la experiencia del usuario. Técnicamente, PWA responde , ya que el enfoque está hecho para ser adecuado para ver en todos los dispositivos, con un toque moderno para habilitar más funciones similares a las de una aplicación.

Y dado que ambos son enfoques para el desarrollo web, comparten casi todos los mismos beneficios de la Web, que incluyen:

• Una URL, una base de código para todas las plataformas
• Seguridad mejorada con HTTPS
• Mejor visibilidad y siempre actualizado

donde difieren

Aquí es donde las cosas se ponen interesantes, ya que estos dos enfoques del desarrollo web, aunque en su mayoría son similares en apariencia, difieren mucho en sus impactos en el mundo real.

En términos de características

Un PWA, por definición, viene con más funciones que su sitio web receptivo típico. Al aprovechar los avances recientes en las tecnologías web, es decir, los trabajadores de servicio y el manifiesto de la aplicación web, PWA puede ofrecer funciones que antes eran exclusivas de las aplicaciones móviles nativas, como:

Añadir a la pantalla principal

Con trabajadores de servicio registrados y un manifiesto de aplicación web, PWA se puede instalar en todos los dispositivos que tengan un navegador compatible.

>> Obtenga más información: cree su primera PWA

Notificaciones push

A través de los trabajadores del servicio, puede enviar notificaciones y hacer que se muestren en los dispositivos de los usuarios como lo haría una aplicación nativa. Esta es una característica relativamente reciente de la web que aprovecha la API de inserción, la API de notificaciones y el protocolo de inserción web; y en un futuro cercano, esta función solo mejorará gracias a la llegada de la API de activación de notificaciones y credencialización.

Capacidades fuera de línea

Gracias a la ayuda del proxy de red programable en el navegador, a saber , los trabajadores del servicio , PWA puede almacenar en caché y servir contenido fuera de línea de manera proactiva sin tener que depender de mecanismos de almacenamiento en caché obsoletos, como el caché HTTP.

Notas : los sitios web receptivos aún pueden beneficiarse de todas las API existentes de la web para brindar una experiencia de usuario óptima, solo que no obtendrá todas las funciones que dependen de los trabajadores del servicio.

 Lectura recomendada: aplicación web progresiva (PWA) y acceso de hardware

En términos de rendimiento

Dado que los sitios web receptivos siguen siendo el sitio web típico que se ve frenado por todos los inconvenientes asociados con el mecanismo de almacenamiento en caché HTTP actual, es razonable esperar un mejor rendimiento de PWA, ya que utiliza un mecanismo de almacenamiento en caché más nuevo y más orientado al rendimiento llamado trabajadores de servicio.

Mecanismo de almacenamiento en caché más rápido

Con los trabajadores de servicio registrados, puede tener control sobre exactamente lo que se almacena en caché y, como resultado, generar mejores experiencias para los visitantes que regresan.

El impacto en el rendimiento del mundo real de los trabajadores de servicios tampoco es algo que no se haya observado detenidamente. Al usar el tiempo para pintar por primera vez como una métrica para medir la primera experiencia del usuario con un sitio web, Google mismo realizó un estudio para observar el rendimiento de la aplicación web Google I/O con un grupo controlado (donde un trabajador del servicio controla la aplicación web) y un grupo compatible (donde el servicio funciona es compatible con el navegador en uso, pero aún no controla la aplicación web).

Los resultados fueron particularmente impresionantes en el escritorio, ya que aquí podemos ver que los trabajadores de servicio hicieron su parte para reducir el tiempo original firstpaint (912 ms) a solo 583 ms . Esto es lo más parecido a una experiencia instantánea posible.

Sin embargo, las cosas son un poco menos impresionantes en los dispositivos móviles:

Aquí podemos ver que el final del grupo controlado todavía se parece un poco al grupo compatible. Esto se debe en gran parte al hecho de que en dispositivos móviles, los subprocesos de los trabajadores del servicio no están tan optimizados y necesitan más tiempo para iniciarse en comparación con los equipos de escritorio.

En general, el aumento de rendimiento logrado con los trabajadores de servicio, o en otras palabras, con PWA, es nada menos que fenomenal. Por supuesto, todavía queda trabajo por hacer en el lado de los trabajadores de servicios móviles; pero creemos que, en general, sigue siendo un paso marginal hacia lo que alguna vez fue la Web, y un paso en la dirección correcta.

En términos de seguridad

HTTPS: la línea que divide

Si bien un sitio web receptivo típico puede ser tan seguro como una PWA, no se requiere que los sitios web receptivos usen protocolos de comunicación seguros. Este es el caso opuesto con los sitios web con PWA, ya que Google, fundador de PWA, requiere que todas las comunicaciones entre el servidor y el cliente en un PWA se cifren mediante el uso de HTTPS.

La mayoría de las funciones relacionadas con una PWA, como la geolocalización e incluso los trabajadores de servicios, están disponibles solo una vez que la aplicación se ha cargado mediante HTTPS.

Documentos web de MDN, aplicaciones web progresivas (PWA)

 Artículo relacionado: ¿Necesita HTTPS?

Conclusión

La mejora del rendimiento mencionada anteriormente lograda con los trabajadores de servicios, combinada con características adicionales similares a las de una aplicación, como notificaciones push, agregar a la pantalla de inicio (y en un futuro cercano, geofencing y sincronización periódica), todo demuestra que PWA es el candidato adecuado para ser el próximo evolución de la red. A partir de ahora, el movimiento PWA ya es ampliamente alentado por casi todos los grandes, incluido Microsoft con su impulso de adopción de PWA en Windows 10. No pasará mucho tiempo antes de que veamos un futuro lleno de aplicaciones web progresivas, como el que Steve Jobs imaginó:

El motor completo de Safari está dentro del iPhone. Y así, puede escribir increíbles aplicaciones Web 2.0 y Ajax que se ven y se comportan exactamente como las aplicaciones en el iPhone. Y estas aplicaciones pueden integrarse perfectamente con los servicios de iPhone. Pueden hacer una llamada, pueden enviar un correo electrónico, pueden buscar una ubicación en Google Maps.

Steve Jobs, 2007