We will be focusing on the Ionic framework 4 with Vue as the front-end framework, and Capacitor as runtime and build environment and firebase-admin for both IOS and Android.

Structure of post

1. Firebase setup for IOS and Android & Package Installation
2. Push notification code implementation
3. Build and test from FireBase console.
4. Configure server with firebase-admin to send push from the server.
5. Send push notification from the server.

Let’s get started with the Ionic Vue Push Notification app!

# Firebase setup for IOS and Android

Android:

Assuming that your app is already set up with firebase. You’ll first have to create an Android app in Firebase console. During the process, it will ask you to enter the app’s package name and provide google-services.json.

Download google-services.json `and add to your project in `android/app folder.

Your App/build.gralde should have

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

Your Project/build.gralde should have

dependencies { classpath 'com.android.tools.build:gradle:3.3.2' classpath 'com.google.gms:google-services:4.3.2' }

You can update to latest Gradle as the new version is already available.

IOS:

Register the IOS app and download GoogleService-Info.plist and place it inside ios/App/App.

# Package Installation

capacitor-fcm

Capacitor plugin to enable features from Firebase Cloud Messaging

npm i capacitor-fcm

This plugin is intended to be used combined with Capacitor API for Push Notifications. Capacitor only provides APN token whereas this plugin offers the possibility to work with FCM tokens and more.

Easiest way to integrate push notifications in your Chat applications is using Firebase. React Native Firebase is the officially recommended collection of packages that brings React Native support for all Firebase services on both Android and iOS apps.

caution

Version 1 (legacy) of push notifications won't be removed immediately but there won't be any new features. That's why new applications are highly recommended to use version 2 from the beginning to leverage upcoming new features.

Requirements

• Only members of channel receive Push Notifications
• We only send push notifications, when the user doesn't have any active WebSocket connection (which is established when you call client.connectUser).
• If you are using components from React Native Chat SDK, we automatically drop the WebSocket connection when app goes to background. To disable this behaviour, you can set prop closeConnectionOnBackground={false} on Chat component, in which case WebSocket will stay active for approximately 15-20 seconds when app goes to background.

Firebase Setup

Follow the steps mentioned on Firebase documentation setup Firebase.

1. .
2. Register your and app with Firebase app.
3. Download a Firebase configuration file for iOS and .
4. Install React Native Firebase.

   Install & setup the app module

   yarn add @react-native-firebase/app

   Install the messaging module

   yarn add @react-native-firebase/messaging

5. .
6. .

Integration with Stream

Get the Server Key

1. From the Firebase Console, select the project your app belongs to.
2. Click on the gear icon next to Project Overview and navigate to Project settings.

1. Navigate to the Cloud Messaging tab
2. Under Project Credentials, locate the Server key and copy it

Upload Server Key on Stream

You can upload your server key either from dashboard OR using Stream Chat Server side SDK.

Upload FCM Server Key via Chat Dashboard

1. Go to the Stream dashboard.
2. Select your app.
3. Go to Chat Overview page from top navigation.
   
4. Enable Firebase Push notifications toggle.
   
5. You will see a modal when you enable Firebase toggle, where you can enter your FCM Server Key. Or you can click on Edit Settings button to edit/update previously configured FCM Server Key.

tip

Under the modal, you can also update the Firebase Notification Template. Please read more about template on template docs

1. Save your push notification settings changes.
   

Upload FCM Server Key via Stream Chat Server side SDK

You can also upload the Server Key via API call using a backend SDK.

const client = StreamChat.getInstance(API_KEY, API_SECRET);
await client.updateAppSettings({
  firebase_config: {
    server_key: 'server_key',
    notification_template: `{"message":{"notification":{"title":"New messages","body":"You have {{ unread_count }} new message(s) from {{ sender.name }}"},"android":{"ttl":"86400s","notification":{"click_action":"OPEN_ACTIVITY_1"}}}}`,
    data_template: `{"sender":"{{ sender.id }}","channel":{"type": "{{ channel.type }}","id":"{{ channel.id }}"},"message":"{{ message.id }}"}`,
  },
});

Registering a device with Stream

Once you configure Firebase server key and set it up on Stream dashboard, a device that is supposed to receive push notifications needs to be registered at Stream backend. This is usually done by listening for Firebase device token.

caution

Please note that, client.addDevice call requires user token to be set on client. So client.addDevice call should be made after client.connectUser in code.

// Request Push Notification permission from device.
const requestPermission = async () => {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL;

  if (enabled) {
    console.log('Authorization status:', authStatus);
  }
};

const App = () => {
  const [isReady, setIsReady] = useState(false);
  const unsubscribeTokenRefreshListenerRef = useRef<() => void>();

  useEffect(() => {
    // Register FCM token with stream chat server.
    const registerPushToken = async () => {
      // unsubscribe any previous listener
      unsubscribeTokenRefreshListenerRef.current?.();
      const token = await messaging().getToken();
      await client.addDevice(token, 'firebase');

      unsubscribeTokenRefreshListener = messaging().onTokenRefresh(async newToken => {
        await client.addDevice(newToken, 'firebase');
      });
    };

    const init = async () => {
      await client.connectUser({ id: USER_ID }, USER_TOKEN);

      await requestPermission();
      await registerPushToken();

      setIsReady(true);
    };

    init();

    return async () => {
      await client?.disconnectUser();
      unsubscribeTokenRefreshListenerRef.current?.();
    };
  }, []);

  if (!isReady) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Chat client={client}>{/* Child components of Chat go here */}</Chat>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

This concludes the setup for push notifications. If you are having trouble receiving push notifications, please use our Push Notification Test Application to check if you have setup Push Configuration correctly. Please follow the steps mentioned in README for further instructions