Expanding Firebase notifications across different platforms: Web app to Mobile app

I have successfully implemented notifications on my website using Firebase, and now I have an Android app developed by someone else. This app essentially functions as a container for the website via webView, along with additional tools like a QR reader.

Since I am not familiar with app development and mainly focus on web development, the developer informed me that he has done his part by integrating the necessary components (possibly through phonegap) within the app. However, he mentioned that I need to add some code to the website in order for the notifications to work within the app as well. Does this process make sense to anyone? I always thought that Firebase's functionality was platform-wide.

Below is some configuration information from the Firebase Console for the web:

// Initialize Firebase
  var config = {
    apiKey: "AIzaSyBXXXXXXXXXXXXXXXXXXXXXXXXXXXX,
    authDomain: "doi-18XXXXXX.firebaseapp.com",
    databaseURL: "https://doi-18XXXXXX.firebaseio.com",
    projectId: "doi-18XXXXXX",
    storageBucket: "doi-18XXXXXX.appspot.com",
    messagingSenderId: "36XXXXXXX"
  };
  firebase.initializeApp(config);

Additionally, here is the google-services.json file that was provided to the app developer (not related to the website)

{
  "project_info": {
    "project_number": "36XXXXXX",
    "firebase_url": "https://doi-18XXXXXX.firebaseio.com",
    "project_id": "doi-18XXXXXX",
    "storage_bucket": "doi-18XXXXXX.appspot.com"
  },
  // Additional configurations...
}

Furthermore, the following snippet shows the server-side code written in VBScript that currently sends notifications only to web destinations:

// Server-side code example
// ... 

Given these details, I am confused about whether any further changes are required on my end. Any insights would be greatly appreciated. Thank you!

Answer №1

To resolve your scenario, there are three essential components:

  1. Server-side code for sending notifications to FCM.
  2. FCM Project setup with all necessary apps created, including IOS app if required.
  3. App-side device registration process with FCM.

The workflow is straightforward - you can send notifications either to a TOPIC or a specific device using TOKEN.

When using the TOPIC solution, you do not need to handle individual device TOKENS. If a device is registered to a particular TOPIC on FCM, it will automatically receive any notifications sent to that TOPIC.

Alternatively, you can send multiple POST requests to FCM for different DEVICE TOKENS. This approach requires storing DEVICE tokens at your server-end and ideally triggering a server API call when a device registers on FCM in the app code.

For further guidance and explanation, refer to the official FCM documentation link provided here: https://firebase.google.com/docs/cloud-messaging/send-message

If you need to modify your existing POST request to send notifications to multiple devices, specific topics, or lists of tokens, follow the code snippet below:

posturl="https://fcm.googleapis.com/fcm/send"

