👩‍👩‍👧‍👦 🙇🏿 🐋 Aplicaciones web progresivas. Guia de accion ☺️ 📜 🐤

Hola Habr! Estamos explorando la posibilidad de publicar un libro sobre PWA (Progressive Web Applications). Ya hay muchas publicaciones sobre Habré sobre este tema, el material del blog de la compañía RUVDS es de particular interés , del cual citaremos la definición de PWA:

... es 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.

A veces surge la pregunta: ¿cómo se relacionan las aplicaciones web progresivas con las nativas? ¿Vale la pena desarrollar PWA si ya tienes nativo? En primer lugar, esta pregunta, así como muchas otras, es respondida por el artículo de Jason Grigsby del sitio "A List Apart", que hemos traducido para usted hoy. El artículo es un extracto del libro de 2018. Por favor no olvides votar.

Para determinar si su organización es inteligente para desarrollar su propia aplicación web progresiva (PWA), hágase dos preguntas:

¿Su organización tiene un sitio web? Si es así, una aplicación web progresiva probablemente será útil. Suena cursi, pero lo es: es aconsejable convertir casi cualquier sitio web en una aplicación web progresiva, ya que contienen las mejores prácticas de la Web.
¿Su organización gana dinero a través del sitio a través de ventas electrónicas, publicidad o de alguna otra manera? Si es así, definitivamente necesita una aplicación web progresiva, ya que puede aumentar significativamente los ingresos.

Esto no significa que el sitio necesite implementar todas las características existentes de las aplicaciones web progresivas. Es posible que no necesite proporcionar funcionalidad fuera de línea, notificaciones push o incluso la capacidad de configurar su sitio en la pantalla de inicio de un dispositivo de usuario. Es probable que un mínimo absoluto sea suficiente: un sitio seguro, un trabajador de servicios que acelere su trabajo, un archivo de manifiesto; tales cosas serán útiles en cualquier sitio.

Por supuesto, puede decidir que su sitio web personal o proyecto paralelo no es el recurso para el que vale la pena desarrollar una aplicación web progresiva, gastando más tiempo y esfuerzo en ello. Esto es comprensible y, a la larga, incluso los sitios personales estarán cubiertos de las capacidades de las aplicaciones web progresivas, cuando se agregue soporte para estas características a los sistemas de administración de contenido en los que se basan estos sitios. Por ejemplo, Magento y WordPress al momento de escribir este texto ya habían anunciado planes para agregar capacidades avanzadas de aplicaciones web a sus plataformas. Se espera que otros hagan lo mismo.

Sin embargo, si ejecuta un sitio que proporciona un beneficio para su organización de alguna manera, debe convertirlo en una aplicación web progresiva y planificar cómo hacerlo ahora. Las empresas que han implementado aplicaciones web avanzadas reciben mayores conversiones, participación del usuario, mayores ventas e ingresos publicitarios. Por ejemplo, Pinterest como resultado de la introducción de PWA, la audiencia principal aumentó en un 60 por ciento , y los ingresos publicitarios generados por los usuarios crecieron en un 44 por ciento. Los usuarios de West Elm comenzaron a pasar aproximadamente 15 veces más en el sitio, los ingresos de una visita aumentaron en un 9 por ciento .

Dibujo: Eddie Osmani, Google, escribió un estudio de caso sobre la aplicación web progresiva de Pinterest, comparándolo tanto con su antiguo sitio móvil como con su aplicación nativa.

Hay tantas historias de éxito asociadas con aplicaciones web progresivas que mi compañía, Cloud Four, ha lanzado un sitio llamado PWA Stats que las rastrea. Es probable que exista un caso sobre una organización similar a la suya, y con este ejemplo puede convencer a sus colegas de la idoneidad de una aplicación web progresiva para su empresa.

Figura : PWAstats.com contiene estadísticas e historias que dan testimonio de la efectividad de las aplicaciones web progresivas.

Y tal trabajo persuasivo puede ser necesario. A pesar de las ventajas obvias de las aplicaciones web progresivas, muchas empresas aún no se han reorganizado para ellas, a menudo porque la administración simplemente aún no conoce PWA. (Por lo tanto, cuando comience a crear PWA en este momento, ¡podría estar ganando tiempo!)

Sin embargo, también existe una gran confusión en cuanto a qué son capaces las aplicaciones web avanzadas, para qué se pueden usar y cómo se relacionan con la web nativa. aplicaciones. Tal confusión provoca miedo, incertidumbre, dudas, y todo esto ralentiza la implementación de aplicaciones web progresivas.

