Este tutorial explica cómo podrás activar y configurar una promoción para que los usuarios puedan instalarla como una Progressive Web App (PWA). Esto permite a los participantes acceder fácilmente desde la pantalla de inicio de sus dispositivos, sin necesidad de descargar ninguna aplicación desde una tienda de apps.

Con esta funcionalidad, podrás personalizar el nombre, el icono y los colores de la app para adaptarla a tu marca. También se incluye un banner de instalación que se mostrará a los usuarios cuando accedan a la promoción desde dispositivos móviles.

Esta funcionalidad es ideal para promociones de larga duración donde los usuarios acceden de forma recurrente, como por ejemplo campañas de fidelización, calendarios de adviento o promociones de validación de tickets de compra de largo plazo. 

A continuación, te guiaremos paso a paso en el proceso de activación y configuración de la PWA.

1. Introducción

2. Cómo activar la opción PWA en tu promoción

3. Cómo instalar la PWA en el dispositivo del usuario

   • Cómo instalar la PWA en IOS

   • Cómo instalar la PWA en Android

   • Cómo instalar la PWA en desktop

1. Introducción

Una Progressive Web App (PWA) o aplicación web progresiva es una aplicación web que los usuarios pueden instalar en sus dispositivos móviles como si fuera una app nativa, permitiéndoles acceder a la promoción de forma rápida y sencilla, sin necesidad de introducir una URL cada vez.

Con esta funcionalidad, el administrador podrá convertir la promoción en una progressive web app, de forma que los usuarios podrán instalarse la promoción como una app en su dispositivo móvil u ordenador, facilitando así un acceso más cómodo y directo a la promoción.

El administrador podrá personalizar la apariencia de esta app, para así adaptarla al look&feel de su marca y al diseño configurado en la propia promoción, y al acceder a la promoción, los usuarios verán un enlace para instalársela como app y, en dispositivos móviles, aparecerá un banner invitándolos a hacerlo.

Esta opción resulta especialmente útil en campañas en las que el usuario debe acceder de forma recurrente, como puede ser una promoción de larga duración, calendarios de adviento, quiniela multi-jornada, campaña de validación de tickets de compra, etc. 

A continuación, te explicamos cómo configurar tu promoción para que pueda instalarse como una PWA.

2. Cómo activar la opción PWA en tu promoción

Para poder activar la funcionalidad debes de acceder a Editor > Utilidades > Progressive Web App y hacer clic en "Habilitar Progressive Web App":

Una vez actividad la funcionalidad, encontrarás las siguientes opciones de personalización:

• Icono de la app. Podrás subir una imagen de 512x512px como icono de la web app que se guardará en el dispositivo del usuario.
• Nombre de la app. Nombre completo de la app. Éste aparecerá en el mensaje de instalación y configuración de la app.
• Nombre corto de la app. Nombre corto de la app que se utilizará cuando el nombre de la misma sea demasiado largo, por ejemplo, en la pantalla de inicio del dispositivo.
• Color del tema. Color principal de la interfaz de la app. 
• Color de fondo. Color de fondo de la app cuando se abra la app. 

3. Cómo instalar la PWA en el dispositivo del usuario

Una vez activada la opción, los usuarios podrán instalar la promoción en sus dispositivos. Cuando los usuarios accedan a la promoción desde sus dispositivos móviles verán un banner invitando a instalar la aplicación y donde verán las instrucciones de cómo hacerlo. También será posible instalar la aplicación en ordenadores o portátiles.

3.1. Cómo instalar la PWA en IOS

1. El usuario deberá de acceder a la promoción en su navegador móvil.
2. Una vez dentro del navegador, deberá de hacer clic en el botón de compartir, el icono a la derecha de la URL.
3. Con el menú desplegado, hacer clic en "Añadir a pantalla de inicio".
4. Confirmar la instalación de la PWA haciendo clic en "Añadir".

Una vez completado, el usuario verá el icono de la app en la pantalla de inicio de su iPhone, listo para acceder rápidamente.

3.2. Cómo instalar la PWA en Android

1. El usuario deberá acceder primero a la promoción desde el navegador de su dispositivo móvil.
2. Acceder al menú del navegador (representado por tres puntos verticales en la esquina superior derecha),
   Hacer clic en la opción "Añadir a pantalla de inicio"
3. Finalmente, aparecerá un mensaje preguntando si desea instalar la aplicación. Deberá confirmar pulsando en "Instalar".

En algunos dispositivos compatibles, el usuario verá el botón de "Instalar" al abrir la promoción en su navegador de su dispositivo Android.

De esta forma, el icono de la app aparecerá en tu pantalla de inicio, facilitando el acceso directo a la promoción.

3.3. Cómo instalar la PWA en desktop

Si el usuario quiere instalar la Progressive Web App (PWA) en su ordenador para acceder fácilmente desde su escritorio, también podrá instalarla.

1. Deberá de abrir un navegador compatible (Chrome, Edge, etc.) y acceder a la URL de la promoción.
2. En la barra de direcciones del navegador, encontrará un icono con forma de pantalla o un símbolo "+" (generalmente situado a la derecha de la URL). 
3. Aparecerá un mensaje preguntando si desea instalar la aplicación. Deberá de confirmarlo haciendo clic en "Instalar".
4. Automáticamente, la app se añadirá a su escritorio y podrá acceder directamente desde ahí, como cualquier otra aplicación instalada en su ordenador.

¡Listo! Ahora el usuario podrá acceder rápidamente a la promoción desde su PC con un solo clic.