¿Tiene dificultades para que sus clientes móviles realicen conversiones? ¿O tal vez desearía que sus clientes pudieran utilizar su sitio web como una aplicación? Ecommerce PWA podría ser la solución necesaria que le ayudará a cerrar la brecha entre la web y los dispositivos móviles, impulsar las ventas y mejorar la CX de forma espectacular.
Las PWA modernas permiten a las empresas de comercio electrónico utilizar metodologías de desarrollo contemporáneas al fusionar los atributos más ventajosos del diseño web convencional con los inherentes a las aplicaciones específicas de la plataforma.
Contenido:
PWA de comercio electrónico: ¿Qué hace que valga la pena lanzarla?
¿Cómo construir una buena PWA de comercio electrónico?
PWA para el comercio electrónico: peligros y dificultades potenciales
Capacidades de PWA
Soluciones PWA basadas en plataformas de comercio electrónico
Historias de éxito de PWA de comercio electrónico
Costos de desarrollo de PWA de comercio electrónico
PWA de comercio electrónico: ¿Qué hace que valga la pena lanzarla?
A medida que más tareas informáticas se realizan a través de navegadores web, la línea entre las aplicaciones en línea y los programas de escritorio es menos clara. Y las PWA pretenden desdibujar aún más esta línea.
Básicamente, las PWA son un tipo específico de aplicación web que se puede crear para funcionar como programas de escritorio independientes.
Lanzar una PWA no significa tener todas las cosas hermosas como escalabilidad y capacidad de búsqueda de forma predeterminada y automática, por lo que querrás asegurarte de que tu equipo de desarrollo esté haciendo esto bien. Si está listo para lanzar una PWA, debe alinearse con los criterios que se describen a continuación.
Entonces, ¿qué tiene PWA que los desarrolladores tienen que trabajar tan duro para implementar?
¿Cómo construir una buena PWA de comercio electrónico?
Velocidad
El rendimiento en línea superior, caracterizado tanto por la velocidad como por la calidad, cautiva y mantiene eficazmente la participación del usuario en mayor medida que un rendimiento mediocre (imagínese). Dar prioridad a las métricas centradas en el usuario debería ser de suma importancia debido al papel crucial que desempeña la velocidad a la hora de fomentar la participación del usuario. ¿Por qué preocuparse? Naturalmente, los lentos tiempos de carga de la página provocan un aumento del 123% en las tasas de rebote.
Trabaja en cualquier navegador
PWA debe funcionar en todos los navegadores web. Garantizando así la accesibilidad y perfeccionando la UX. De esta manera, el proceso de desarrollo normalmente comienza con HTML para la funcionalidad básica, seguido de CSS y JavaScript para UX. Los formularios HTML pueden transmitir datos mediante solicitudes POST, con JavaScript para validación y envío AJAX.
Cualquier tamaño de pantalla
Debido a su capacidad para adaptarse a varios tamaños de ventanas gráficas, las PWA permiten a sus clientes consumir contenido sin problemas en diferentes dispositivos, independientemente del dispositivo específico que se utilice. La importancia de esto radica en el hecho de que sus clientes pueden utilizar la misma aplicación en dispositivos con diferentes dimensiones. El contenido debe permanecer coherente independientemente de las dimensiones de la ventana gráfica, aunque su disposición puede requerir modificaciones.
Se puede instalar
Cuando se instala una PWA en un dispositivo, muestra un comportamiento comparable al de otras aplicaciones instaladas, ya que se abre en una ventana separada y aparece en el administrador de tareas del dispositivo. Se ha observado que la descarga de la aplicación de una empresa como tal aumenta la probabilidad de que regrese, en comparación con la navegación casual. Esto abarca un aumento en las tasas de conversión, la duración promedio de las sesiones y las visitas repetidas.
.jpg)
Disponible en línea
Las PWA deben diseñarse para funcionar sin conexión a Internet. Sus clientes deben tener acceso a diversos contenidos, como itinerarios de viaje, boletos de embarque, archivos multimedia, publicaciones en redes sociales y artículos de noticias. Si bien la autenticación fuera de línea es crucial para la seguridad, la accesibilidad y la modificabilidad del contenido son esenciales para la usabilidad en entornos fuera de línea. IndexedDB, una base de datos NoSQL, puede almacenar y sincronizar datos mediante un navegador, lo que admite operaciones asincrónicas. Los trabajadores del servicio pueden almacenar elementos multimedia en un caché, lo que permite su recuperación incluso con Internet apagado.
Buscable
Dado que la mayoría de los visitantes de un sitio web, superior al 50%, provienen de búsquedas orgánicas, la visibilidad de su PWA se puede mejorar drásticamente. El establecimiento de URL canónicas para el contenido y la indexación de sitios web por parte de los motores de búsqueda son cruciales para mejorar su visibilidad.
Cualquier entrada
PWA debería admitir varios métodos de entrada, como un mouse o un lápiz, garantizando transiciones sin fricciones para los usuarios sin tener en cuenta el tamaño de la pantalla. Por ejemplo, la funcionalidad táctil debería ser compatible con ventanas gráficas grandes, mientras que las ventanas gráficas más pequeñas deberían priorizar la entrada del teclado y el mouse. La aplicación web progresiva debe adaptarse a varios métodos de entrada y mejorar las interacciones del usuario con funcionalidades específicas de entrada, como tirar para actualizar.
PWA para el comercio electrónico: peligros y dificultades potenciales
¿Cuáles son las preocupaciones al decidir lanzar una PWA de comercio electrónico? ¿Cuáles son las caídas y cómo evitarlas?
Percepción y confianza
La percepción y la confianza asociadas con las PWA siguen viéndose empañadas por la noción predominante de que son aplicaciones inferiores o que ni siquiera se reconocen como aplicaciones en primer lugar. Los usuarios se han acostumbrado a la práctica de buscar aplicaciones en plataformas digitales como Google Play o App Store, y es posible que no estén familiarizados con la noción de instalar aplicaciones directamente desde sitios web. La confianza es una consideración importante ya que los consumidores se han acostumbrado a depender de las tiendas de aplicaciones para verificar la seguridad de las aplicaciones descargadas.
Instalación
El proceso de instalación de una PWA en iOS requiere que los usuarios accedan al panel Compartir y luego elijan la opción "Agregar a la pantalla de inicio". El procedimiento es más complejo que la instalación de una aplicación nativa de iOS. La experiencia del usuario puede mejorarse si Safari incluyera soporte para el antes de instalar el mensaje evento o modifique el idioma del mensaje para "Instalar la aplicación".
Modificación manifiesta
Los elementos esenciales de un manifiesto de PWA, incluidos el ícono, el nombre y las pantallas de presentación, no se pueden modificar fácilmente una vez que se ha instalado la PWA. Aunque ha habido avances recientes en la versión de escritorio de Chrome que permiten la modificación de nombres de aplicaciones, mejorar la flexibilidad para modificar los atributos del manifiesto mejorará la competitividad de las PWA.
Gestión del alcance
La gestión del alcance en las PWA a veces puede presentar desafíos debido a su naturaleza contraintuitiva. La cuestión de las barras diagonales puede generar inconsistencias en la definición de los alcances, introduciendo así la posibilidad de errores. Además, en el contexto de iOS, al intentar acceder a un hipervínculo dentro de los límites de una PWA desde una aplicación externa, el comportamiento predeterminado es iniciar el navegador Safari en lugar de la PWA designada.
Acceso al dispositivo
La cuestión que nos ocupa se refiere a si a las PWA se les debe otorgar acceso a servicios nativos, como contactos, calendario, SMS/MMS y alarmas, a pesar de sus ventajas de seguridad inherentes derivadas de su alcance restringido. Permitir que las PWA accedan a estas funcionalidades puede potencialmente socavar las medidas de seguridad y desdibujar la distinción entre PWA y aplicaciones nativas.
Notificaciones push en iOS
Las notificaciones automáticas en iOS no eran accesibles para las PWA hasta hace poco. Como consecuencia, los desarrolladores no pudieron depender de las notificaciones automáticas como medio para transmitir información crucial a los usuarios de iOS. Apple ha declarado recientemente su intención de brindar soporte para notificaciones automáticas en dispositivos iOS a partir de 2023. Sin embargo, muchos consumidores han expresado su insatisfacción con las notificaciones automáticas como resultado de su explotación por parte de los sitios web. En consecuencia, los navegadores web han incluido mecanismos de bloqueo automático de estas indicaciones.
Capacidades de PWA
Las PWA brindan una experiencia de usuario móvil similar a la nativa a pesar de ser mucho más livianas (por ejemplo, el tamaño de la PWA BookMyShow es 54 veces más pequeño que la aplicación de Android y 180 veces más pequeño que la aplicación de iOS) que las aplicaciones nativas. Estas aplicaciones utilizan un diseño web responsivo y mejoras progresivas para adaptar su estilo visual y funcionalidad a las capacidades del dispositivo y del navegador web del usuario.
Al igual que las aplicaciones nativas, las PWA se pueden instalar a través del navegador web y mostrarse en la pantalla de inicio del dispositivo móvil. Las notificaciones automáticas, la actualización automática de contenido y la navegación e interacción similares a las de una aplicación están disponibles con las PWA.
Para el comercio electrónico, esto significa que las PWA permiten la creación de experiencias de compra digitales fluidas en diferentes dispositivos y navegadores, brindando la facilidad y el rendimiento de las aplicaciones móviles nativas sin las limitaciones del desarrollo y la distribución por separado.
Las PWA permiten a las empresas de comercio electrónico crear tiendas en línea más atractivas que parecen aplicaciones reales para los clientes en cualquier dispositivo.
En qué se basa una PWA
- Trabajadores de servicios La tecnología es fundamental para el lanzamiento de PWA. Con notificaciones automáticas, almacenamiento en caché y funcionalidad sin conexión, la interfaz de usuario parece la de una aplicación móvil.
- El proyecto manifiesto de la aplicación web es un archivo JSON que especifica el nombre, los iconos y la combinación de colores de la aplicación. Con esta función, los usuarios pueden marcar la PWA como favorita.
- Por motivos de privacidad y seguridad, HTTPS es obligatorio.
- El HTML, CSS y JavaScript necesarios están incluidos en el shell de la aplicación. El marco y la interfaz de usuario de la aplicación se configuran aquí.
- No hace falta decir que, debido a su versatilidad para responder a varios tamaños de pantalla, los sitios web responsivos pueden ser una base perfecta para las PWA.
PWA: en qué se diferencia de una aplicación móvil nativa
Google Play y App Store brindan acceso a aplicaciones nativas desarrolladas específicamente para sus plataformas. Estas aplicaciones no necesitan ningún software intermediario para acceder a las funciones y API del dispositivo.
Es por eso que las aplicaciones nativas funcionan mejor y tienen una mayor interacción con el sistema operativo.
Las PWA son elogiadas por su capacidad para ser independientes de la plataforma, funcionar en varias plataformas y navegadores web y obtener actualizaciones automáticamente.
PWA de comercio electrónico: en qué se diferencia de un sitio web responsivo
Si bien el objetivo principal tanto de las PWA como de los sitios web responsivos es mejorar la experiencia del usuario, las PWA imitan las características de las aplicaciones móviles nativas, como la interfaz de usuario y las notificaciones automáticas. Y los sitios web responsivos tienen como objetivo brindar una experiencia de visualización perfecta en varios dispositivos sin la necesidad de ningún software adicional.
PWA frente a aplicaciones nativas frente a sitios web responsivos
| Caracteristicas | PWA | Aplicaciones nativas | Sitios Web receptivos |
|---|---|---|---|
| Instalación | Se puede instalar directamente | Requiere descarga e instalación | Accedido a través de navegadores web |
| Dependencia de la plataforma | Se ejecuta en navegadores | Específico de la plataforma (iOS, Android) | Independiente de la plataforma |
| App Store | – | + | – |
| Notificaciones Push | + | + | – |
| Funcionalidad fuera de línea | + / Limitado | Limitada | – |
| Accesibilidad | a través de URL | Instalado en el dispositivo | a través de URL |
| experiencia como usuario | Comparable a aplicaciones nativas | Optimizado para una experiencia de plataforma específica | Diseño Responsive |
| Actualizaciones | Automáticamente | Automáticamente/Manualmente | A mano |
| Rendimiento | Depende del rendimiento del navegador | Optimizado para el rendimiento de una plataforma específica | Depende del rendimiento del navegador |
| Costo de desarrollo | Relativamente más bajo | Mayor costo de desarrollo | Relativamente más bajo |
| Distribución | Se puede compartir a través de URL | Distribuido a través de tiendas de aplicaciones. | Se puede compartir a través de URL |
| Integración con la funcionalidad del dispositivo | Limitada | + | Limitada |
¿Desarrollar PWA de comercio electrónico desde cero o convertirlo desde una versión heredada?
Si actualmente tiene un sitio web de comercio electrónico o una aplicación nativa y está considerando lanzar una PWA de comercio electrónico, es posible que se pregunte si es mejor comenzar desde cero o convertir sus activos heredados.
En términos generales, convertir un sitio web responsivo es el enfoque más sencillo. El código ya está basado en la web y optimizado para diferentes tamaños de pantalla. Convertir una aplicación nativa requiere actualizar el código existente para que funcione en la web. Desarrollar PWA de comercio electrónico desde cero proporciona la mejor experiencia, pero requiere la mayor cantidad de trabajo.
Convertir desde un sitio web responsivo
Ventajas: reutilizar contenido/diseño web existente, estar familiarizado con los estándares web
Desventajas: no está optimizado para las funciones de PWA, es posible que necesite un esfuerzo adicional para implementarlo
Conversión desde la aplicación nativa
Ventajas: reutilizar la lógica de la aplicación, interfaz
Desventajas: Necesita actualizaciones para cumplir con los estándares PWA, trabajo adicional para soportar la web
Desarrollando PWA desde cero
Ventajas: Totalmente personalizado para los estándares PWA desde el principio
Contras: Más tiempo/coste involucrado
PWA: en qué se diferencia de otros frameworks híbridos
PWA tiende a ofrecer una experiencia de usuario más fluida en comparación con otros marcos híbridos. Por ejemplo, PWA permite la funcionalidad sin conexión y se puede acceder a ella a través de un navegador web, mientras que algunas aplicaciones híbridas deben descargarse e instalarse.
PWA frente a iónico
Ionic es un marco para crear aplicaciones móviles híbridas. Si bien PWA puede ejecutarse en cualquier dispositivo con un navegador compatible, Ionic brinda una experiencia más nativa con acceso a las funciones del dispositivo.
PWA y aleteo
Básicamente, Flutter es un marco para crear aplicaciones móviles nativas. Flutter utiliza el lenguaje de programación Dart. Y, si bien PWA es más adecuado para aplicaciones centradas en contenido, Flutter es mejor para aplicaciones complejas y visualmente ricas.
PWA frente a reaccionar nativo
React Native es un marco de código abierto para crear aplicaciones móviles utilizando React. React también se puede utilizar para desarrollar la interfaz de una PWA, proporcionando una interfaz de usuario interactiva y receptiva.
| Caracteristicas | aleteo | Reaccionar nativo | PWA |
|---|---|---|---|
| Acceso al dispositivo | Sí | Sí | Parcialmente |
| Pila de idiomas | Dardo | Mecanografiado | Javascript |
| Rendimiento | Alto/Rápido | Medio-alto | Moderado/Bueno |
| Modo offline | No soportado | No | Sí |
| Velocidad | Muy rapido | Rápido | Moderado |
| Complejidad del código | Alta | Medio | Baja |
| Portabilidad de código | Bueno | Excelente | Bueno |
| experiencia como usuario | Excelente | Bueno | Bueno |
| Costo de desarrollo | Costoso | Moderado | Moderado |
| Ejemplos de aplicaciones | Anuncios de Google, Alibaba | facebook, instagram | Twitter Lite, Pinterest, Flipkart |
Soluciones PWA basadas en plataformas de comercio electrónico
Estudio Magento PWA
Las PWA se pueden crear con la ayuda de Magento PWA Studio, que es un conjunto de herramientas y bibliotecas creadas para este propósito. La plataforma aprovecha herramientas de vanguardia como React, Redux y GraphQL para crear tiendas en línea potentes y con capacidad de respuesta.
Kit PWA de nube de comercio de Salesforce
Si está buscando crear una PWA de comercio electrónico en la plataforma Salesforce Commerce Cloud, el kit Commerce Cloud PWA lo cubre con todo lo que necesita para comenzar. Para lograr su objetivo de brindar una experiencia de compra receptiva y atractiva, esta solución utiliza marcos de JavaScript como React y Vue.js.
Arquitectura de referencia de escaparate de Salesforce Commerce Cloud (SFRA)
Storefront Reference Architecture (SFRA) de Commerce Cloud es otro marco útil para crear PWA. Al crear PWA para Commerce Cloud, el marco SFRA puede proporcionar una base sólida. Una mayor adaptabilidad y una gran cantidad de opciones de personalización son sólo dos de las muchas ventajas que ofrece.
SAP Commerce Espartaco
En SAP Commerce Cloud, las PWA se pueden desarrollar con la ayuda del sólido marco SAP Commerce Spartacus. La interfaz de la aplicación está construida sobre Angular y se comunica con los servicios de backend de SAP Commerce Cloud sin ningún problema notable.
Tienda Vue
Vue Storefront es un marco avanzado de código abierto creado para crear tiendas en línea escalables y confiables. El marco Vue.js se utiliza para crear rápidamente PWA que puedan adaptarse a las necesidades de sus usuarios y brindar una experiencia fluida y receptiva. Las notificaciones automáticas y la posibilidad de navegar por la web sin conexión son dos características notables.
| Solución | Base frontal | Arquitectura sin cabeza | Tecnologías utilizadas |
|---|---|---|---|
| Estudio Magento PWA | Reaccionar | + | React, Redux, GraphQL, paquete web, Jest, Node.js, trabajadores de servicios |
| Kit PWA de nube de comercio | Reaccionar | + | Javascript, paquete web, React, Vue.js, GraphQL, Service Workers, API REST |
| Nube de comercio SFRA | JavaScript | + | Javascript, SSR, React, Angular, Vue.js, SASS, API |
| SAP Commerce Cloud Espartaco | Angular | + | Angular, Node.js, hilo, TypeScript, RxJS, SASS, Jasmine, Service Workers, API de Storefront |
| Tienda Vue | Vue.js | + | Vue.js, Node.js, ElasticSearch, Webpack, GraphQL |
Más herramientas PWA de comercio electrónico a considerar
- ScandiPWA: solución PWA de código abierto diseñada específicamente para la plataforma Magento 2.
- Gatsby: generador de sitios estáticos que se puede utilizar para crear PWA con React.
- GoPWA: marco de desarrollo de PWA para crear PWA escalables y de alto rendimiento.
Historias de éxito de PWA de comercio electrónico
Muchas empresas, incluidas algunas de las más grandes en el campo del comercio electrónico, ya han descubierto que la PWA es bastante eficaz.
Las dos métricas más cruciales, las tasas de conversión (varios ejemplos mostraron aumentos en la tasa de conversión del 27% a más del 80%) y participación (los ejemplos incluyeron 3 veces más tiempo en el sitio, mayores visitas a la página, más productos vistos), muestran de manera estable una mejora notable.
| Empresa | Tasa de conversión más alta | Compromiso |
|---|---|---|
| AliExpress | + 104% | + 74% |
| Flipkart | + 70% | 3x |
| Lancôme | + 17% | + 53% |
| MakeMyTrip | 3x | + 160% |
| BookMyShow | + 80% | – |
| Garbarino | + 27% | +13% (visitantes) +35% (vistas) |
| Petlove | 2.8x | 2.8x |
| George | + 31% | + 20% |
| Debenhams | + 20% | 2x a 4x |
| Objetos enraizados | + 162% | – |
| carnicero de azul | + 169% | + 154% |
| kaporal | +15% (escritorio) +8% (móvil) | + 40% |
Sin embargo, este no es el final de los beneficios de PWA:
- Rendimiento mejorado: muchos informaron tiempos de carga mucho más rápidos, menor uso de datos y menos rebotes.
- Aumento de tráfico/nuevos clientes: algunos vieron el doble de usuarios diarios, 2 % de nuevos clientes de PWA.
- Mayores ingresos: casos con mayores ingresos por visita, los ingresos por tráfico aumentaron un 79%.
- Costos más bajos: costos de adquisición de clientes más bajos, tamaños de aplicaciones mucho más pequeños que los nativos.
- Acceso sin conexión: permitió continuar comprando sin conexión a Internet.
- Notificaciones push: envíe una mayor participación, tasas de clics y carritos recuperados.
- Acceso a través de plataformas: experiencia unificada en cualquier dispositivo a través de tecnologías web.
- Funciones similares a las nativas: capacidades de hardware/sistema operativo aprovechadas normalmente solo en aplicaciones nativas.
Costos de desarrollo de PWA de comercio electrónico
El desarrollo de PWA de comercio electrónico tiene gastos de desarrollo y mantenimiento comparables a los del desarrollo de sitios web de comercio electrónico. Sin embargo, las PWA pueden ejecutarse en una variedad más amplia de dispositivos que las aplicaciones nativas, y no hay ningún cargo adicional por el acceso al hardware o la ubicación en las tiendas de aplicaciones.
| web de comercio electrónico | Aplicación de comercio electrónico para Android | Aplicación de comercio electrónico para iOS | PWA de comercio electrónico | |
|---|---|---|---|---|
| Costos de desarrollo | $10,000 - $30,000 | $15,000 - $50,000 | $20,000 - $80,000 | $10,000 - $30,000 |
| Costos de mantenimiento | $ 500 - $ 2,000 / mes | $ 1,000 - $ 3,000 / mes | $ 1,500 - $ 5,000 / mes | $ 500 - $ 2,000 / mes |
| Actualizaciones/Nuevas funciones | Bajo costo | Costo moderado | Alto costo | Bajo costo |
| Soporte de plataforma | solo web | Solo Android | solo iOS | Internet, Android, iOS |
| Tarifas de la tienda de aplicaciones | N/A | 30% (primer millón de dólares), 1% | 30% (el primer año de suscripción), 15% | N/A |
Fuente de Grinteq
Descargo de responsabilidad: La información establecida anteriormente es proporcionada por grinteq.com independientemente de Alibaba.com. Alibaba.com no representa ni garantiza la calidad y confiabilidad del vendedor y los productos.
