Der ultimative Guide: So integrieren Sie Expo mit FCM für perfekte Push-Nachrichten

Push-Nachrichten sind heutzutage ein unverzichtbares Werkzeug für jede mobile App. Sie ermöglichen es Ihnen, mit Ihren Nutzern in Echtzeit zu interagieren, sie über wichtige Updates zu informieren, die Benutzeraktivität zu fördern und letztendlich die Benutzerbindung zu erhöhen. Wenn Sie eine mobile App mit Expo entwickeln, ist die Integration mit Firebase Cloud Messaging (FCM) der Schlüssel zu einer reibungslosen und zuverlässigen Push-Nachrichten-Erfahrung. Dieser umfassende Leitfaden führt Sie Schritt für Schritt durch den gesamten Prozess und stellt sicher, dass Sie Ihre Expo-App erfolgreich mit FCM verbinden und perfekt funktionierende Push-Nachrichten senden können.

Warum Expo und FCM?

Expo ist ein fantastisches Framework für die Entwicklung plattformübergreifender mobiler Apps mit JavaScript. Es bietet einen schnellen Entwicklungsprozess, vereinfacht die Konfiguration und ermöglicht es Ihnen, sich auf die Funktionalität Ihrer App zu konzentrieren, anstatt sich in plattformspezifischen Details zu verlieren. FCM hingegen ist ein zuverlässiger und skalierbarer Push-Nachrichten-Dienst von Google, der es Ihnen ermöglicht, Nachrichten sowohl an Android- als auch an iOS-Geräte zu senden. Die Kombination von Expo und FCM bietet eine leistungsstarke Lösung für die Implementierung von Push-Benachrichtigungen in Ihren mobilen Apps.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Sie Folgendes haben:

• Ein Firebase-Konto. Wenn Sie noch keines haben, erstellen Sie eines auf der Firebase-Website.
• Ein Expo-Projekt. Erstellen Sie bei Bedarf ein neues Projekt mit dem Expo CLI.
• Node.js und npm (oder yarn) installiert.

Schritt 1: Erstellen eines Firebase-Projekts

Der erste Schritt besteht darin, ein neues Firebase-Projekt zu erstellen. Gehen Sie dazu wie folgt vor:

1. Besuchen Sie die Firebase Console.
2. Klicken Sie auf „Projekt hinzufügen”.
3. Geben Sie einen Namen für Ihr Projekt ein.
4. Befolgen Sie die Anweisungen, um die Projekteinrichtung abzuschließen.

Schritt 2: Konfigurieren von FCM in Ihrem Firebase-Projekt

Nachdem Sie Ihr Firebase-Projekt erstellt haben, müssen Sie FCM aktivieren und Ihre App konfigurieren. Dies geschieht in den Projekteinstellungen:

1. Gehen Sie in der Firebase Console zu „Projekteinstellungen”.
2. Klicken Sie auf den Tab „Cloud Messaging”.
3. Sie sehen zwei Abschnitte: „Firebase Cloud Messaging (Legacy HTTP)” und „APIs hinzufügen”. Wir konzentrieren uns auf die Konfiguration für Android und iOS separat.

Konfiguration für Android

1. Klicken Sie unter „Allgemein” auf „App hinzufügen” und wählen Sie „Android”.
2. Geben Sie den Paketnamen Ihrer App ein. Sie finden diesen in Ihrem Expo-Projekt in der Datei `app.json` unter `android.package`. Beispiel: `com.example.myapp`.
3. (Optional) Geben Sie den SHA-1-Signatur-Zertifikat-Fingerabdruck ein. Dies ist für die Nutzung bestimmter Firebase-Funktionen wie Dynamic Links erforderlich. Sie können dies mit dem `keytool` auf Ihrem System generieren. Für eine einfache Push-Nachrichten-Integration ist dies jedoch oft nicht erforderlich.
4. Laden Sie die `google-services.json`-Datei herunter, die von Firebase generiert wird.
5. Fügen Sie diese Datei in Ihr Expo-Projekt im Stammverzeichnis hinzu.

Konfiguration für iOS

