Conceptos básicos de aplicaciones web progresivas

¿Alguna vez has visto el botón "Agregar a la pantalla de inicio" que apareció en la pantalla de tu teléfono inteligente Android cuando navegaste por cualquier sitio? Si hace clic en este botón, se instalará una determinada aplicación en el teléfono en segundo plano, el icono de inicio que irá a la pantalla principal. Ahora esta aplicación se puede iniciar y trabajar con el sitio de la misma manera que antes, pero solo en la interfaz telefónica normal.

De lo que estamos hablando es de una aplicación móvil que se ha descargado de una aplicación web. Además, como puede ver, para instalar dicha aplicación no tiene que interactuar con Play Market. Como resultado, la instalación de tales aplicaciones es lo más simple posible. Sin embargo, esto está lejos de ser lo más interesante. Al iniciar dichos programas, tiene la oportunidad de trabajar con los datos que muestran, incluso sin una conexión a Internet. Le permiten interactuar con páginas web sin conexión. Bueno, ¿no es maravilloso?

El autor del material que publicamos hoy hablará sobre tales aplicaciones, sobre por qué son necesarias y cómo crearlas.



Probablemente ya entendiste que estábamos hablando de la llamada aplicación web progresiva (PWA). Dicha aplicación se puede instalar directamente desde la ventana del navegador, el icono para iniciar se verá como el icono de una aplicación móvil normal y, como muchas aplicaciones móviles, le permitirá trabajar con ella sin una conexión a Internet.


Añadir al botón de pantalla de inicio

Ahora hablemos sobre lo que es "progresividad" cuando se aplica a aplicaciones web. Propongo conocerlos mejor, descubrir cómo difieren de las aplicaciones web normales y, además, quiero decirles por qué creo que PWA es mejor que las aplicaciones móviles tradicionales.

¿Qué es una aplicación web progresiva?

El término "Aplicación web progresiva" fue acuñado por Alex Russell y Frances Berriman. Según Alex, las aplicaciones web progresivas son solo sitios web que han tomado las vitaminas adecuadas. Lo que se encuentra en el corazón de PWA no puede llamarse un nuevo marco o una nueva tecnología. Este es, de hecho, un conjunto de métodos de desarrollo avanzados que le permiten hacer que el comportamiento de una aplicación web sea muy similar al comportamiento de las aplicaciones móviles o de escritorio clásicas.


Icono de PWA en la pantalla de inicio

Los PWA brindan al usuario una nueva usabilidad a través de mejoras progresivas de la aplicación. En general, esto significa que PWA, en dispositivos móviles de diferentes generaciones, funcionará aproximadamente igual. Por supuesto, algunas características de las aplicaciones telefónicas comunes pueden no estar disponibles para ellos, pero tales aplicaciones generalmente funcionan en diferentes dispositivos de la forma en que deberían funcionar para ellos.

¿Por qué necesitas aplicaciones web avanzadas?

Antes de descubrir por qué se necesita PWA, hablemos sobre los problemas que enfrentamos al diseñar aplicaciones web y aplicaciones móviles normales.

• Conexión lenta a internet. Quizás, donde vives, con Internet rápido, todo está en orden, por lo que este problema no te afecta. Pero el 60% de la población mundial todavía usa Internet 2G. Incluso en los Estados Unidos, solo hay velocidades disponibles para algunos usuarios, comparables a las velocidades de los módems normales que utilizan líneas telefónicas simples.
• Sitio web de carga lenta. Si el sitio se carga muy lentamente, ¿sabe cuánto tiempo espera el usuario antes de hacer clic en el botón Cerrar ventana? Tres segundos! El 53% de los usuarios abandonan los sitios que son demasiado lentos.
• La complejidad de instalar aplicaciones. Los usuarios no están interesados ​​en instalar aplicaciones móviles regulares. El usuario promedio instala 0 aplicaciones por mes.
• Involucrar a los usuarios en el trabajo con la aplicación. Los usuarios pasan la mayor parte de su tiempo en aplicaciones móviles normales, pero el alcance de las aplicaciones web móviles es aproximadamente tres veces mayor. Como resultado, la mayoría de los usuarios no participan particularmente activamente en el trabajo con aplicaciones, aunque estos usuarios pasan el 80% del tiempo en las tres aplicaciones móviles que utilizan con mayor frecuencia.

Las aplicaciones web progresivas ayudan a resolver estos problemas.


PWA en acción

Hay muchas razones para usar PWA, aquí me gustaría destacar las principales características que proporcionan. Si describe estas capacidades en una palabra, FIRE significa Rápido, Integrado, Confiable, Atractivo, es decir, una aplicación web progresiva debe ser rápida, integrada en el entorno de trabajo del dispositivo, confiable y tener medios para involucrar a los usuarios en trabajar con ella. .

1. Si hablamos de velocidad, entonces PWA, en todas las etapas de interacción del usuario con ellos, trabajará rápidamente. Se instalan rápidamente, se lanzan rápidamente, funcionan rápidamente. Dado que los PWA le permiten almacenar datos en caché, el reinicio de dichas aplicaciones es muy rápido, incluso sin acceder a los recursos de red.
   
