Google Firebase Notification Integration

Enhance your app's functionality by integrating Google Firebase Notifications. Follow these detailed steps to add and configure Firebase Notifications in your app

Step-by-Step Guide:

Add Google Firebase Notification:

• Navigate to Add-ons: Open the app builder and go to the Add-ons section.

• Add to Cart: Find the Google Firebase Notification add-on and add it to your cart.

Configure Settings:

• Access Settings: After adding the add-on, you will see the settings option in the Plugins Integration section.

• Upload Configuration File: Click on Settings and upload your google-service.json file.

• Save Changes: Save your configuration.

Rebuild App:

• Rebuild: Rebuild your app to apply the changes. This process may take a few minutes.

Integrate Firebase with Your Website:

To use Firebase Cloud Messaging (FCM) in your web application, you'll need to import the necessary JavaScript file. Here are the steps to retrieve the FCM token, subscribe to a topic, and unsubscribe from a topic:

Retrieve FCM Token:

• Plain JavaScript:

  const { Messaging: FirebaseMessaging } = window.WTN.Firebase
   
  FirebaseMessaging.getFCMToken({
      callback: function(data) {
          // data.token contains the FCM token
          // store it in your backend to send notifications
      }
  })

• ES6+:

  import { getFCMToken } from "webtonative/Firebase/Messaging"
   
  getFCMToken({
      callback: function(data) {
          // data.token contains the FCM token
          // store it in your backend to send notifications
      }
  })

Subscribe to a Topic:

• Plain JavaScript:

  const { Messaging: FirebaseMessaging } = window.WTN.Firebase
   
  FirebaseMessaging.subscribe({
      toTopic: "Your Topic Name"
  })

• ES6+:

  import { subscribe } from "webtonative/Firebase/Messaging"
   
  subscribe({
      toTopic: "Your Topic Name"
  })

Unsubscribe from a Topic:

• Plain JavaScript:

  const { Messaging: FirebaseMessaging } = window.WTN.Firebase
   
  FirebaseMessaging.unsubscribe({
      fromTopic: "Your Topic Name"
  })

• ES6+:

  import { unsubscribe } from "webtonative/Firebase/Messaging"
   
  unsubscribe({
      fromTopic: "Your Topic Name"
  })

Handling Notification Clicks:

To specify the URL that will be accessed upon clicking the notification, pass the corresponding URL through the deepLink key in your notification payload.

Example Payload for Notification with Deep Link

{
    "to": "your-device-token",
    "notification": {
        "title": "Notification Title",
        "body": "Notification Body",
        "click_action": "FLUTTER_NOTIFICATION_CLICK",
        "deepLink": "https://yourwebsite.com/target-page"
    },
    "data": {
        "key1": "value1",
        "key2": "value2"
    }
}

Important Notes:

• Ensure Correct File Upload: The google-service.json file must be correctly uploaded to ensure Firebase integration works seamlessly.
• Rebuild the App: Always rebuild your app after making configuration changes to ensure they take effect.
• URL Deep Linking: Using the deepLink key in your notification payload ensures that users are directed to specific pages within your app, enhancing user experience and engagement.