Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[🐛] setBackgroundMessageHandler is only valid when the app is running #8188

Open
1 of 8 tasks
7chenys opened this issue Dec 12, 2024 · 1 comment
Open
1 of 8 tasks
Labels

Comments

@7chenys
Copy link

7chenys commented Dec 12, 2024

I configured it according to the document https://rnfirebase.io/messaging/usage#background--quit-state-messages and obtained the permissions, but setBackgroundMessageHandler seems to be only valid when the app is running. After the app is closed through the 'UI' slide, no notification will pop up, and it seems that Headless JS is not created.
For this reason, I also went to the AndroidManifest file to check, but did not find the added service. Do I need to add it manually? If so, I hope it can be reflected in the document


我按照文档https://rnfirebase.io/messaging/usage#background--quit-state-messages 进行配置,权限也都获取到了,但是setBackgroundMessageHandler 似乎只在应用正在运行时有效,应用通过‘UI’滑动关闭后就不会弹出通知了,似乎也没有创建Headless JS。
为此,我还前往AndroidManifest文件中查看,没有发现添加的服务,是需要手动添加吗,如果是的话希望能在文档中体现


Project Files

Javascript

Click To Expand

package.json:

{
  "name": "purse",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest",
    "postinstall": "patch-package"
  },
  "dependencies": {
    "@expo/html-elements": "^0.4.2",
    "@gluestack-style/react": "^1.0.57",
    "@gluestack-ui/themed": "^1.1.61",
    "@legendapp/motion": "^2.4.0",
    "@notifee/react-native": "^9.1.3",
    "@react-native-async-storage/async-storage": "^2.0.0",
    "@react-native-clipboard/clipboard": "^1.15.0",
    "@react-native-community/blur": "^4.4.1",
    "@react-native-firebase/app": "^21.6.1",
    "@react-native-firebase/messaging": "^21.6.1",
    "@react-navigation/bottom-tabs": "^6.6.1",
    "@react-navigation/native": "^6.1.18",
    "@react-navigation/native-stack": "^6.11.0",
    "@types/lodash": "^4.17.13",
    "@types/react-native-calendar-picker": "^8.0.0",
    "axios": "^1.7.7",
    "big.js": "^6.2.2",
    "date-fns": "^4.1.0",
    "i18next": "^23.16.4",
    "lodash": "^4.17.21",
    "lucide-react-native": "^0.454.0",
    "mitt": "^3.0.1",
    "mobx": "^6.13.5",
    "mobx-react-lite": "^4.0.7",
    "nativewind": "^4.0.36",
    "react": "18.3.1",
    "react-i18next": "^15.1.0",
    "react-native": "0.76.1",
    "react-native-calendar-picker": "^8.0.5",
    "react-native-confirmation-code-field": "^7.4.0",
    "react-native-css-interop": "^0.0.36",
    "react-native-device-info": "^14.0.0",
    "react-native-gesture-handler": "^2.20.2",
    "react-native-linear-gradient": "^2.8.3",
    "react-native-modalize": "^2.1.1",
    "react-native-notifications": "^5.1.0",
    "react-native-portalize": "^1.0.7",
    "react-native-qrcode-svg": "^6.3.12",
    "react-native-reanimated": "^3.16.1",
    "react-native-reanimated-carousel": "^3.5.1",
    "react-native-safe-area-context": "^4.12.0",
    "react-native-screens": "^3.35.0",
    "react-native-static-safe-area-insets": "^2.2.0",
    "react-native-storage": "^1.0.1",
    "react-native-svg": "^15.8.0",
    "react-native-vision-camera": "^4.6.1",
    "tailwindcss": "^3.4.14"
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/runtime": "^7.25.0",
    "@react-native-community/cli": "15.0.0-alpha.2",
    "@react-native-community/cli-platform-android": "15.0.0-alpha.2",
    "@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
    "@react-native/babel-preset": "0.76.0",
    "@react-native/eslint-config": "0.76.0",
    "@react-native/metro-config": "0.76.0",
    "@react-native/typescript-config": "0.76.0",
    "@types/big.js": "^6.2.2",
    "@types/react": "^18.2.6",
    "@types/react-native-i18n": "^2.0.2",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "babel-plugin-module-resolver": "^5.0.2",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "jscodeshift": "^0.15.2",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "reactotron-react-native": "^5.1.9",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

firebase.json for react-native-firebase v6:

# N/A

iOS

Click To Expand

ios/Podfile:

  • I'm not using Pods
  • I'm using Pods and my Podfile looks like:
# N/A

AppDelegate.m:

// N/A


Android

Click To Expand

Have you converted to AndroidX?

  • my application is an AndroidX application?
  • [ ✅] I am using android/gradle.settings jetifier=true for Android compatibility?
  • I am using the NPM package jetifier for react-native compatibility?

android/build.gradle:

buildscript {
    ext {
        buildToolsVersion = "35.0.0"
        minSdkVersion = 24
        compileSdkVersion = 35
        targetSdkVersion = 34
        ndkVersion = "26.1.10909125"
        kotlinVersion = "1.9.24"
        firebase = [
            bom: "33.5.1"
        ]
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
        classpath("com.google.gms:google-services:4.4.2")
    }
}

apply plugin: "com.facebook.react.rootproject"

android/app/build.gradle:

apply plugin: "com.android.application"
apply plugin: "org.jetbrains.kotlin.android"
apply plugin: "com.facebook.react"
apply plugin: "com.google.gms.google-services"

/**
 * This is the configuration block to customize your React Native Android app.
 * By default you don't need to apply any configuration, just uncomment the lines you need.
 */
react {
    /* Folders */
    //   The root of your project, i.e. where "package.json" lives. Default is '../..'
    // root = file("../../")
    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
    // reactNativeDir = file("../../node_modules/react-native")
    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
    // codegenDir = file("../../node_modules/@react-native/codegen")
    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
    // cliFile = file("../../node_modules/react-native/cli.js")

    /* Variants */
    //   The list of variants to that are debuggable. For those we're going to
    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
    // debuggableVariants = ["liteDebug", "prodDebug"]

    /* Bundling */
    //   A list containing the node command and its flags. Default is just 'node'.
    // nodeExecutableAndArgs = ["node"]
    //
    //   The command to run when bundling. By default is 'bundle'
    // bundleCommand = "ram-bundle"
    //
    //   The path to the CLI configuration file. Default is empty.
    // bundleConfig = file(../rn-cli.config.js)
    //
    //   The name of the generated asset file containing your JS bundle
    // bundleAssetName = "MyApplication.android.bundle"
    //
    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
    // entryFile = file("../js/MyApplication.android.js")
    //
    //   A list of extra flags to pass to the 'bundle' commands.
    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
    // extraPackagerArgs = []

    /* Hermes Commands */
    //   The hermes compiler command to run. By default it is 'hermesc'
    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
    //
    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
    // hermesFlags = ["-O", "-output-source-map"]

    /* Autolinking */
    autolinkLibrariesWithApp()
}

/**
 * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
 */
def enableProguardInReleaseBuilds = true

/**
 * The preferred build flavor of JavaScriptCore (JSC)
 *
 * For example, to use the international variant, you can use:
 * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
 *
 * The international variant includes ICU i18n library and necessary data
 * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
 * give correct results when using with locales other than en-US. Note that
 * this variant is about 6MiB larger per architecture than default.
 */
def jscFlavor = 'org.webkit:android-jsc:+'

android {
    ndkVersion rootProject.ext.ndkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion
    compileSdk rootProject.ext.compileSdkVersion

    namespace "com.purse"
    defaultConfig {
        applicationId "com.purse"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
}

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")
    implementation 'com.google.mlkit:barcode-scanning:17.2.0'

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

android/settings.gradle:

pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
plugins { id("com.facebook.react.settings") }
extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
rootProject.name = 'purse'
include ':app'
includeBuild('../node_modules/@react-native/gradle-plugin')

MainApplication.kt:

package com.purse

import android.app.Application
import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactHost
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.facebook.react.defaults.DefaultReactNativeHost
import com.facebook.react.soloader.OpenSourceMergedSoMapping
import com.facebook.soloader.SoLoader

class MainApplication : Application(), ReactApplication {

  override val reactNativeHost: ReactNativeHost =
      object : DefaultReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
              // Packages that cannot be autolinked yet can be added manually here, for example:
              // add(MyReactNativePackage())
            }

        override fun getJSMainModuleName(): String = "index"

        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
      }

  override val reactHost: ReactHost
    get() = getDefaultReactHost(applicationContext, reactNativeHost)

  override fun onCreate() {
    super.onCreate()
    SoLoader.init(this, OpenSourceMergedSoMapping)
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      // If you opted-in for the New Architecture, we load the native entry point for this app.
      load()
    }
  }
}

AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme"
      android:supportsRtl="true"
      android:usesCleartextTraffic="true">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
    </application>
</manifest>


Environment

Click To Expand

react-native info output:

 OUTPUT GOES HERE
  • Platform that you're experiencing the issue on:
    • iOS
    • Android
    • iOS but have not tested behavior on Android
    • [ ✅] Android but have not tested behavior on iOS
    • Both
  • react-native-firebase version you're using that has this issue:
    • e.g. 5.4.3
  • Firebase module(s) you're using that has the issue:
    • e.g. Instance ID
  • Are you using TypeScript?
    • Y/N & VERSION


@mikehardy mikehardy changed the title [🐛] setBackgroundMessageHandler 仅在应用运行时才有效 [🐛] setBackgroundMessageHandler is only valid when the app is running #8188 Dec 12, 2024
@mikehardy mikehardy changed the title [🐛] setBackgroundMessageHandler is only valid when the app is running #8188 [🐛] setBackgroundMessageHandler is only valid when the app is running Dec 12, 2024
@mikehardy
Copy link
Collaborator

mikehardy commented Dec 12, 2024

Hi there @7chenys 👋

Please understand this is an English-speaking repository. I have used google translate to auto-translate your title and description and included those translations. I can only work with English, apologies.

I have just reproduced recently that this could have a problem if you are using react-native 0.76.0 through 0.76.4 with old architecture / newArchEnabled=false in gradle.properties.