2. La integración de PWA en el entorno del dispositivo se expresa en el hecho de que dichas aplicaciones se comportan como aplicaciones normales. El icono para iniciarlos está en la pantalla principal, pueden trabajar con notificaciones push, pueden usar las mismas funciones del dispositivo que las aplicaciones normales. Como resultado, cuando trabaja con aplicaciones web progresivas, el usuario no siente que está abandonando el entorno familiar.
3. La confiabilidad de las aplicaciones web integradas se basa en el hecho de que pueden funcionar normalmente incluso sin conectarse a una red, debido a la capacidad de almacenar en caché los datos utilizando los trabajadores del servicio.
4. La capacidad de PWA de involucrar a los usuarios con ellos se basa en el hecho de que pueden enviar notificaciones a los usuarios. Esto le permite mantener al usuario informado de eventos interesantes relacionados con la aplicación y lo atrae a trabajar con esta aplicación.

¿Cómo crear una aplicación web progresiva?

Google ha publicado una lista de verificación para desarrollar aplicaciones web avanzadas. Considere los requisitos mínimos para una aplicación, cuyo cumplimiento nos permite llamarla PWA.

▍1. Manifiesto de solicitud

Un manifiesto PWA es un archivo manifest.json con algo como esto:

 { "name": "Trending Meme", "short_name": "Meme", "theme_color": "#2196f3", "background_color": "#2196f3", "display": "standalone", "orientation": "portrait", "Scope": "/", "start_url": "/", "icons": [   {     "src": "images/icons/icon-72x72.png",     "sizes": "72x72",     "type": "image/png"   },   {     "src": "images/icons/icon-96x96.png",     "sizes": "96x96",     "type": "image/png"   },   {     "src": "images/icons/icon-128x128.png",     "sizes": "128x128",     "type": "image/png"   },   {     "src": "images/icons/icon-144x144.png",     "sizes": "144x144",     "type": "image/png"   },   {     "src": "images/icons/icon-152x152.png",     "sizes": "152x152",     "type": "image/png"   },   {     "src": "images/icons/icon-192x192.png",     "sizes": "192x192",     "type": "image/png"   },   {     "src": "images/icons/icon-384x384.png",     "sizes": "384x384",     "type": "image/png"   },   {     "src": "images/icons/icon-512x512.png",     "sizes": "512x512",     "type": "image/png"   } ], "splash_pages": null } 

Ante nosotros hay un archivo JSON normal que contiene metainformación sobre una aplicación web. Aquí hay información sobre los iconos de la aplicación (uno de ellos el usuario ve en la pantalla principal después de instalar la aplicación), el color de fondo de la aplicación, su nombre completo y abreviado, y así sucesivamente. Puede escribir este manifiesto usted mismo, o puede usar una herramienta especial que automatice la creación de dichos archivos.


Un sitio que facilita la creación de un archivo manifest.json

▍2. Trabajadores de servicio

Los trabajadores de servicios son trabajadores impulsados ​​por eventos que se ejecutan en segundo plano de la aplicación y actúan como intermediarios entre la aplicación y los recursos de la red. Pueden interceptar solicitudes de red e información de caché para la aplicación. Se pueden usar para descargar datos que se planea usar para garantizar que la aplicación funcione sin conexión. Los trabajadores de servicios son programas de JavaScript que interceptan el procesamiento de ciertos eventos y realizan ciertas tareas.

Aquí hay un archivo de ejemplo serviceworker.js .

 self.addEventListener('fetch', event => {   //           const {request} = event;   const url = new URL(request.url);   if(url.origin === location.origin) {       event.respondWith(cacheData(request));   } else {       event.respondWith(networkFirst(request));   } }); async function cacheData(request) {   const cachedResponse = await caches.match(request);   return cachedResponse || fetch(request); } 

▍3. Insignias

Los iconos se utilizan para iniciar la instalación en el dispositivo PWA. El sitio mencionado anteriormente, que ayuda a crear archivos de manifiesto, le permite generar automáticamente un conjunto de iconos de aplicaciones basados ​​en un solo archivo de imagen de 512x512 píxeles de tamaño que se carga en este sitio. Los archivos generados se guardan en formato .png .

▍4. Seguridad

Para que alguna aplicación se llame PWA, debe, entre otras cosas, admitir el intercambio de datos a través de un canal de comunicación seguro utilizando HTTPS. Es fácil obtener un certificado SSL para organizar dicha conexión utilizando las capacidades de servicios como Cloudflare y LetsEncrypt. La protección de la aplicación no es solo lo que es absolutamente necesario en estos días, también es una forma de demostrarle al usuario la confiabilidad de la aplicación y construir relaciones de confianza con él.

Resumen

En este artículo, hablamos sobre aplicaciones web progresivas, hablamos sobre por qué son necesarias, qué problemas resuelven, qué requisitos se les presentan. Aquí también tocamos el tema de su desarrollo, en particular, hablamos sobre el manifiesto de PWA, los trabajadores de servicios, los íconos de las aplicaciones y que necesitan protegerse con HTTPS. La tecnología PWA a menudo se percibe como algo relacionado exclusivamente con los teléfonos inteligentes Android, y hasta hace poco, este punto de vista tenía derecho a la vida. Sin embargo, dados los eventos que tuvieron lugar este año, podemos decir que PWA tiene un futuro muy interesante en muchas plataformas. El tema de PWA, de hecho, está lejos de estar agotado por todo esto. Por lo tanto, es muy posible que volvamos a ello.

Estimados lectores! ¿Cómo te sientes acerca de las aplicaciones web progresivas?