Expo SDK: Grundlegende Integrationsanleitung

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

Voraussetzungen

Um das Pushwoosh Expo 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 Token-basierten 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 google-services.json-Datei und den Paketnamen aus Ihrem Firebase-Projekt.
  • Ein Firebase-Projekt, das mit Ihrer Android-Anwendung verbunden ist. Folgen Sie bei Bedarf der Firebase-Einrichtungsanleitung.
• Ihren Pushwoosh Application Code und Pushwoosh Device API Token aus dem Pushwoosh Control Panel für Ihre Anwendung.

Integrationsschritte

1. Installieren Sie das Plugin

Installieren Sie das Pushwoosh Expo Plugin mit dem Expo CLI

expo install pushwoosh-expo-plugin

Installieren Sie das Pushwoosh React Native SDK

npm install pushwoosh-react-native-plugin --save

2. Legen Sie die Plugin-Eigenschaften fest

Fügen Sie das Plugin am Anfang des Plugin-Arrays mit den erforderlichen Eigenschaften hinzu:

app.json/app.config.js

{
  "expo": {
    "plugins": [
      [
        "pushwoosh-expo-plugin",
        {
          "mode": "development",
          "ios": {
            "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
          },
          "android": {
            "apiToken": "__YOUR_DEVICE_API_TOKEN__"
          }
        }
      ]
    ]
  }
}

Wobei:

• mode wird verwendet, um die APNs-Umgebungsberechtigung zu konfigurieren. Die Werte „Development“ oder „production“ sind verfügbar.
• PW_API_TOKEN, apiToken ist Ihr Pushwoosh Device API Token.

3. Initialisieren Sie Pushwoosh

In der Root-Komponente Ihrer Anwendung:

• Importieren Sie das pushwoosh-react-native-plugin Plugin.
• Initialisieren Sie das Pushwoosh SDK.
• Rufen Sie register() in Ihrer Initialisierungslogik auf, um sich für Push-Benachrichtigungen zu registrieren.

index.tsx

import Pushwoosh from 'pushwoosh-react-native-plugin';

Pushwoosh.init({
    "pw_appid": "__YOUR_APP_ID__" ,
    "project_number": "__YOUR_FCM_SENDER_ID__"
});

Pushwoosh.register();

Wobei:

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

4. Natives Android-Setup

Fügen Sie die Firebase-Konfigurationsdatei hinzu:

1. Kopieren Sie Ihre google-services.json-Datei in das Stammverzeichnis des Projekts.
2. Setzen Sie die googleServicesFile-Eigenschaft auf den Pfad Ihrer google-services.json und geben Sie die package-Eigenschaft an:

app.json/app.config.js

  "expo": {
    "name": "sample",
  "android": {
    "package": "com.pushwoosh.sample",
    "googleServicesFile": "./google-services.json"
  },
  "plugins": [
    [
      "pushwoosh-expo-plugin",
      {
        "mode": "development",
        "ios": {
          "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
        },
        "android": {
          "apiToken": "__YOUR_DEVICE_API_TOKEN__"
        }
      }
    ]
  ]
}

5. Natives iOS-Setup

Setzen Sie die bundleIdentifier-Eigenschaft auf das ios-Objekt:

app.json/app.config.js

  "expo": {
    "name": "sample",
    "ios": {
      "bundleIdentifier": "com.pushwoosh.sample"
    },
    "plugins": [
    [
      "pushwoosh-expo-plugin",
      {
        "mode": "development",
        "ios": {
          "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
        },
        "android": {
          "apiToken": "__YOUR_DEVICE_API_TOKEN__"
        }
      }
    ]
  ]
}

6. Erstellen Sie die App vorab (Prebuild)

Generieren Sie nativen Code und konfigurieren Sie die Abhängigkeiten für jede Plattform, indem Sie prebuild ausführen:

npx expo prebuild

7. Führen Sie das Projekt aus

1. Erstellen und führen Sie das Projekt aus:

Android

npx expo run:android

iOS