Si aboga por la implementación de PWA en su organización, es posible que algunos no lo entiendan, e incluso puede encontrar resistencia. Así que analicemos algunos de los argumentos que lo ayudarán a fortalecer su posición y serán útiles cuando convenza a sus colegas.

Las aplicaciones nativas y PWA pueden coexistir

Si su organización ya tiene una aplicación nativa, los interesados pueden objetar que además no necesitan ninguna PWA, especialmente porque la principal ventaja de PWA es la introducción de características y funcionalidades inherentes a las aplicaciones nativas.
Es tentador suponer que las aplicaciones web progresivas compiten con las nativas, por lo general, es en este sentido que se escribe en los medios. Pero, de hecho, una aplicación web progresiva funciona independientemente de si la compañía ya tiene una nativa.

Tómese un descanso de las disputas de "aplicaciones nativas versus aplicaciones web" y concéntrese en los detalles específicos de las interacciones de los usuarios con el sitio web de su organización en Internet. Es recomendable utilizar aplicaciones web avanzadas simplemente por sus propios méritos: lo ayudan a expandir su audiencia de usuarios, proteger su sitio, obtener ganancias, proporcionar interacciones más confiables con los usuarios y notificarles las actualizaciones; todo esto complementará las capacidades de su aplicación nativa.

Extensión de audiencia personalizada

No todos sus usuarios actuales tienen instalada su aplicación nativa, y sus usuarios potenciales no la tienen en absoluto. Probablemente, la aplicación ni siquiera está instalada en la mayoría de los usuarios típicos, pero aquellos que aún la instalaron pueden ir allí desde una PC.

Al mejorar la calidad de las interacciones con el sitio, aumenta las posibilidades de que sus usuarios actuales y futuros lean su contenido o compren sus productos (¡o incluso descarguen su aplicación nativa!) Puede mejorar la calidad de trabajar con el sitio utilizando una aplicación web progresiva.

A pesar de lo que le aseguran los blogs técnicos, la web móvil está creciendo más rápido que las aplicaciones nativas. El sitio web comScore comparó las 1000 mejores aplicaciones móviles con los 1000 sitios mejor ubicados y concluyó que "la audiencia de la web móvil es casi tres veces mayor que la de las aplicaciones móviles y está creciendo dos veces más rápido ".

Aunque es cierto que las personas pasan más tiempo en sus aplicaciones móviles favoritas que en la web, tenga en cuenta que a veces es muy difícil convencer a una persona para que instale su aplicación en su dispositivo. Aproximadamente la mitad de los usuarios de teléfonos inteligentes en los EE. UU., Por regla general, no instalan ni siquiera una aplicación por mes .

Si su aplicación nativa está en la tienda de aplicaciones, esto no garantiza que las personas la instalen. Trabajar en la promoción de la aplicación y alentar a los usuarios a instalarla es costoso. Según Liftoff, una empresa de marketing de aplicaciones móviles,el costo promedio requerido por un usuario para instalar la aplicación es de $ 4.12 y se dispara hasta $ 8.21 por usuario, si desea que una persona cree una cuenta en su aplicación.

Si tienes la suerte y alguien comienza a instalar tu aplicación, surge el siguiente obstáculo: debes convencer a las personas de que no dejen de usar la aplicación. Cuando un especialista, Andrew Chen, analizó datos sobre la retención de usuarios en el material de 125 millones de teléfonos móviles, descubrió que la aplicación promedio pierde el 77% de DAU (usuarios activos diarios) 3 días después de la instalación . En 30 días, se pierde el 90% de las DAU. Durante 90 días, se pierde más del 95% de DAU.

Dibujo: La lealtad del usuario móvil sigue siendo muy breve. La aplicación promedio pierde el 95% de sus usuarios activos en 90 días.

Las aplicaciones web progresivas no enfrentan tales desafíos. Comprender una aplicación web progresiva no es más difícil para una persona que en su sitio, ya que este es su sitio. Todas las características de una aplicación web progresiva también están disponibles de inmediato. No tiene que realizar pasos intermedios: primero vaya a la tienda de aplicaciones, luego descargue la aplicación desde allí. La instalación es rápida: ocurre en segundo plano cuando visita el sitio por primera vez y literalmente se reduce a agregar un icono a la pantalla principal.

Como Alex Russell escribió en su artículo sobre Medium en 2017:

El deslizamiento al instalar PWA es mucho más bajo. Nuestras métricas internas de Google muestran que con volúmenes comparables de pancartas PWA y pancartas de aplicaciones nativas (la comparación es casi la misma que con las manzanas y las manzanas), los pancartas PWA ofrecen conversiones 5-6 veces más a menudo. Más de la mitad de los usuarios que decidieron instalar la aplicación nativa al navegar a través de dichos banners no finalizan el proceso de instalación, mientras que la instalación de PWA ocurre casi al instante.

En resumen, una proporción significativa pero creciente de sus usuarios se comunican con usted a través de la web. Las aplicaciones web progresivas pueden aumentar los ingresos, aumentar la participación del usuario, así como su número.

Protege tu sitio

Si recopila información de tarjeta de crédito u otra información de propiedad, simplemente debe proporcionar a sus usuarios un sitio web bien protegido. Pero incluso si los datos confidenciales no se procesan en su sitio, aún tiene sentido usar el protocolo HTTPS y proporcionar al usuario una interacción segura con el sitio. El tráfico de red más aparentemente inocente puede contener señales que simplifican la identificación del usuario y el posible pirateo de sus datos. ¿Qué podemos decir sobre las preocupaciones con respecto a la posible vigilancia estatal?

Anteriormente, el funcionamiento de un servidor seguro era costoso, complicado y también (parecía) que funciona más lento de lo habitual. Hoy todo ha cambiado. Los certificados SSL / TLS solían costar cientos de dólares, pero hoy el proveedor Let's Encryptlos regala gratis. Muchos proveedores de hosting trabajan con proveedores de certificados, por lo que puede configurar HTTPS con un solo clic. Además, resulta que HTTPS no es tan lento como parecía .

Los sitios HTTPS también pueden actualizarse a una nueva versión de HTTP llamada HTTP / 2. La principal ventaja de HTTP / 2 es que es significativamente más rápido que HTTP / 1. Muchos proveedores de alojamiento y redes de entrega de contenido (CDN) proporcionan que cuando cambie a HTTPS esté conectado a HTTP / 2 sin ninguna acción adicional de su parte.

Incluso si tal incentivo no es suficiente para cambiar a HTTPS, los fabricantes de navegadores usan el método de la zanahoria y el palo, presionando a los sitios para que introduzcan cambios. Como un "látigo"Chrome comenzó a advertir a los usuarios que están ingresando sus datos en un sitio que no está equipado con HTTPS . Es probable que otros navegadores hagan lo mismo y marcarán los sitios que funcionan sin cifrado, para que los usuarios se den cuenta de que sus datos pueden ser interceptados.

Como un navegador de pan de jengibre HTTPS, los navegadores comienzan a requerir capacidades HTTPS del sitio como obligatorio. Si desea utilizar las últimas y mejores tecnologías web, no puede prescindir de HTTPS . De hecho, algunas características que solían funcionar sobre HTTP no seguro ahora se consideran que afectan los datos confidenciales. Tal, por ejemplo, es la geolocalización. En HTTPS, son limitados. Después de pensarlo, parece que esto también es un pequeño látigo. Látigo de pan de jengibre?

Dado todo esto, es aconsejable proporcionar a sus usuarios un sitio seguro. Por lo tanto, las advertencias sin sentido terribles quedan inmediatamente excluidas. Obtiene acceso a nuevas capacidades del navegador. Obtenga las ganancias de velocidad proporcionadas por HTTP / 2. Y también: preparar el escenario para una aplicación web progresiva.
Para utilizar trabajadores de servicio, una tecnología clave relacionada con aplicaciones web progresivas, debe equipar HTTPS en el sitio. Por lo tanto, si desea disfrutar de todos los beneficios de PWA a la vez, primero debe hacer un trabajo preparatorio serio.

Aumentar las ganancias

Existen numerosos estudios que demuestran una correlación entre la velocidad de un sitio y la cantidad de tiempo y dinero que la gente está dispuesta a gastar en él. Según DoubleClick, "el 53% de las visitas a sitios web móviles se interrumpieron iniciadas por el usuario si la página de descarga tarda más de 3 segundos ". La compañía Walmart descubrió que por cada 100 milisegundos para optimizar la velocidad de carga de la página cae al 1% de los ingresos adicionales .

Al final, el alto software la velocidad de interacción con el sitio significa mucho. Desafortunadamente, la duración promedio de carga de las páginas de sitios móviles cuando se conecta a través de 3G es de 19 segundos . Nuevamente, esta aplicación web progresiva ayuda a hacer frente a este problema.

Utilizando trabajadores de servicio, los PWA proporcionan interacciones increíblemente rápidas. Utilizando trabajadores de servicio, el desarrollador puede indicar explícitamente qué archivos debe almacenar el navegador en la memoria caché local y en qué circunstancias debe buscar actualizaciones para los archivos en caché. Se puede acceder a los archivos almacenados en la memoria caché local mucho más rápido que los archivos recuperados de la red.

