Guía de integración básica del SDK de Capacitor

Esta sección contiene información sobre cómo integrar el SDK de Capacitor de Pushwoosh en su aplicación.

Prerrequisitos

Para integrar el SDK de Capacitor de Pushwoosh en su aplicación, necesitará lo siguiente:

Requisitos

• Una cuenta de Pushwoosh.
• Un proyecto de Pushwoosh configurado en su cuenta.
• Para la integración con iOS:
  • Una plataforma iOS configurada para enviar notificaciones push. Recomendamos usar la configuración de autenticación basada en token como el enfoque más simple.
  • Establezca el Gateway en Sandbox para enviar pushes a un simulador.
• Para la integración con Android:
  • Una plataforma Android configurada
  • El número de proyecto (también conocido como Sender ID), el archivo google-services.json y el nombre del paquete de su proyecto de Firebase.
  • Un proyecto de Firebase conectado a su aplicación de Android. Siga la guía de configuración de Firebase si es necesario.
• Su Código de Aplicación de Pushwoosh y el Token de API de Dispositivo de Pushwoosh desde el Panel de Control de Pushwoosh para su aplicación.

Pasos de integración

1. Añadir la dependencia del SDK de Capacitor de Pushwoosh

Añada la dependencia del SDK de Capacitor de Pushwoosh a su proyecto:

npm install pushwoosh-capacitor-plugin

Sincronice la configuración de Capacitor:

npx cap sync

2. Inicialización del SDK de Capacitor

En su archivo principal de JavaScript, importe e inicialice el SDK de Pushwoosh:

index.js

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

// Inicializar el SDK
Pushwoosh.onDeviceReady({
    appid: "__YOUR_APP_CODE__",
    projectid: "__YOUR_FCM_SENDER_ID__"
});

// Registrarse para notificaciones push
Pushwoosh.registerDevice()
    .then(result => {
        console.log("Push token:", result.pushToken);
        // Manejar el registro exitoso
    })
    .catch(error => {
        console.error("Failed to register device:", error);
        // Manejar el error de registro
    });

Donde:

• __YOUR_APP_ID__ es el código de la aplicación desde el Panel de Control de Pushwoosh.
• __YOUR_FCM_SENDER_ID__ es el número de proyecto de Firebase desde la Consola de Firebase.

3. Configuración nativa de iOS

3.1 Capacidades

Para habilitar las Notificaciones Push en su proyecto, necesita añadir ciertas capacidades.

En la sección Signing & Capabilities, añada las siguientes capacidades:

• Push Notifications
• Background Modes. Después de añadir esta capacidad, marque la casilla para Remote notifications.

Si tiene la intención de usar Notificaciones Sensibles al Tiempo (iOS 15+), añada también la capacidad de Time Sensitive Notifications.

3.2 Info.plist

En su Runner/Info.plist establezca la clave __PUSHWOOSH_DEVICE_API_TOKEN__ con el Token de API de Dispositivo de Pushwoosh:

info.plist

<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

3.3 Seguimiento de la entrega de mensajes

Debe añadir un objetivo de Extensión de Servicio de Notificación a su proyecto. Esto es esencial para un seguimiento preciso de la entrega y para características como Rich Media en iOS.

Siga los pasos de la guía nativa para añadir el objetivo de la extensión y el código de Pushwoosh necesario dentro de él.

4. Configuración nativa de Android

4.1 Instalar dependencias

Asegúrese de que las dependencias y plugins requeridos se añadan a sus scripts de Gradle:

Añada el plugin de Gradle de Google Services a las dependencias de su build.gradle a nivel de proyecto:

android/build.gradle

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

Aplique el plugin en su archivo build.gradle a nivel de aplicación:

app/build.gradle

apply plugin: 'com.google.gms.google-services'

4.2 Añadir archivo de configuración de Firebase

Coloque el archivo google-services.json en la carpeta android/app en el directorio de su proyecto.

4.3 Añadir metadatos de Pushwoosh

En su main/AndroidManifest.xml añada el Token de API de Dispositivo de Pushwoosh dentro de la etiqueta <application>:

AndroidManifest.xml

<meta-data android:name="com.pushwoosh.apitoken" android:value="__YOUR_DEVICE_API_TOKEN__" />

Importante: Asegúrese de dar al token acceso a la aplicación correcta en su Panel de Control de Pushwoosh. Aprenda más

5. Ejecutar el Proyecto

1. Compile y ejecute el proyecto.
2. Vaya al Panel de Control de Pushwoosh y envíe una notificación push.
3. Debería ver la notificación en la aplicación.

Integración extendida

En esta etapa, ya ha integrado el SDK y puede enviar y recibir notificaciones push. Ahora, exploremos la funcionalidad principal

Escuchadores de eventos de notificaciones push

En el SDK de Capacitor de Pushwoosh hay dos métodos de callback para manejar las notificaciones push:

• pushReceivedCallback se activa cuando se recibe una notificación push
• pushOpenedCallback se activa cuando un usuario abre una notificación

Debe configurar estos callbacks justo después de la inicialización del SDK:

index.js

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

// Configurar el callback de push recibido
await Pushwoosh.pushReceivedCallback((notification, err) => {
    if (err) {
        console.error("Failed to process received notification:", err);
    } else {
        console.log("Push received:", JSON.stringify(notification));
        // Manejar la notificación recibida
    }
});

// Configurar el callback de push abierto
await Pushwoosh.pushOpenedCallback((notification, err) => {
    if (err) {
        console.error("Failed to process opened notification:", err);
    } else {
        console.log("Push opened:", JSON.stringify(notification));
        // Manejar la notificación abierta
    }
});

Configuración de usuario

Al centrarse en el comportamiento y las preferencias individuales de los usuarios, puede entregar contenido personalizado, lo que conduce a una mayor satisfacción y lealtad del usuario

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

class Registration {
  async afterUserLogin(user) {

    // Establecer el ID de usuario
    Pushwoosh.setUserId(user.getId);

    // Establecer información adicional del usuario como etiquetas para Pushwoosh
    await Pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}

Etiquetas

Las etiquetas son pares clave-valor asignados a usuarios o dispositivos, que permiten la segmentación basada en atributos como preferencias o comportamiento, habilitando la mensajería dirigida.

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

class UpdateUser {
 async afterUserUpdateProfile(user) {

    // Establecer lista de categorías favoritas
    await Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Establecer información de pago
    await Pushwoosh.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}

Eventos

Los eventos son acciones específicas del usuario u ocurrencias dentro de la aplicación que se pueden rastrear para analizar el comportamiento y activar mensajes o acciones correspondientes

import { Pushwoosh } from 'pushwoosh-capacitor-plugin';

class Registration {

  // Rastrear evento de inicio de sesión
  afterUserLogin(user) {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Rastrear evento de compra
  afterUserPurchase(product) {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

Solución de problemas

Si encuentra algún problema durante el proceso de integración, consulte la sección de soporte y comunidad.