Una retrospectiva de PWA de un año

Zack Argyle | Gerente de ingeniería, Core Experience

La idea de construir una "aplicación web progresiva" (PWA) no es nueva, pero su definición ha cambiado con la aparición de tecnologías clave como los trabajadores de servicios. Ahora finalmente es posible crear grandes experiencias en un navegador móvil. Ser un adoptante temprano puede dar miedo, por lo que nos gustaría compartir una breve descripción de nuestra experiencia en la construcción de una de las aplicaciones web progresivas más grandes del mundo.

Hace tres años, observamos el estado de nuestro sitio web en los navegadores móviles y nos quejamos de las obvias deficiencias. Las métricas apuntaban a una tasa de participación un 80 por ciento más alta en nuestras aplicaciones nativas, por lo que se tomó la decisión de utilizar todas nuestras aplicaciones para iOS y Android. A pesar de aumentar sustancialmente nuestras descargas de aplicaciones, hubo algunas desventajas obvias.

Emily Owen Nos gustaría aprovechar este momento para ofrecer una disculpa. Usted tenía razón. Fue terrible.

Hace un año (julio de 2017) reunimos a un equipo para reescribir nuestro sitio web móvil desde cero como una PWA. Esta fue la culminación de varios años de conversación, meses de investigación de métricas y una gran hipótesis: la web móvil puede ser tan buena como una aplicación nativa. Los resultados son bastante ... interesantes.

¿Por qué lo hicimos?

Hubo dos razones principales por las que reinvertimos tanto en nuestra web móvil. El primero fueron nuestros usuarios. Nuestra experiencia web móvil para personas en entornos de bajo ancho de banda y planes de datos limitados no fue buena. Con más de la mitad de todos los Pinners ubicados fuera de los EE. UU., La creación de un sitio web móvil de primera clase fue una oportunidad para hacer que Pinterest sea más accesible a nivel mundial y, en última instancia, mejorar la experiencia para todos.

La segunda razón estaba basada en datos. Debido a que la experiencia no fue excelente, un porcentaje muy pequeño de los usuarios no autenticados que llegaron a nuestro sitio web móvil instalaron la aplicación, se registraron o iniciaron sesión. No fue un buen embudo. Incluso si consideramos a los usuarios de aplicaciones nativas más fuertemente por una mayor participación que los usuarios de la web móvil, no es el tipo de tasa de conversión por la que se esfuerza. Pensamos que podríamos hacerlo mejor.

¿Cómo lo hicimos?

En julio de 2017, formamos un equipo que combinaba ingenieros de nuestra plataforma web y equipos de crecimiento. Internamente, lo llamamos "Proyecto Duplo", inspirado en la simplicidad y la accesibilidad. En ese momento, el sitio web móvil representaba menos del 10 por ciento de nuestras suscripciones totales (por contexto, el sitio web de escritorio manejó 5 veces eso).

Cronograma

Julio de 2017: Comienza el "Proyecto Duplo"
Agosto de 2017: lanzamiento de un nuevo sitio móvil para el porcentaje de usuarios registrados
Septiembre de 2017: envíe un nuevo sitio móvil para usuarios registrados
Enero de 2018: lanzamiento del nuevo sitio móvil para el porcentaje de usuarios desconectados
Febrero de 2018: envíe un nuevo sitio móvil para usuarios desconectados

Parte de la razón por la que pudimos crear y enviar una reescritura completa en tres meses fue gracias a nuestra biblioteca de interfaz de usuario de código abierto, Gestalt. En Pinterest, utilizamos React 16 para todo el desarrollo web. El conjunto de componentes de Gestalt está diseñado para abarcar nuestro lenguaje de diseño, lo que hace que sea muy fácil crear páginas consistentemente hermosas sin preocuparse por CSS. Creamos un conjunto de componentes de diseño específicos para la web móvil para crear páginas espaciadas constantemente en todo el sitio. FullWidth rompe los límites predeterminados de PageContainer, que rompe los límites de un FixedHeader. Este tipo de diseño de composición condujo a un desarrollo de interfaz de usuario rápido y sin errores.

Además de Gestalt, también utilizamos react, react-router v4, redux, redux-thunk, react-redux, normalizr, reselect, flow y más bonito.

¡Cómo lo hicimos rápido!

El rendimiento se incluyó en los objetivos y el proceso debido a lo estrechamente correlacionado que está con el compromiso y lo sensible que es en una conexión móvil. De hecho, nuestra carga de Javascript de la página de inicio pasó de ~ 490kb a ~ 190kb. Esto se logró mediante la división de código en el nivel de ruta de forma predeterminada, lo que fomenta el uso de un componente para la división de código a nivel de componente. Se incorporó un sistema de precarga de ruta fácil de usar en nuestro enrutador del lado del cliente, lo que crea una experiencia rápida para la carga inicial de la página, así como los cambios de ruta del lado del cliente. Para obtener más detalles sobre cómo lo hicimos rápido, consulte un estudio de caso que hicimos con Addy Osmani.