It was fixed and released upstream in react-native 0.76.5 - facebook/react-native#47592

I am 100% sure that react-native-firebase is working with old arch and new arch with headlessJS in react-native 0.76.5 because I made a reproducer that helped troubleshoot the issue both with and without new architecture.

Old arch: https://github.com/mikehardy/old-arch-android-receiver-boot-crash/tree/main

New arch test for FCM setBackgroundMessageHandler is handled now in my demo script:

https://github.com/mikehardy/rnfbdemo/blob/main/make-demo.sh

If you set the bundle names to ones that you can create firebase console project files for and are connected correctly via FCM->APNs with a configured bundle ID in Apple's Developer Console that has the APNs certificates set correctly in the Firebase console, the make-demo.sh now has a button that will send a message back to the app with a delay for FCM setBackgroungMessageHandler testing:

https://github.com/mikehardy/rnfbdemo/blob/1eb9b414a94f6d24c85dedcc1a1407639faec2ea/make-demo.sh#L15-L16

https://github.com/mikehardy/rnfbdemo/blob/main/index.js#L13-L23

https://github.com/mikehardy/rnfbdemo/blob/1eb9b414a94f6d24c85dedcc1a1407639faec2ea/App.tsx#L97-L128

You will need to have this cloud function available in your environment for testing:
https://github.com/invertase/react-native-firebase/blob/main/.github/workflows/scripts/functions/src/sendFCM.ts

I include all that information because I want to be 100% clear that this is something that is very difficult to get correct - both configured correctly in app and server, and to get the actual JSON correct to send it etc.

Because of that I was very careful with my testing though, and I'm certain it works.

You should carefully watch adb logcat while you are testing, but given that I specifically test this case very carefully and have a reproducer app with all its parts linked above I believe this will be a project-specific problem for you, and won't be able to take any action unless you create a reproducer that demonstrates it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants