Guia de integração básica do SDK Capacitor

Esta seção contém informações sobre como integrar o SDK Capacitor do Pushwoosh em seu aplicativo.

Pré-requisitos

Para integrar o SDK Capacitor do Pushwoosh em seu aplicativo, você precisará do seguinte:

Passos de integração

1. Adicionar dependência do SDK Capacitor do Pushwoosh

Adicione a dependência do SDK Capacitor do Pushwoosh ao seu projeto:

npm install pushwoosh-capacitor-plugin

Sincronize a configuração do Capacitor:

npx cap sync

2. Inicialização do SDK Capacitor

No seu arquivo JavaScript principal, importe e inicialize o SDK Pushwoosh:

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

// Inicialize o SDK
Pushwoosh.onDeviceReady({
    appid: "__YOUR_APP_CODE__"
});

// Registre-se para notificações push
Pushwoosh.registerDevice()
    .then(result => {
        console.log("Push token:", result.pushToken);
        // Lidar com o registro bem-sucedido
    })
    .catch(error => {
        console.error("Failed to register device:", error);
        // Lidar com o erro de registro
    });

Onde:

__YOUR_APP_CODE__ é o código do aplicativo do Painel de Controle Pushwoosh.

3. Configuração Nativa do iOS

3.1 Capabilities

Para habilitar as Notificações Push em seu projeto, você precisa adicionar certas capabilities.

Na seção Signing & Capabilities, adicione as seguintes capabilities:

Push Notifications
Background Modes. Após adicionar esta capability, marque a caixa para Remote notifications.

Se você pretende usar Notificações Sensíveis ao Tempo (iOS 15+), adicione também a capability Time Sensitive Notifications.

3.2 Info.plist

No seu Runner/Info.plist, defina a chave __PUSHWOOSH_DEVICE_API_TOKEN__ para o Pushwoosh Device API Token:

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

3.3 Rastreamento de entrega de mensagens

Você deve adicionar um alvo de Notification Service Extension ao seu projeto. Isso é essencial para o rastreamento preciso da entrega e para recursos como Rich Media no iOS.

Siga os passos do guia nativo para adicionar o alvo da extensão e o código Pushwoosh necessário dentro dele.

4. Configuração Nativa do Android

4.1 Instalar dependências

Certifique-se de que as dependências e plugins necessários sejam adicionados aos seus scripts Gradle:

Adicione o plugin Google Services Gradle às dependências do seu build.gradle de nível de projeto:

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

Aplique o plugin no seu arquivo build.gradle de nível de aplicativo:

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

4.2 Adicionar arquivo de configuração do Firebase

Coloque o arquivo google-services.json na pasta android/app no diretório do seu projeto.

4.3 Adicionar metadados do Pushwoosh

No seu main/AndroidManifest.xml, adicione o Pushwoosh Device API Token dentro da tag <application>:

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

Importante: Certifique-se de dar ao token acesso ao aplicativo correto no seu Painel de Controle Pushwoosh. Saiba mais

5. Executar o Projeto

Compile e execute o projeto.
Vá para o Painel de Controle Pushwoosh e envie uma notificação push.
Você deve ver a notificação no aplicativo.

Integração estendida

Neste estágio, você já integrou o SDK e pode enviar e receber notificações push. Agora, vamos explorar a funcionalidade principal

Listeners de eventos de notificação push

No SDK Capacitor do Pushwoosh, existem dois métodos de callback para lidar com notificações push:

pushReceivedCallback é acionado quando uma notificação push é recebida
pushOpenedCallback é acionado quando um usuário abre uma notificação

Você deve configurar esses callbacks logo após a inicialização do SDK:

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

// Configurar callback de push recebido
await Pushwoosh.pushReceivedCallback((notification, err) => {
    if (err) {
        console.error("Failed to process received notification:", err);
    } else {
        console.log("Push received:", JSON.stringify(notification));
        // Lidar com a notificação recebida
    }
});

// Configurar callback de push aberto
await Pushwoosh.pushOpenedCallback((notification, err) => {
    if (err) {
        console.error("Failed to process opened notification:", err);
    } else {
        console.log("Push opened:", JSON.stringify(notification));
        // Lidar com a notificação aberta
    }
});

Configuração do usuário

Ao focar no comportamento e nas preferências individuais do usuário, você pode entregar conteúdo personalizado, levando a um aumento da satisfação e lealdade do usuário

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

class Registration {
  async afterUserLogin(user) {

    // Definir ID do usuário
    Pushwoosh.setUserId(user.getId);

    // Definindo informações adicionais do usuário como tags para o Pushwoosh
    await Pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}

Eventos

Eventos são ações ou ocorrências específicas do usuário dentro do aplicativo que podem ser rastreadas para analisar o comportamento e acionar mensagens ou ações correspondentes

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

class Registration {

  // Rastrear evento de login
  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()
    });
  }
}

Solução de problemas

Se você encontrar algum problema durante o processo de integração, consulte a seção de suporte e comunidade.