Aplicaciones web progresivas 101: qué, por qué y cómo

¿Qué es una aplicación web progresiva? ¿Por qué necesitamos uno? ¿Cómo podemos construir uno?

¿Alguna vez ha visto un banner de "Agregar a la pantalla de inicio", como el anterior, mientras navega por un sitio web? Al hacer clic en el botón, la "aplicación" se instala en segundo plano. Cuando abre esta aplicación que ahora se encuentra en el cajón de su aplicación, puede navegar por la misma experiencia que estaba haciendo en su navegador, pero ahora directamente en su teléfono móvil.

Lo que tiene ahora es una aplicación móvil que se descargó de una aplicación web. Todo esto, sin ni siquiera tener que ver el rostro de una tienda de aplicaciones.

¡Obtener la aplicación fue muy fácil! Pero esa ni siquiera es la mejor parte. Cuando abra esta aplicación, podrá navegar por el contenido incluso cuando no tenga Internet. ¡Tienes acceso sin conexión a la aplicación! ¿Cuan genial es eso?

Lo que ha encontrado es una aplicación web progresiva (PWA). Una PWA le permite instalar la aplicación desde la propia ventana del navegador, está disponible en su teléfono como una aplicación nativa y funciona sin conexión, como una aplicación nativa.

Pero, ¿qué significa realmente que una aplicación web sea progresiva? Profundicemos en lo que son las aplicaciones web progresivas, por qué creo que son mejores que las aplicaciones nativas y qué las hace diferentes de las aplicaciones web tradicionales.

¿Qué es una aplicación web progresiva (PWA)?

El término aplicación web progresiva fue acuñado por Alex Russell y Frances Berriman. En palabras de Alex:

Las aplicaciones web progresivas son solo sitios web que tomaron todas las vitaminas adecuadas.

No es un nuevo marco o tecnología. Es un conjunto de mejores prácticas para hacer que una aplicación web funcione de manera similar a una aplicación de escritorio o móvil. El sueño es tener una experiencia tan uniforme y fluida que el usuario no pueda distinguir entre una aplicación web progresiva y una aplicación móvil nativa.

Las aplicaciones web progresivas brindan experiencias de usuario a través de mejoras progresivas. Básicamente, significa que una PWA realizará las mismas funciones en un nuevo iPhone 8 que en un iPhone de generación anterior. Claro, es posible que algunas funciones no estén disponibles, pero la aplicación continúa funcionando y funcionando como debería.

¿Por qué necesitamos una aplicación web progresiva?

Antes de entender por qué necesitamos una aplicación web progresiva, hablemos de algunos de los desafíos que enfrentamos hoy con las aplicaciones web y nativas.

Velocidad de Internet : es posible que no se dé cuenta de esto dependiendo de dónde viva, pero el 60% de la población mundial todavía usa Internet 2G. Incluso en los EE. UU., Algunas personas tienen que usar el acceso telefónico para acceder a Internet.

Carga lenta del sitio web: ¿Sabe cuánto tiempo espera un usuario para hacer clic en el botón "Cerrar X" si un sitio web es demasiado lento? ¡Tres segundos! El 53% de los usuarios abandona un sitio web si es demasiado lento.

Alta fricción: la gente no quiere instalar aplicaciones nativas. Un usuario promedio instala 0 aplicaciones en un mes.

Participación del usuario: los usuarios pasan la mayor parte de su tiempo en aplicaciones nativas, pero el alcance de la web móvil es casi tres veces mayor que el de las aplicaciones nativas. Por lo tanto, la mayoría de los usuarios no participan activamente. Sin embargo, los usuarios dedican el 80% de su tiempo solo a sus tres aplicaciones nativas principales.

Las PWA ayudan a resolver estos problemas. Hay varias razones para usar una aplicación web progresiva, pero estas son algunas de las principales capacidades que ofrece:

  1. F AST: PVS proporcionan experiencias que son consistentemente rápido. Desde el momento en que un usuario descarga una aplicación hasta el momento en que comienza a interactuar con ella, todo sucede muy rápido. Debido a que puede almacenar en caché los datos, es extremadamente rápido iniciar la aplicación nuevamente incluso sin acceder a la red.
  2. Me NTEGRADO experiencia del usuario: PVS se sienten y se comportan como aplicaciones nativas. Se sientan en la pantalla de inicio de un usuario, envían notificaciones push como aplicaciones nativas y tienen acceso a las funcionalidades de un dispositivo como aplicaciones nativas. La experiencia se siente perfecta e integrada.
  3. R experiencia eliable: Con la ayuda de los trabajadores de servicios, podemos pintar con fiabilidad una imagen en la pantalla de un usuario incluso cuando la red ha fallado.
  4. E ngaging: Debido a que podemos enviar notificaciones a un usuario, podemos realmente conducir el compromiso por mantener al usuario notificado y comprometidos con la aplicación.

En resumen, es FUEGO.

Cómo crear una aplicación web progresiva

Google ha publicado una lista de verificación de elementos para aplicaciones web progresivas. Repasaré cuatro requisitos mínimos para que una solicitud sea PWA:

1. Manifiesto de la aplicación web

Este es solo un jsonarchivo que brinda metainformación sobre la aplicación web. Tiene información como el ícono de la aplicación (que un usuario ve después de instalarla en el cajón de su aplicación), el color de fondo de la aplicación, el nombre de la aplicación, el nombre corto, etc. Podemos escribir este archivo de manifiesto nosotros mismos o podemos usar herramientas para generar uno para nosotros.

2. Trabajadores de servicios

Los Service Workers son trabajadores impulsados ​​por eventos que se ejecutan en segundo plano de una aplicación y actúan como un proxy entre la red y la aplicación. Pueden interceptar solicitudes de red y almacenar información en caché en segundo plano. Esto se puede utilizar para cargar datos para su uso sin conexión. Son un javascriptscript que escucha eventos como buscar e instalar, y realizan tareas.

Aquí hay una muestra serviceworker.js

self.addEventListener('fetch', event => { //caching for offline viewing 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) 

3. Icono

This is used to provide an app icon when a user installs the PWA in their application drawer. A jpeg image will just be fine. The manifest tool I highlighted above helps in generating icons for multiple formats, and I found it very useful.

4. Served over HTTPS

In order to be a PWA, the web application must be served over a secure network. With services like Cloudfare and LetsEncrypt, it is really easy to get an SSL certificate. Being a secure site is not only a best practice, it also establishes your web application as a trusted site for users demonstrating trust and reliability, and avoiding middle man attacks.

Note: This is part 1 of 2 part series. In the next part, we will create a Progressive Web App from scratch with a skeleton index.html. Check out part 2 here.

Did you learn something new? Have comments? Know a DevJoke? Tweet me @shrutikapoor08

¿Por qué los programadores se confunden entre Halloween y Navidad?

Porque 31 DE OCTUBRE = 25 DE DICIEMBRE #DevJokes #WorkChat

- Shruti Kapoor (@ shrutikapoor08) 22 de junio de 2018