body= "{ ""notification"": {"
body=body & """title"": """ & replace(messageTitle, """", "\""") & ""","
body=body & """body"": """ & replace(messageContent, """", "\""") & ""","
body=body & """icon"": ""/images/favicons/apple-touch-icon-60x60.png"","
body=body & """click_action"": """ & link & ""","
body=body & "},"
body=body & """to"" : """ & token & """}"

Below is an example of groovy code used in a project to construct the message body for a POST request to be sent to FCM :

private JsonObject buildNotificationMessage(NotificationCO notificationCO) {
        JsonObject messageJson = new JsonObject()
        JsonObject notificationJson = new JsonObject()
        notificationJson.addProperty("title", notificationCO.title)
        notificationJson.addProperty("body", notificationCO.body ?: '')
        messageJson.add("notification", notificationJson)

        if (notificationCO.token) {
            messageJson.addProperty("token", notificationCO.token)
        } else {
            messageJson.addProperty("topic", notificationCO.topic.toString())
        }

        if (notificationCO.data) {
            JsonObject dataJson = new JsonParser().parse(notificationCO.data)
            messageJson.add("data", dataJson)
        }

        JsonObject rootJson = new JsonObject()
        rootJson.add(firebaseCredentialsProviderService.messageKey, messageJson)
        return rootJson
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason for the initial display of an empty option when using AngularJS to select an

Every time I refresh the page, the initial option is blank. How can I set Any Make as the default selection? Below is the code snippet from my view: <select class="form-control" id="make" name="make" ng-init="Any Make" ng-model="makeSelected" ng-chan ...

Converting strings into lists using MongoDB

Our MongoDB database currently stores order information with the "item_list" field as a string like "item_list" : "[{\"item_id\":14243,\"price\":7500,\"quantity\":1},{\"item_id\":1424,\"price\":2500,&bsol ...

Combine arrays and group them together to calculate the total count of each unique value in the merged array

I have a dataset similar to the following: { "_id" : ObjectId("5a4c6fb6993a721b3479a27e"), "score" : 8.3, "page" : "@message", "lastmodified" : ISODate("2018-01-03T06:49:19.232Z"), "createdate" : ISODate("2018-0 ...

Rearrange the <div> elements by dragging and dropping them after they have been appended

I have a pair of buttons available: <a href="#" class="add">+ Add 1</a> <a href="#" class="add2">+ Add 2</a> Upon clicking these buttons, I am able to generate multiple divs as needed. This functionality has been achieved using th ...

Learn the process of appending an item to a list using Vue.js

Recently starting with vue.js and facing an issue: data: { ws: null, newMsg: '', username: null, usersList: '' }, created: function() { var self = this; this.ws = new We ...

ExpressJS and cookies - Struggling to initialize a cookie with express-cookie

I recently followed a tutorial on YouTube (https://youtu.be/hNinO6-bDVM?t=2m33s) that demonstrated how to display a cookie in the developer tools Application tab by adding the following code snippet to the app.js file: var session = require('express- ...

Error in Stripe.js: Unable to access the property 'stripeToken' because it is undefined

I'm currently in the process of integrating stripe.js into a web application that I'm developing. However, I encountered the following error: Cannot read property 'stripeToken' of undefined Although the client-side is setting the hidd ...

How can you determine if multiple checkboxes have been checked with "if" statements following a button click?

I am looking to display a message after clicking a button if one or more checkboxes are checked. I would prefer using Jquery for this functionality. Any help on achieving this would be highly appreciated. $(function() { $(".btn").click(function() { ...

"First Screen Scrolling initiates the functionality of the Bottom Sticky Menu

I previously had a sticky navbar positioned at the bottom of the page. It was functioning without any issues, but now I want the sticky navbar to only appear at the bottom of the page when the user scrolls down. .mobile-fixed-res { posit ...

Is there a way to isolate nested forEach loops from each other?

Lately, I've been working hard to streamline my code and eliminate nested for-loops / forEach methods in order to optimize the process. However, I've hit a roadblock with a specific task. I have an array of objects that includes another array of ...

Best methods for deleting an element's attribute or style attribute

Imagine this snippet of CSS code: .notif-icon { display: inline-block; } In my HTML, I have the following element which starts off hidden by overriding the display property of the notif-icon class: <span id="error" class="notif-icon& ...

What are some superior methods for determining the validity of a control in JavaScript?

Is there a way to determine the validity of a control in JavaScript within Asp.Net using a client-side API? Specifically, I am looking for a function that can check if a control is valid based on attached validators. For example, if a textbox has 2 validat ...

How to style the 'FILE' input type in HTML

What is the best way to style a file upload button with an image to ensure it looks neat and tidy across all browsers without any overlapping text from the default control? Appreciate your help! ...

Tips for adding your artistic touch to photos

I'm currently facing a challenge in creating a chart that overlaps an image. The bars and text on the chart are displaying perfectly when I remove the background image. However, I'm struggling to get the bars and text to appear on top of the imag ...

Unable to sort nested JSON data in ngTable

I have successfully built an angularjs application using ngTable, however, I am facing an issue with sorting. The JSON structure is nested but the values are appearing correctly in the table. If anyone has a solution to this problem, please let me know. ...

How come my script that is dependent on the viewport does not apply classes?

I created a code to add a class to a div, but it's not working as expected. I need help troubleshooting this issue. The code works fine on codePen, but not on my WordPress website. How can I make sure the browser executes this code properly? Link to ...

Issue with calling jqPlot function in jQuery causing malfunction

I am perplexed as to why the initial code functions correctly while the second code does not. <a data-role="button" href="#page2" type="button" onClick="drawChart([[["Test1",6],["Test2",5],["Test3",2]]])"> <img src="icons/page2.png" inline style ...

Unable to decrease the width of a div element in Vuetify and Nuxt

As I work on creating a dynamic form with fields that need to occupy only 50% of the size of a regular field, I encounter different components based on data provided by Vuex. The use of v-for in Vue.js helps me loop through form objects and render the app ...

Issue with Angular variable not updating in the view, despite being successfully updated in the logs

This has been one of the most frustrating issues I've ever encountered. Snippet from my html file: <!--test_management.html--> <div ng-controller="TestCtrl as tcl"> <ul class="nav nav-tabs"> <li class="active"> ...

Guide to setting up Mongodb with mongoose in the latest Next.js 13.3 update

I'm having trouble connecting MongoDB with Mongoose in Next.js 13.3 Version. I keep getting errors when trying to import the connectDb file or UserSchema file in api/getProducts/route.js file. Can someone please help me with step-by-step instructions ...