Capacitor SDK: Grundlegende Integrationsanleitung

Dieser Abschnitt enthält Informationen zur Integration des Pushwoosh Capacitor SDK in Ihre Anwendung.

Voraussetzungen

Um das Pushwoosh Capacitor SDK in Ihre App zu integrieren, benötigen Sie Folgendes:

Anforderungen

• Ein Pushwoosh-Konto.
• Ein in Ihrem Konto eingerichtetes Pushwoosh-Projekt.
• Für die iOS-Integration:
  • Eine iOS-Plattform, die für den Versand von Push-Benachrichtigungen konfiguriert ist. Wir empfehlen die Verwendung der tokenbasierten Authentifizierungskonfiguration als einfachsten Ansatz.
  • Setzen Sie das Gateway auf Sandbox, um Pushes an einen Simulator zu senden.
• Für die Android-Integration:
  • Eine konfigurierte Android-Plattform
  • Die Projektnummer (auch als Sender ID bekannt), die Datei google-services.json und der Paketname aus Ihrem Firebase-Projekt.
  • Ein Firebase-Projekt, das mit Ihrer Android-Anwendung verbunden ist. Befolgen Sie bei Bedarf die Firebase-Einrichtungsanleitung.
• Ihr Pushwoosh Application Code und Ihr Pushwoosh Device API Token aus dem Pushwoosh Control Panel für Ihre Anwendung.

Integrationsschritte

1. Pushwoosh Capacitor SDK-Abhängigkeit hinzufügen

Fügen Sie die Pushwoosh Capacitor SDK-Abhängigkeit zu Ihrem Projekt hinzu:

npm install pushwoosh-capacitor-plugin

Synchronisieren Sie die Capacitor-Konfiguration:

npx cap sync

2. Capacitor SDK-Initialisierung

Importieren und initialisieren Sie das Pushwoosh SDK in Ihrer Haupt-JavaScript-Datei:

index.js

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

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

// Register for push notifications
Pushwoosh.registerDevice()
    .then(result => {
        console.log("Push token:", result.pushToken);
        // Handle successful registration
    })
    .catch(error => {
        console.error("Failed to register device:", error);
        // Handle registration error
    });

Wobei:

• __YOUR_APP_ID__ der Application Code aus dem Pushwoosh Control Panel ist.
• __YOUR_FCM_SENDER_ID__ die Firebase-Projektnummer aus der Firebase Console ist.

3. Natives iOS-Setup

3.1 Capabilities

Um Push-Benachrichtigungen in Ihrem Projekt zu aktivieren, müssen Sie bestimmte Capabilities hinzufügen.

Fügen Sie im Abschnitt „Signing & Capabilities“ die folgenden Capabilities hinzu:

• Push Notifications
• Background Modes. Nachdem Sie diese Capability hinzugefügt haben, aktivieren Sie das Kontrollkästchen für Remote notifications.

Wenn Sie Time Sensitive Notifications (iOS 15+) verwenden möchten, fügen Sie auch die Capability Time Sensitive Notifications hinzu.

3.2 Info.plist

Setzen Sie in Ihrer Runner/Info.plist den Schlüssel __PUSHWOOSH_DEVICE_API_TOKEN__ auf den Pushwoosh Device API Token:

info.plist

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

3.3 Nachverfolgung der Nachrichtenzustellung

Sie müssen Ihrem Projekt ein Notification Service Extension Target hinzufügen. Dies ist für eine genaue Zustellungsverfolgung und Funktionen wie Rich Media auf iOS unerlässlich.

Befolgen Sie die Schritte der nativen Anleitung, um das Extension Target und den erforderlichen Pushwoosh-Code darin hinzuzufügen.

4. Natives Android-Setup

4.1 Abhängigkeiten installieren

Stellen Sie sicher, dass die erforderlichen Abhängigkeiten und Plugins zu Ihren Gradle-Skripten hinzugefügt werden:

Fügen Sie das Google Services Gradle-Plugin zu den Abhängigkeiten Ihrer build.gradle-Datei auf Projektebene hinzu:

android/build.gradle

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

Wenden Sie das Plugin in Ihrer build.gradle-Datei auf App-Ebene an:

app/build.gradle

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

4.2 Firebase-Konfigurationsdatei hinzufügen

Platzieren Sie die Datei google-services.json in den Ordner android/app in Ihrem Projektverzeichnis.

4.3 Pushwoosh-Metadaten hinzufügen

Fügen Sie in Ihrer main/AndroidManifest.xml den Pushwoosh Device API Token innerhalb des <application>-Tags hinzu:

AndroidManifest.xml

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

Wichtig: Stellen Sie sicher, dass Sie dem Token im Pushwoosh Control Panel Zugriff auf die richtige App geben. Erfahren Sie mehr

5. Das Projekt ausführen

1. Erstellen und führen Sie das Projekt aus.
2. Gehen Sie zum Pushwoosh Control Panel und senden Sie eine Push-Benachrichtigung.
3. Sie sollten die Benachrichtigung in der App sehen.

Erweiterte Integration

In dieser Phase haben Sie das SDK bereits integriert und können Push-Benachrichtigungen senden und empfangen. Lassen Sie uns nun die Kernfunktionalität erkunden.

Event-Listener für Push-Benachrichtigungen

Im Pushwoosh Capacitor SDK gibt es zwei Callback-Methoden zur Verarbeitung von Push-Benachrichtigungen:

• pushReceivedCallback wird ausgelöst, wenn eine Push-Benachrichtigung empfangen wird
• pushOpenedCallback wird ausgelöst, wenn ein Benutzer eine Benachrichtigung öffnet

Sie sollten diese Callbacks direkt nach der Initialisierung des SDK einrichten:

index.js

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

// Set up push received callback
await Pushwoosh.pushReceivedCallback((notification, err) => {
    if (err) {
        console.error("Failed to process received notification:", err);
    } else {
        console.log("Push received:", JSON.stringify(notification));
        // Handle the received notification
    }
});

// Set up push opened callback
await Pushwoosh.pushOpenedCallback((notification, err) => {
    if (err) {
        console.error("Failed to process opened notification:", err);
    } else {
        console.log("Push opened:", JSON.stringify(notification));
        // Handle the opened notification
    }
});

Benutzerkonfiguration

Indem Sie sich auf das individuelle Benutzerverhalten und die Vorlieben konzentrieren, können Sie personalisierte Inhalte bereitstellen, was zu einer erhöhten Benutzerzufriedenheit und -bindung führt.

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

class Registration {
  async afterUserLogin(user) {

    // Set user ID
    Pushwoosh.setUserId(user.getId);

    // Setting additional user information as tags for Pushwoosh
    await Pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}

Tags

Tags sind Schlüssel-Wert-Paare, die Benutzern oder Geräten zugewiesen werden und eine Segmentierung basierend auf Attributen wie Vorlieben oder Verhalten ermöglichen, was gezieltes Messaging ermöglicht.

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

class UpdateUser {
 async afterUserUpdateProfile(user) {

    // Set list of favorite categories
    await Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Set payment information
    await Pushwoosh.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}

Events

Events sind spezifische Benutzeraktionen oder Vorkommnisse innerhalb der App, die verfolgt werden können, um das Verhalten zu analysieren und entsprechende Nachrichten oder Aktionen auszulösen.

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

class Registration {

  // Track login event
  afterUserLogin(user) {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Track purchase event
  afterUserPurchase(product) {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

Fehlerbehebung

Wenn während des Integrationsprozesses Probleme auftreten, lesen Sie bitte den Abschnitt Support und Community.