npx expo run:ios

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 diesem Stadium 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 SDK gibt es zwei Event-Listener, die für die Verarbeitung von Push-Benachrichtigungen konzipiert sind:

• Das onPushReceived-Event wird ausgelöst, wenn eine Push-Benachrichtigung empfangen wird.
• Das onPushAccepted-Event wird ausgelöst, wenn ein Benutzer eine Benachrichtigung öffnet.

Sie sollten diese Event-Listener direkt nach der Initialisierung des SDK beim Start der Anwendung einrichten:

import { DeviceEventEmitter } from 'react-native';
import Pushwoosh from 'pushwoosh-react-native-plugin';

class PushwooshNotificationHandler {
  setupPushListeners(): void {

    DeviceEventEmitter.addListener("pushReceived", (e) => {
      console.warn("Push received: " + JSON.stringify(e));
    });

    DeviceEventEmitter.addListener("pushOpened", (e) => {
      console.warn("Push opened:" + JSON.stringify(e));
    });

  }
}

Benutzerkonfiguration

Indem Sie sich auf das individuelle Nutzerverhalten und die Vorlieben konzentrieren, können Sie personalisierte Inhalte bereitstellen, was zu einer höheren Nutzerzufriedenheit und -bindung führt.

import Pushwoosh from 'pushwoosh-react-native-plugin';

class Registration {
  afterUserLogin(user: User): void {

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

    // Set user email
    Pushwoosh.setEmails(user.getEmailList());

    // Setting additional user information as tags for Pushwoosh
    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 nach Attributen wie Vorlieben oder Verhalten ermöglichen, was gezielte Nachrichtenübermittlung erlaubt.

import Pushwoosh from 'pushwoosh-react-native-plugin';

class UpdateUser {
  afterUserUpdateProfile(user: User): void {

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

    // Set payment information
    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-react-native-plugin';

class Registration {

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

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

Nachverfolgung der Nachrichtenzustellung für iOS

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

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

Zusätzliche Plugin-Eigenschaften

Eigenschaft	Standard	Beschreibung
iOS-Eigenschaften
Pushwoosh_LOG_LEVEL	INFO	Log-Level für iOS. Mögliche Werte: NONE, ERROR, WARN, INFO, DEBUG, NOISE
Android-Eigenschaften
logLevel	INFO	Log-Level für Android. Einer von: NONE, ERROR, WARN, INFO, DEBUG, NOISE
multiNotificationMode	true	Kann auf false geändert werden, falls Sie dem Benutzer nur die letzte Benachrichtigung anzeigen möchten
icon	-	Pfad zu einem benutzerdefinierten Benachrichtigungssymbol für Android

Fehlerbehebung

Wenn Sie während des Integrationsprozesses auf Probleme stoßen, lesen Sie bitte den Abschnitt Support und Community.

FCM-Registrierungsfehler: Failed to retrieve token. Is firebase configured correctly?

Stellen Sie sicher, dass Ihre Firebase-Eigenschaft googleServicesFile in der Expo-Konfigurationsdatei eingerichtet ist und die google-services.json-Datei zum Stammverzeichnis Ihres Projekts hinzugefügt wurde:

app.json/app.config.js

"expo": {
  "name": "sample",
  "android": {
    "package": "com.pushwoosh.sample",
    "googleServicesFile": "./google-services.json"
  },
  "plugins": [
    [
      "pushwoosh-expo-plugin",
      {
        "mode": "development",
        "ios": {
          "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
        },
        "android": {
          "apiToken": "__YOUR_DEVICE_API_TOKEN__"
        }
      }
    ]
  ]
}

TypeError: Cannot read property ‘init’ of null

Möglicherweise stoßen Sie auf den Fehler, wenn Sie versuchen, die App auf einem Gerät auszuführen.
Um das Problem zu beheben, stellen Sie sicher, dass Sie den Prebuild-Schritt abgeschlossen haben. Er generiert den nativen Code und konfiguriert die Abhängigkeiten für jede Plattform.

npx expo prebuild