SDK en su prelanding

Habitualmente, un visitante llega a un prelanding y desde allí pasa a la tarjeta de la tienda de la PWA, donde se encuentra el botón de instalación. Pero la instalación y la suscripción a push pueden iniciarse directamente en su propio prelanding: conecte el Browser SDK y llame a sus métodos desde sus propios botones. Así el visitante instala la aplicación y se suscribe a push sin salir hacia la tarjeta de la tienda.

El visitante no tiene que instalar la aplicación para ello: la suscripción a push funciona sin instalación.

Lo que necesita antes

• Un prelanding subido a Qubix. Esta es su página en la sección Sitios web — súbala del mismo modo que un sitio ordinario (consulte Subir un sitio web).
• Un dominio configurado y activo. El prelanding debe servirse en un dominio configurado en Qubix y activo (consulte Dominios). Esto es imprescindible: la instalación y el push solo funcionan cuando la página y las direcciones del servicio del SDK están en el mismo dominio.
• Una PWA creada — necesitará su identificador (pwaId) de la tarjeta en la sección Aplicaciones PWA.

Cómo conectarlo

1. En el código del prelanding, establezca la configuración y cargue el script del SDK. La configuración va antes del script:

   index.htmlHTML

   <script>
     window.pwaConfig = {
       pwaId: 'YOUR-PWA-ID',
       domain: 'your-domain.com',
     }
   </script>
   <script src="https://your-domain.com/sdk.js" defer></script>

   La clave de push se incluye en /sdk.js automáticamente — no es necesario añadirla manualmente. Un desglose completo de los campos está en la referencia del Browser SDK.

2. Prepare el SDK para la instalación — una sola vez, al cargar la página. Esta llamada registra la parte del servicio y adjunta el manifiesto de la aplicación:

   JavaScript

   sdk.pwa.init()

3. Vincule la instalación a su propio botón:

   HTML

   <button id="install">Install the app</button>
   <script>
     document.getElementById('install').addEventListener('click', () => {
       sdk.pwa.install()
     })
   </script>

4. Vincule la suscripción a push a su propio botón (o llámela en el momento oportuno):

   JavaScript

   await sdk.subscribePush()

Listo — la instalación y la suscripción se producen en su página. Nada envía al visitante a la tarjeta de la tienda.

Consejo

Si algún escenario sí necesita la tarjeta de la tienda, sdk.showStore() la abre. No llame a este método si el visitante debe permanecer en su prelanding.

El navegador muestra la instalación

Muestre el botón de instalación solo cuando la instalación esté realmente disponible — compruebe sdk.pwa.canInstall(). Los navegadores no siempre permiten el mensaje de instalación: se requiere una conexión segura (HTTPS) y normalmente una acción del visitante en la página. Por eso tanto la instalación como la suscripción se asocian habitualmente a un toque explícito en lugar de activarse al cargar la página.

Verificar

Abra el prelanding en un teléfono y pulse sus botones — el navegador mostrará el mensaje de instalación y el de notificaciones. El resultado es visible en los informes: los eventos install_accepted, push_allow y otros llegan al flujo de eventos.

Qué sigue

Referencia del Browser SDK

Todos los métodos y eventos del Browser SDK.

Subir un sitio web

Cómo subir un prelanding a Qubix.

Campañas push

Envío de notificaciones a los suscritos.