PWA es solo

El concepto de aplicaciones web progresivas (PWA) ha existido durante mucho tiempo, desde la primavera de 2018, las aplicaciones de esta clase son compatibles con todos los principales navegadores, sin embargo, la prevalencia de las tecnologías PWA, a pesar de sus ventajas obvias, sigue siendo muy baja.

Los expertos de Google (incluido Habré) escriben de manera muy informativa y competente sobre PWA, pero sus recomendaciones son más útiles para aquellos que ya están familiarizados con el tema. Este artículo pretende mostrar que Progressive Web Apps no es difícil, y los desarrolladores de cualquier sitio pueden y deben usar estas tecnologías ahora.

Filosofía de PWA

Para empezar, vale la pena señalar que no existe una definición exacta de la aplicación PWA. No puede decir claramente si este sitio es PWA o no. Esta es una escala larga en la que la estudiante de segundo año Petya, que agregó un manifiesto de aplicación web, puede crear un icono de página de inicio en la pantalla de inicio del teléfono móvil; e exteriormente indistinguible de un sitio de noticias regular, solo los usuarios pueden decir que es sorprendentemente rápido y conveniente, pero todo porque en algún lugar dentro de él late el corazón cálido de un trabajador de servicio (trabajador de servicio).

Relatividad PWA se encuentra en el nombre mismo - "progresivo". ¿Progresivo comparado con qué y en qué medida? Pero esta relatividad, de hecho, es muy buena, porque puede estudiar tecnologías PWA y aplicarlas en sus proyectos actuales gradualmente, sin remodelación y refactorización global.

Por otro lado, PWA tiene una idea, y la idea es bastante clara y poderosa. Y cuán lentamente se desarrolla, bien puede indicar la magnitud de las consecuencias.

Arquitectura PWA

PWA es una aplicación web creada usando ciertas tecnologías para lograr objetivos específicos.



Los objetivos se descifran de la siguiente manera:

Fiable: la aplicación se descarga y se muestra inmediatamente, independientemente del estado y la calidad de la conexión de red.
Rápido (rápido): el intercambio de datos a través de la red es rápido, la interfaz de usuario es fluida y receptiva.
Atractivo (atractivo): hace que la experiencia del usuario con la aplicación sea cómoda y agradable, lo que lo impulsa a querer experimentarla una y otra vez ...

Desde el punto de vista de Google, esto es exactamente lo que separa los sitios web de las aplicaciones nativas en términos de apariencia.

En otras palabras, al desarrollador se le ofrecen herramientas (trabajador de servicio, notificaciones automáticas, etc.) y se indican los objetivos (el sitio / aplicación debe cargarse rápidamente, trabajar en una conexión débil, no "retrasarse", trabajar fuera de línea si es necesario). Hasta dónde llegará el desarrollador en este camino depende solo de él.

PWA y aplicaciones nativas

El hecho de que PWA se parezca a las aplicaciones nativas es, más bien, una solución cosmética (aunque es importante para el usuario desde un punto de vista psicológico). Pero el hecho de que sean similares internamente (todos los recursos principales de la aplicación se pueden almacenar en el cliente, solo el contenido cambiante se transmitirá a través de la red) es un gran logro.

Incluso podrías llamarlo una revolución oculta. De hecho, el navegador se utiliza como una especie de máquina virtual que almacena y ejecuta la aplicación PWA. Como Android es una máquina virtual para aplicaciones de Android, el navegador se convierte en una máquina virtual para PWA. Del mismo modo que una aplicación nativa accede a sus recursos a través de un sistema de archivos, PWA también accede a sus recursos, aunque a través de HTTP, pero almacenados localmente.

Y por una vez, todo esto funciona igual en todos los principales navegadores y en todas las plataformas principales.


Por supuesto, existen diferencias entre PWA y las aplicaciones nativas, principalmente en los derechos de acceso a los recursos del sistema, pero el trabajo en esta dirección va incluso en el campo de HTML5 puro, y para PWA los privilegios adicionales no serán un problema.

Tecnología