Al solicitar una nueva página en una aplicación web progresiva, el usuario ya tiene en la memoria caché local del dispositivo la mayoría de los archivos necesarios para mostrar esta página. Por lo tanto, la página puede cargarse casi al instante, ya que el navegador solo necesita descargar información adicional en esta página.

En muchos aspectos, son estos factores los que proporcionan una alta velocidad de trabajo con aplicaciones nativas. Al instalar la aplicación nativa, el usuario descarga previamente los archivos necesarios para ejecutar la aplicación. Después de eso, la aplicación nativa tiene que recuperar solo datos nuevos de la red. Los trabajadores de servicios pueden hacer algo similar al interactuar con la web.

Las aplicaciones web progresivas pueden tener un efecto dramático en el rendimiento. Por ejemplo, Tinder logró reducir el tiempo de carga de la página de 11,91 segundos a 4,69 segundos mediante el desarrollo de una aplicación web progresiva, además, es un 90% más compacto que su aplicación nativa de Android. La cadena hotelera Treebo lanzó su propia aplicación web progresiva y recibió un aumento de cuatro veces en la conversión durante el año; las tasas de conversión para los usuarios que regresan se triplicaron, y el tiempo medio de interacción del usuario con un sitio móvil se redujo a 1,5 segundos.

Garantizar la fiabilidad de la red

Las redes móviles no funcionan sin problemas. Acaba de tener una conexión LTE de alta velocidad y ahora ya se está arrastrando a un ritmo de 2G o, por lo general, está desconectado. Todos nos encontramos en tales situaciones. Pero la mayoría de los sitios todavía se están haciendo con la expectativa de que trabajar con ellos se llevará a cabo en una red confiable.

El enfoque PWA le permite crear una aplicación con la que puede continuar trabajando sin conexión. De hecho, para garantizar el trabajo fuera de línea con las aplicaciones y acelerar la interacción con las páginas web, se utilizó la misma tecnología: trabajadores de servicios.
Como ya sabe, los trabajadores del servicio le permiten decirle explícitamente al navegador qué datos debe almacenar en caché localmente. Esta categoría de archivos se puede ampliar: deje que sean no solo los recursos necesarios para descargar la aplicación, sino también el contenido de las páginas web para que los usuarios no puedan interrumpir su visualización, incluso sin conexión.

Figura : La barra de título en la aplicación web progresiva housing.com cambia el color de púrpura (izquierda) a gris (derecha) cuando está fuera de línea. El contenido que el usuario vio anteriormente o agregó a favoritos está disponible sin conexión (a la derecha), y esto es razonable, ya que la aplicación de housing.com está dirigida al mercado indio, y en India la conexión de red puede ser lenta y poco confiable.

Con un trabajador de servicio, incluso puede almacenar previamente en caché el shell de la aplicación haciendo esto "detrás de escena". Por lo tanto, cuando un visitante llega por primera vez a una aplicación web progresiva, podrá descargar la aplicación completa, guardarla en el caché, y eso es todo, puede trabajar con ella sin conexión sin ninguna acción adicional por parte del usuario.

No dejar ir a los usuarios.

Quizás las notificaciones push son la mejor manera de involucrar a los usuarios en el trabajo con la aplicación. Las notificaciones automáticas seducen a una persona y lo animan a volver a la aplicación para obtener información sabrosa, desde noticias urgentes hasta mensajes de chat.

¿Por qué, entonces, implementar notificaciones push solo para aquellos que han instalado la aplicación nativa? Por ejemplo, si tiene una aplicación de mensajería, o está diseñada para funcionar con redes sociales, sería muy útil notificar a los usuarios de nuevos mensajes.

Figura : Una aplicación progresiva de Twitter llamada Twitter Lite envía las mismas notificaciones que la aplicación nativa (izquierda). Cuando selecciona dicha notificación, inmediatamente va a Twitter Lite al tweet al que se refiere (derecha).

Las aplicaciones web progresivas y, en particular, los trabajadores de servicios que amamos, nos permiten usar notificaciones push en cualquier sitio. Las notificaciones no son una característica obligatoria en una aplicación web progresiva, pero a menudo son efectivas para mejorar la interacción del usuario y el crecimiento de los ingresos.

Independientemente de si tiene una aplicación nativa, una aplicación web progresiva no le molesta. Cada paso en el desarrollo de dicha aplicación es un paso hacia la mejora del sitio web. Los sitios deben ser seguros. Debe ser rápido Sería bueno que estuvieran disponibles sin conexión y, si fuera necesario, pudieran enviar notificaciones a los usuarios.
Aquellos usuarios que no tengan su aplicación nativa (o no la usen) disfrutarán el hecho de que trabajar con su sitio se ha vuelto mucho más conveniente. Una gran ventaja para todo su negocio. Tan sencillo.