Push Notifications working with test message but not Firebase campaign

Capacitor
1

I have create a usePushNotification hook in my Ionic/React app following the official documentation. When I generate a token, and paste that token in to Firebase Cloud Messaging to send a test notification, the notification arrives on my test phone no problem. When I create a campaign and send a notification scheduled for now, it never arrives. What am I doing wrong?

I have the google-services.json file in the Android app

import { useEffect } from 'react';
import { PushNotifications } from '@capacitor/push-notifications';

const usePushNotifications = () => {
  useEffect(() => {
    (async () => {
      let permStatus = await PushNotifications.checkPermissions();

      if (permStatus.receive === 'prompt') {
        permStatus = await PushNotifications.requestPermissions();
      }

      if (permStatus.receive !== 'granted') {
        throw new Error('User denied permissions!');
      }

      await PushNotifications.register();

      if (permStatus.receive === 'granted') {
        await PushNotifications.addListener('registration', (token) => {
          console.info('Registration token: ', token.value);
        });

        await PushNotifications.addListener('registrationError', (err) => {
          console.error('Registration error: ', err.error);
        });

        await PushNotifications.addListener(
          'pushNotificationReceived',
          (notification) => {
            console.log('Push notification received: ', notification);
          }
        );

        await PushNotifications.addListener(
          'pushNotificationActionPerformed',
          (notification) => {
            console.log(
              'Push notification action performed',
              notification.actionId,
              notification.inputValue
            );
          }
        );
      }
    })();
  }, []);
};

export default usePushNotifications;
2

I have the same issue at the moment using capacitor v5. Any hint or suggestion would be great. :confused: It is preventing us from publishing the next version of our app…

3

Hey Oliver, my “fix” ended up being that the app won’t display firebase notifications from a campaign when I was just testing it directly from Android studio. When I built the app to an APK and sideloaded it on a phone the notifications ended up working fine. I really struggled to get iOS notifications to ever work however using the @capacitor/push-notifications module. For this reason, I switched to using ‘@capacitor-firebase/messaging’ as it was much easier to set up on both phones.

Here is my code:

import { useEffect } from 'react';
import { FirebaseMessaging } from '@capacitor-firebase/messaging';
import { isPlatform } from '@ionic/react';

const usePushNotifications = () => {
  useEffect(() => {
    (async () => {
      if (isPlatform('capacitor')) {
        try {
          const result = await FirebaseMessaging.requestPermissions();

          if (result.receive === 'granted') {
            const { token } = await FirebaseMessaging.getToken();
            console.log('Token received', token);

            FirebaseMessaging.addListener('notificationReceived', (event) => {
              console.log('notificationReceived', { event });
            });

            FirebaseMessaging.addListener(
              'notificationActionPerformed',
              (event) => {
                console.log('notificationActionPerformed: ', { event });
              }
            );
          }
        } catch (err) {
          console.log('Push Notification error', err);
        }
      }
    })();
  }, []);

  return {};
};

export default usePushNotifications;

And here is the guide I followed: The Push Notifications Guide for Capacitor - Capawesome

1 Like
4

Thanks

I also trying it out. I have an iOS device. Firebase Campaign Test message arrives, but not the campaign itself. I am totally lost. I used your code (not in a hook itself, but in useEffect at App.tsx). I did setup the Podfile and removed the other plugin.

all console.logs looking good. The App is in background during the test.

Do you know how “Version” is handled in Firebase Cloud Messaging? We actually have a 2.0 we are working on and I just see 1.x versions

I am not able to test it without affecting our prod users