Considere brevemente los principales motores de PWA.

Trabajador de servicio

El corazón de la PWA es el trabajador de servicio. Esta es la capa proxy entre el frontend y el backend, ubicada en el navegador. Todas las solicitudes del navegador pasan por él. Esta división en dos capas independientes nos permitió hacer la transición de un sitio web regular a PWA lo más simple posible.

Desde el almacenamiento, Service Worker tiene acceso a Cache Storage para recursos web e IndexDB para datos. Pero, lo más importante, total libertad para implementar la lógica empresarial.

Puede, por ejemplo, aceptar una solicitud de un navegador, verificar el estado de la red, tomar datos del almacenamiento, realizar operaciones con ellos y devolver un cierto resultado al navegador, lo que pensará que la respuesta vino del servidor. O no lo hará, como quiere el desarrollador, lo hará. Dos capas de navegador (cliente frontend y Service Worker) le permiten escribir aplicaciones completas.

Al mismo tiempo, para la mayoría de los sitios, la funcionalidad de almacenamiento en caché del Service Worker será suficiente para convertirse en una PWA.

PWA no depende de ningún framework, es javascript puro, aunque incluso los especialistas de Google en Habré por alguna razón aconsejan usar generadores de código de biblioteca. Service Worker está bellamente escrito a mano, y esto es necesario para comprender y controlar la lógica de su aplicación.

Desde un punto de vista programático, Service Worker es un archivo javascript que se incluye en el código html de la página. En él, el desarrollador define la lógica para trabajar con solicitudes provenientes del front-end y otras funciones.

Https

PWA requiere que todos los recursos del sitio se transmitan a través del protocolo HTTPS. Puede obtener un certificado SSL de forma gratuita; algunos proveedores lo hacen por usted. Pero es crítico que el sitio no tenga enlaces a recursos inseguros; algunos navegadores simplemente no mostrarán el sitio en este caso.

El principal problema encontrado en tales casos son las imágenes. A menudo, los editores o comentaristas ponen enlaces a imágenes de Internet en el material, a veces llegan automáticamente (en el material). Es necesario guardar imágenes para usted o para un servicio con acceso a través de HTTPS.

Shell de aplicación

El shell de la aplicación es solo el esqueleto de una interfaz gráfica, una plantilla. Por ejemplo, tome un sitio promedio con un encabezado, dos columnas y más. En términos generales, eliminamos el contenido de la página actual y toda la información dinámica de la misma, el resto estático es el shell de la aplicación.

La conclusión es que el shell de la aplicación se almacena en el cliente y se carga cuando se inicia la aplicación, y luego se carga información dinámica desde la red. Y mientras se carga, el shell de la aplicación debe verse hermoso ("cargadores" en el suelo, etc.)

Esta arquitectura del sitio (descarga de contenido y otra información dinámica a través de llamadas ajax) puede pensarse e implementarse en el sitio con anticipación, luego la transición a PWA será bastante simple.

Un shell de aplicación es como un shell de programa nativo. Mire su PWA como un programa nativo, y mucho será más fácil.

Manifiesto de la aplicación web

Un archivo JSON que define declarativamente el nombre de la aplicación para el navegador, un icono de cómo se verá PWA (pantalla completa, independiente, etc.) y algunos otros parámetros. Le permite "instalar" PWA como una aplicación separada en la pantalla de inicio de su teléfono inteligente.

Notificaciones push

Si navega por Internet con Chrome DevTools, abra la pestaña Aplicación, puede ver qué pocos sitios usan la tecnología PWA. Y el 90% de los que lo usan solo lo hacen por notificaciones push.

Hasta ahora, esta es la tecnología PWA más popular y más abusada: en los últimos meses, la cantidad de sitios a los que primero va y busca el botón "Bloquear" con el mouse para obtener las últimas noticias ha aumentado, la sensación ha aumentado muchas veces y el deseo de imponer la suya propia. Empujar es como el spam.

Pero también puede ofrecer una suscripción a la segunda o tercera visita del usuario al sitio cuando ya está claro que no está aquí por casualidad.