1. Klicken Sie unter „Allgemein” auf „App hinzufügen” und wählen Sie „iOS”.
2. Geben Sie die Bundle-ID Ihrer App ein. Sie finden diese in Ihrem Expo-Projekt in der Datei `app.json` unter `ios.bundleIdentifier`. Beispiel: `com.example.myapp`.
3. (Optional) Geben Sie die App Store-ID ein, wenn Sie Ihre App bereits im App Store veröffentlicht haben.
4. Registrieren Sie Ihren APNs-Schlüssel (Apple Push Notification service) oder laden Sie Ihr APNs-Zertifikat hoch. Dies ist der wichtigste Schritt für iOS.
   • APNs-Schlüssel (Empfohlen):
     • Generieren Sie einen APNs-Schlüssel in Ihrem Apple Developer Account (Keys > Add Key).
     • Laden Sie den Schlüssel herunter (beachten Sie die Key ID).
     • Laden Sie den Schlüssel in der Firebase Console hoch.
     • Geben Sie die Key ID und die Team ID an.
   • APNs-Zertifikat:
     • Erstellen Sie ein Certificate Signing Request (CSR) mit dem Schlüsselbund.
     • Erstellen Sie ein APNs-Zertifikat in Ihrem Apple Developer Account (Certificates > Add Certificate).
     • Laden Sie das Zertifikat herunter und exportieren Sie es als `.p12`-Datei.
     • Laden Sie die `.p12`-Datei in der Firebase Console hoch.
     • Geben Sie das Passwort für die `.p12`-Datei an.

Schritt 3: Installieren der erforderlichen Expo-Pakete

Um FCM-Funktionen in Ihrer Expo-App zu nutzen, müssen Sie die entsprechenden Expo-Pakete installieren:

npx expo install firebase @react-native-async-storage/async-storage

Dieses Kommando installiert das Firebase SDK für React Native und das Paket `@react-native-async-storage/async-storage`, das für die Speicherung des Push-Tokens benötigt wird.

Schritt 4: Konfigurieren Ihrer Expo-App

Jetzt müssen Sie Ihre Expo-App so konfigurieren, dass sie Push-Nachrichten empfangen kann. Fügen Sie den folgenden Code in Ihre `App.js` oder eine andere geeignete Datei ein:

„`javascript
import React, { useState, useEffect, useRef } from ‘react’;
import { Text, View, Platform } from ‘react-native’;
import * as Device from ‘expo-device’;
import * as Notifications from ‘expo-notifications’;
import { initializeApp } from ‘firebase/app’;
import { getMessaging, getToken, onMessage } from ‘firebase/messaging’;
import AsyncStorage from ‘@react-native-async-storage/async-storage’;

// Firebase Configuration
const firebaseConfig = {
apiKey: „YOUR_API_KEY”, // Replace with your Firebase API Key
authDomain: „YOUR_AUTH_DOMAIN”, // Replace with your Firebase Auth Domain
projectId: „YOUR_PROJECT_ID”, // Replace with your Firebase Project ID
storageBucket: „YOUR_STORAGE_BUCKET”, // Replace with your Firebase Storage Bucket
messagingSenderId: „YOUR_MESSAGING_SENDER_ID”, // Replace with your Firebase Messaging Sender ID
appId: „YOUR_APP_ID”, // Replace with your Firebase App ID
measurementId: „YOUR_MEASUREMENT_ID” // Replace with your Firebase Measurement ID
};

Notifications.setNotificationHandler({
handleNotification: async () => ({
shouldShowAlert: true,
shouldPlaySound: false,
shouldSetBadge: false,
}),
});

export default function App() {
const [expoPushToken, setExpoPushToken] = useState(”);
const [notification, setNotification] = useState(false);
const notificationListener = useRef();
const responseListener = useRef();

useEffect(() => {
registerForPushNotifications().then(token => setExpoPushToken(token));

notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
setNotification(notification);
});

responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
console.log(response);
});

return () => {
Notifications.removeNotificationSubscription(notificationListener.current);
Notifications.removeNotificationSubscription(responseListener.current);
};
}, []);

// Function to register for push notifications
async function registerForPushNotifications() {
let token;

if (Device.isDevice) {
const { status: existingStatus } = await Notifications.getPermissionsAsync();
let finalStatus = existingStatus;
if (existingStatus !== ‘granted’) {
const { status } = await Notifications.requestPermissionsAsync();
finalStatus = status;
}
if (finalStatus !== ‘granted’) {
alert(‘Failed to get push token for push notification!’);
return;
}

if (Platform.OS === ‘ios’) {
token = (await Notifications.getDevicePushTokenAsync()).data;
} else {
token = (await Notifications.getExpoPushTokenAsync()).data;
}
console.log(„Expo Push Token: „, token);
} else {
alert(‘Must use physical device for Push Notifications’);
}

if (Platform.OS === ‘android’) {
Notifications.setNotificationChannelAsync(‘default’, {
name: ‘default’,
importance: Notifications.AndroidImportance.MAX,
vibrationPattern: [0, 250, 250, 250],
lightColor: ‘#FF231F7C’,
});
}

return token;
}

return (

Your expo push token: {expoPushToken}

Title: {notification && notification.request.content.title}
Body: {notification && notification.request.content.body}
Data: {notification && JSON.stringify(notification && notification.request.content.data)}

);
}
„`

Wichtige Hinweise:

• Ersetzen Sie `YOUR_API_KEY`, `YOUR_AUTH_DOMAIN`, etc. durch Ihre tatsächlichen Firebase-Konfigurationswerte. Sie finden diese in der Firebase-Konsole unter „Projekteinstellungen” > „Allgemein”.
• Die Funktion `registerForPushNotifications` fordert die Benutzerberechtigung für Push-Nachrichten an und ruft das Push-Token ab.
• Speichern Sie das Push-Token sicher (z. B. in Ihrer Datenbank), damit Sie es verwenden können, um Nachrichten an bestimmte Geräte zu senden.
• Für iOS ist die Funktion `Notifications.getDevicePushTokenAsync()` zuständig, um das Gerätetoken abzurufen. Unter Android wird `Notifications.getExpoPushTokenAsync()` verwendet.

Schritt 5: Senden von Push-Nachrichten

Nachdem Sie Ihre Expo-App mit FCM konfiguriert haben, können Sie mit dem Senden von Push-Nachrichten beginnen. Sie können dies entweder über die Firebase Console oder über die Firebase Admin SDK tun.

Senden von Nachrichten über die Firebase Console

1. Gehen Sie zur Firebase Console.
2. Wählen Sie Ihr Projekt aus.
3. Klicken Sie im linken Menü auf „Cloud Messaging”.
4. Klicken Sie auf „Kampagne erstellen”.
5. Wählen Sie „Benachrichtigung”.
6. Geben Sie die Details Ihrer Nachricht ein (Titel, Text, etc.).
7. Wählen Sie die Zielgruppe aus (z. B. „Benutzersegmente” oder „Einzelne Geräte”).
8. Wenn Sie „Einzelne Geräte” auswählen, geben Sie das Push-Token des Geräts ein, an das Sie die Nachricht senden möchten.
9. Senden Sie die Nachricht.

Senden von Nachrichten über die Firebase Admin SDK

Um Push-Nachrichten programmatisch zu senden, können Sie die Firebase Admin SDK verwenden. Hier ist ein Beispiel, wie Sie dies mit Node.js tun können:

„`javascript
const admin = require(‘firebase-admin’);

const serviceAccount = require(‘./path/to/your/serviceAccountKey.json’); // Pfad zur serviceAccountKey.json Datei

admin.initializeApp({
credential: admin.credential.cert(serviceAccount)
});

const message = {
notification: {
title: ‘Hallo!’,
body: ‘Dies ist eine Push-Nachricht von FCM!’
},
token: ‘YOUR_PUSH_TOKEN’ // Ersetzen Sie dies durch das Push-Token des Geräts
};

admin.messaging().send(message)
.then((response) => {
console.log(‘Erfolgreich Nachricht gesendet:’, response);
})
.catch((error) => {
console.log(‘Fehler beim Senden der Nachricht:’, error);
});
„`

Wichtige Hinweise:

• Ersetzen Sie `’./path/to/your/serviceAccountKey.json’` durch den tatsächlichen Pfad zu Ihrer Service Account Key-Datei. Sie können diese Datei in der Firebase Console unter „Projekteinstellungen” > „Servicekonten” generieren.
• Ersetzen Sie `’YOUR_PUSH_TOKEN’` durch das Push-Token des Geräts, an das Sie die Nachricht senden möchten.

Schritt 6: Beheben häufiger Probleme

Bei der Integration von Expo mit FCM können einige häufige Probleme auftreten:

• Push-Nachrichten werden nicht empfangen: Stellen Sie sicher, dass Sie die APNs-Authentifizierung korrekt für iOS eingerichtet haben. Überprüfen Sie die Bundle ID. Stellen Sie sicher, dass die Firebase Konfigurationswerte in Ihrer `App.js` korrekt sind.
• Das Push-Token ist ungültig: Das Push-Token kann sich ändern, wenn die App neu installiert oder die Daten gelöscht werden. Stellen Sie sicher, dass Sie immer das aktuelle Token verwenden.
• Fehler beim Senden von Nachrichten über die Admin SDK: Stellen Sie sicher, dass Ihre Service Account Key-Datei korrekt ist und die Berechtigungen korrekt konfiguriert sind.

Fazit

Die Integration von Expo mit FCM ist entscheidend für die Bereitstellung einer großartigen Push-Nachrichten-Erfahrung in Ihrer mobilen App. Dieser Leitfaden hat Sie durch den gesamten Prozess geführt, von der Erstellung eines Firebase-Projekts bis zum Senden Ihrer ersten Push-Nachricht. Mit den hier beschriebenen Schritten können Sie sicherstellen, dass Ihre Expo-App zuverlässig Push-Nachrichten empfängt und Ihre Benutzer immer auf dem Laufenden sind. Experimentieren Sie mit den verschiedenen FCM-Funktionen, um das Beste aus Ihren Push-Nachrichten herauszuholen und das Engagement Ihrer Benutzer zu maximieren.