Google Firebase Notification

Integrate Google Firebase Notification for effective push notifications. Enhance user engagement and keep your audience informed with timely updates. View documentation for easy setup and integration.

Step-by-Step Integration of Google Firebase Notification

1. Add Google Firebase Notification

Click on "Add" button to add Google Firebase Notification. Once you add, it will appear in Add-ons menu.

2. Configure Settings

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

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

Save your configuration. And, Rebuild your app to apply the changes. This process may take a few minutes.

Firebase Integration within 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.