[firebase-messaging][Android] trigger onNotificationTap callback on app launch from a notification

[nikoTM]

When the app is launched from a closed state with a notification tap onNotificationTap is not called. Would be great to have a way to enable this behavior or have it on by default. @nativescript/firebase handles this here https://github.com/EddyVerbruggen/nativescript-plugin-firebase/blob/2fe6fe6156f2665b2017c711d92a38f593c3bbee/src/messaging/messaging.android.ts#L52

[triniwiz]

Please try again with the latest alpha

[jessorlisa]

@triniwiz Just tried with 1.0.0-alpha.42 and I am afraid onNotificationTap is still not called on app launch (when closed).

@nikoTM Does is work for you?

[jessorlisa]

I just found this, is this the recommended way for the Angular flavor?

Originally posted by @williamjuan027 in https://github.com/NativeScript/firebase/issues/24#issuecomment-1019876117

@triniwiz It turns out to be the initialization issue. In an Angular project, initializing it in the main.ts resolves the issue. Below is the code I used to initialize the plugin.

// main.ts

import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-messaging';

const firebaseInit = firebase().initializeApp();
if (firebaseInit) {
  firebase().messaging();
}

[williamjuan027]

@jessorlisa There was a recent update that made the initializeApp() function return a Promise, so the following should be enough to initialize the plugin.

// main.ts

import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-messaging';

firebase().initializeApp().then((app) => {
   const firebaseApp = app;  // optional - if you need reference to the firebase app :) 
});

[jessorlisa]

@williamjuan027 Thanks a lot. I just realized that studying the source. 😊

However moving the initialization to main.ts does not solve the problem of onNotificationTap not being called when the app was closed. (Which was what I had hoped for when reading your comment in the linked ticket. 😞 )

[williamjuan027]

@jessorlisa Yes, you're right. I just tested that out on my end, and onNotificationTap seems to only get called when the app is in the background and not when its closed.

[williamjuan027]

@triniwiz When I test this on Android, I found out that if I add the onNotificationTap handler early enough (like in the main.ts), it does get triggered when the app is closed, but if I set it late (like in a service), it only gets called when the app is in the background.

// main.ts

import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-messaging';

firebase().initializeApp().then(app =>{
      firebase().messaging().onNotificationTap((message) => {
        // gets called when tapping on the notification while the app is closed, but not when the app is in the background
        console.log('[Main][onNotificationTap]', message);
      });
  });

// messaging.service.ts

import { Injectable } from '@angular/core';
import { firebase } from '@nativescript/firebase-core';

@Injectable({
    providedIn: 'root'
})
export class MessagingService {

    init(): void {
        firebase().messaging()
        .requestPermission()
        .then(() => {
            firebase().messaging().onMessage((message) => {
                // gets called when an fcm is received while app is in the foreground
                console.log('[MessagingService][onMessage]', message);
            });

            firebase().messaging().onNotificationTap((message) => {
                // gets called when a notification tap while app is in the background
                console.log('[MessagingService][onNotificationTap]', message);
            });
        })
    }

}

Hope this helps :)

[jessorlisa]

@triniwiz @williamjuan027

I just did a quick check, the same problem seems to apply to iOS.

[williamjuan027]

@jessorlisa I was seeing it come in under onMessage for iOS when you tap on a notification while the app is closed and onNotificationTap when the app is in the background. Are you seeing the same thing on your end?

[jessorlisa]

@williamjuan027 None is called - but maybe because I currently add the handlers in a service, not the main.ts. Will do another test tomorrow.

[jessorlisa]

Sorry for the delay:

Setup 1: Angular project, handlers added in a service

• fcm message received while in foreground: onMessage (Android/iOS)
• notification tapped while in background: onNotificationTap (Android/iOS)
• notification tapped while closed: none (Android/iOS)

Setup 2: Angular project, handlers added in main.ts before bootstrap

• fcm message received while in foreground: onMessage (Android/iOS)
• notification tapped while in background: onNotificationTap (Android/iOS)
• notification tapped while closed: onNotificationTap (Android) / none (iOS)

---

I also noticed that on iOS you have to register the device for remote messages after requesting permission, otherwise it does not work at all. Can anybody confirm this?