Después de un año, hay ~ 600 archivos Javascript en nuestra base de código web móvil, y todo lo que se necesita es una importación mal elegida para inflar su paquete. ¡Es realmente difícil mantener el rendimiento! Compartimos ampliamente el código en todos los subsitios para * .pinterest.com, por lo que tenemos determinadas medidas configuradas para garantizar que las dependencias de la web móvil se mantengan limpias. Primero es un conjunto de gráficos que informan los tamaños de compilación con alertas para cuando los paquetes exceden las tasas de crecimiento permitidas. La segunda es una regla personalizada de suspensión que no permite la importación desde archivos y directorios que sabemos que dependen mucho de la dependencia e inflarán el paquete. Por ejemplo, la web móvil no puede importar desde la base de código web de escritorio, pero tenemos un directorio de paquetes "seguros" que se pueden compartir entre ambos. Todavía queda trabajo por hacer, pero estamos orgullosos de dónde estamos.

Si bien el estudio de caso trata principalmente de la carga de la página, también nos preocupamos profundamente por una experiencia rápida y nativa mientras navegamos. El mayor impulsor del rendimiento del lado del cliente fue nuestra tienda redux normalizada que permite cambios de ruta casi instantáneos. Al tener una única fuente de verdad para los modelos, como un PIN o un usuario, resulta trivial mostrar la información que tiene mientras espera que se cargue más. Por ejemplo, si navega por un feed de Pines, tenemos información sobre cada Pin. Cuando toca uno, lo lleva a una vista detallada. Debido a que los datos de PIN están normalizados, podemos mostrar fácilmente los detalles limitados que tenemos de la vista de feed hasta que los detalles completos terminen de ser obtenidos del servidor. Cuando hace clic en un avatar de usuario, mostramos el perfil de ese usuario con la información que tenemos mientras buscamos los detalles completos del usuario. Si está interesado en la estructura de nuestro estado o el flujo de nuestras acciones, la extensión reduto devtools está habilitada en producción para nuestro sitio web móvil.

En el corazón del nuevo sitio estaba nuestro intento de construir una aplicación web verdaderamente progresiva (PWA). Admitimos un shell de aplicaciones, agregamos a la pantalla de inicio, notificaciones push y almacenamiento en caché de activos. El trabajador de servicio almacena en caché un shell de aplicación específico para el usuario que se utiliza para las cargas de página posteriores y crea actualizaciones de la página casi instantáneas. Estamos entusiasmados de que Apple esté generando soporte para los trabajadores de servicios en Safari para que todos los usuarios puedan tener la mejor experiencia "nativa".

¿Y qué tipo de experiencia "nativa" sería sin un "modo nocturno"? ¡Dirígete a tu configuración de usuario y pruébalo!

El veredicto

Ahora para la parte que todos estaban esperando: los números. Los usuarios activos semanales en la web móvil han aumentado un 103 por ciento interanual en general, con un aumento del 156 por ciento en Brasil y un aumento del 312 por ciento en la India. Por el lado del compromiso, la duración de la sesión aumentó en un 296 por ciento, el número de pines vistos aumentó en un 401 por ciento y las personas tenían un 295 por ciento más de probabilidades de guardar un pin en un tablero. Esos son asombrosos en sí mismos, pero el frente de crecimiento es donde las cosas realmente brillaron. Los inicios de sesión aumentaron en un 370 por ciento y los nuevos registros aumentaron en un 843 por ciento año tras año. Desde que lanzamos la nueva experiencia, la web móvil se ha convertido en la plataforma principal para nuevos registros. Y por diversión, en menos de 6 meses desde el envío completo, ya tenemos 800 mil usuarios semanales que utilizan nuestro PWA como una aplicación nativa (desde su pantalla de inicio).

Mirando hacia atrás durante un año completo desde que comenzamos a reconstruir nuestra web móvil, estamos muy orgullosos de la experiencia que hemos creado para nuestros usuarios. No solo es significativamente más rápido, también es nuestra primera plataforma para admitir idiomas de derecha a izquierda y el "modo nocturno". Invertir en una PWA con todas las funciones superó nuestras expectativas. Y recién estamos comenzando.

* Gran agradecimiento a los ingenieros y gerentes de producto que trabajaron en la reescritura: Becky Stoneman, Ben Finkle, Yen-Wei Liu, Langtian Lang, Victoria Kwong, Luna Ruan, Iris Wang e Imad Elyafi.