firebase().messaging()
    .requestPermission()
    .then(() => {

        // seems to be necessary for iOS to work?
        if (isIOS) {
            firebase().messaging()
                .registerDeviceForRemoteMessages()
                .catch((e) => {
                    console.error(e);
                });
        }
    });

[fpaaske]

I also noticed that on iOS you have to register the device for remote messages after requesting permission, otherwise it does not work at all. Can anybody confirm this?

I can confirm. FCM was not working until I added this call. It's also mentioned in #24. Spent way too long to discover this 😄

[jessorlisa]

@triniwiz Is the 3rd scenario as mentioned below supposed to work with the latest version (1.1.2)?

Setup 1: Angular project, handlers added in a service

• fcm message received while in foreground: onMessage (Android/iOS)
• notification tapped while in background: onNotificationTap (Android/iOS)
• notification tapped while closed: none (Android/iOS)

As of right now I am still having issues in that case.

[triniwiz]

It should I updated the angular demo to test ...

[jessorlisa]

I followed your demo exactly, still not working. No handler is called if the app is closed and the handlers are added in a service. Looking at the commit message It seems only the missing onNotificationTap for iOS as mentioned in setup 2 was addressed?

Setup 2: Angular project, handlers added in main.ts before bootstrap

• fcm message received while in foreground: onMessage (Android/iOS)
• notification tapped while in background: onNotificationTap (Android/iOS)
• notification tapped while closed: onNotificationTap (Android) / none (iOS)

But I will do another check ...

[jessorlisa]

I am afraid I have the same situation as back in February. I tried to follow the demo exactly. Dummy question: How can I run the demos part of this repo? 😊

[triniwiz]

Try the following

git clone https://github.com/NativeScript/firebase
cd firebase
npm run setup
npm run start // you can choose one of the demos

[jessorlisa]

@triniwiz

I set up a simple demo project to show the current issue: https://github.com/jessorlisa/demo-issues-nativescript-ng/tree/issue/firebase-messaging

All relevant information can be found in the "Issue description" and "Reproduction" section.

Let me know if

• you need anything else from me to check this
• I should open a new issue instead on commenting on this one ;)

On a side note: This repo's angular demo project is failing with some firebase-admob related errors ERROR in ../../packages/firebase-admob/utils.ts:7:31 - error TS2552: Cannot find name 'GADRequest'. Did you mean 'IDBRequest'?

[13dante04]

@triniwiz Could you reopen this, me and @jessorlisa are having this issue. I'm currently using

 "@nativescript/angular": "13.0.3",
    "@nativescript/core": "~8.2.1",
...
 "@nativescript/firebase-analytics": "^1.2.0",
    "@nativescript/firebase-core": "^1.2.0",
    "@nativescript/firebase-crashlytics": "^1.2.0",
    "@nativescript/firebase-dynamic-links": "^1.2.0",
    "@nativescript/firebase-messaging": "^1.2.0",

This seems to be an issue with Angular only since no one else is reporting it, the demo project is actually the same issue I'm getting.

[nikoTM]

Hey @triniwiz, I have read the thread here, but I am unsure what is the solution supposed to be. Notification handlers are still not being invoked if they are registered within an Angular service. Moving them to main.ts does not make sense, since it is essentially moves it out of the app context, making it difficult to handle notifications within the app without doing backward bending.

[triniwiz]

This shouldn't be an issue again with the latest versions

[nikoTM]

It's still the happening for me on:

├── @nativescript/firebase-core@2.3.4
├── @nativescript/firebase-messaging-core@2.3.4

On android when the app is closed, notification tap will not invoke the callback, unless I move out MessagingCore.getInstance().addOnNotificationTap... out of a service.

Update:

Seems to be working with

firebase()
  .initializeApp()
  .then(async () => {
    await MessagingCore.getInstance().registerDeviceForRemoteMessages();
  });

in main.ts

[MarkOdey]

I am having the same issue as @jessorlisa. In android while app is totally closed not just in background. The listener onNotificationTap is not catching the event. 

No problem while the app is in background.

I am using :

- nativescript-vue 2.9.3 
- @nativescript/core 8.5.9
- @nativescript/firebase-messaging 3.2.0  

Finally, firebase was instantiated to late. I initialized firebase before Vue and also made sure that

await MessagingCore.getInstance().registerDeviceForRemoteMessages();

was wrapped in a then promise pattern.

It all works now.