Notes on Firebase Cloud Messaging
Last updated on 12 Dec. 2024
Firebase Cloud Messaging: https://firebase.google.com/products/cloud-messaging "Firebase Cloud Messaging (FCM) provides a reliable and battery-efficient connection between your server and devices that allows you to deliver and receive messages and notifications on iOS, Android, and the web at no cost."
Introducing Firebase Cloud Messaging, https://www.youtube.com/watch?v=sioEY4tWmLI , around a min.
I was quite surprised to see on Firebase website that it indeed is free to use and does not mention limits for free use. This quora discussion is relevant to this: Why is Firebase Cloud Message free of charge? Does Google use/sell end users data for advetisement like OneSignal?, [FCM is Firebase Cloud Messaging] https://www.quora.com/Why-is-Firebase-Cloud-Message-free-of-charge-Does-Google-use-sell-end-users-data-for-advetisement-like-OneSignal ...
I was wondering if Google has a plan to start charging for FCM in future. But the above quora discussion seems to have no mention of that.
Had a quick look at its wiki page: https://en.wikipedia.org/wiki/Firebase_Cloud_Messaging . In my quick browse, I did not find any mention of Google planning to make it paid service in future.
Web app docs page: https://firebase.google.com/docs/cloud-messaging/js/client
GitHub repo: Firebase Cloud Messaging Quickstart, https://github.com/firebase/quickstart-js/tree/master/messaging
FCM seems to use PUSH API, https://www.w3.org/TR/push-api/
-------
Push Notifications to Your Web Application in Browser Using Google Firebase (Cloud Messaging), https://www.youtube.com/watch?v=w9_Q8bdjJng , around 9 mins., Jul. 2022
[Update: Later trial worked. I think earlier trial got into problems due to poor network connectivity resulting in npm install errors which I thought would go away on retries. Looks like retries on partially installed npm packages does not work. ... I did not test the program as it would need API key setup which I don't want to spend time on now, as my alternative project, mentioned below, worked.] Program tripped up on npm. Could not figure out soln.
Later I created an alternative project which used some of the code of above project, and was able to get it working but I initially thought the app was not working. With the default settings on my PC, the notifications were going to the Action Center. ... Addl. notes are given below about Windows Settings changes to be made to see notifications come up briefly (toast?) on bottom right of monitor. Another issue was that the above project does not handle background notifications. So I modified the project to handle that and got to a stage where both foreground and background notifications were getting handled.
Modified project source code: https://github.com/ravisiyer/fcmtest1
-------
Firebase project I created: TestFB
Firebase Cloud Messaging in React: A Comprehensive Guide, https://medium.com/simform-engineering/firebase-cloud-messaging-in-react-a-comprehensive-guide-b5e325452f97 , Dec 2023
Source code: https://github.com/vanshitaa-shah/FCM-demo
Was able to clone the repo, make .env changes and then run the app successfully.
How to Change vite application port, https://stackoverflow.com/questions/71763113/how-to-change-vite-application-port :
"scripts": {
"dev": "vite --port 3006",
"build": "vite build",
"preview": "vite preview"
}
Prevent the toast from closing by default
<ToastContainer autoClose={false} />
----
===============
Push notifications with React and Firebase, https://blog.logrocket.com/push-notifications-react-firebase/ , Mar 2022
Using HTTPS in Development, https://create-react-app.dev/docs/using-https-in-development/
using Firebase service worker with self signed certificate in server, https://stackoverflow.com/questions/42731124/using-firebase-service-worker-with-self-signed-certificate-in-server
Testing Service Workers locally with self signed certificates, https://deanhume.com/testing-service-workers-locally-with-self-signed-certificates/
C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=https://localhost:1123
----
============
-----------
Desktop Notifications Not Popping Up, https://support.google.com/chrome/thread/261148002/desktop-notifications-not-popping-up?hl=en :
"If you use Windows 10, you'll see notifications outside of your internet browser. Turn on your Chrome notifications in the Windows Action Center."
===================
-----------------
Windows 10 on my PC
By default, notifications go to Windows Action Center
To make it show briefly (toast?) at bottom right of screen, I did the following: from (Settings) Notifications and Actions, clicked on Focus Assist Settings. In Focus Assist (I had Priority Only selected), chose 'Customize your priority list'. In Priority List, added Google Chrome to Apps.
After the above steps, the next notification showed up as a brief toast? on bottom right of screen. The notification also got added to Action Center.
-----
=================
Observed that sometimes one single notification sent from Firebase console gets received twice by app on PC.
[Windows] How do i move the location of the Notifications?, https://answers.microsoft.com/en-us/windows/forum/all/how-do-i-move-the-location-of-the-notifications/11728fca-46e8-4669-af67-07f09bcacca5
[Move Taskbar!]
------
How to Send push notification in Mobile Using NodeJS with Firebase Service ?, https://dev.to/raynecoder/how-to-send-push-notification-in-mobile-using-nodejs-with-firebase-service--52o5 , July 2024.
Build app server send requests, https://firebase.google.com/docs/cloud-messaging/send-message
Push Notification using firebase and node-js., https://medium.com/@Bisal.r/push-notification-using-firebase-and-node-js-7508f61fa25c
Sending Notifications to Mobile Devices with Firebase Cloud Messaging (FCM) in Node.js, https://medium.com/@ravisharma23523/sending-notifications-to-mobile-devices-with-firebase-cloud-messaging-fcm-in-node-js-8fe3faead58b
Sending Firebase Cloud Messaging (FCM) Notifications in Node.js with Firebase Admin, https://rishabhsharma.bio/sending-firebase-cloud-messaging-fcm-notifications-in-node-js-with-firebase-admin-6267e8de30f5
Firebase Cloud Messaging with ASP.NET Core, https://cedricgabrang.medium.com/firebase-cloud-messaging-with-asp-net-core-df666291c427
Above app solution needs .NET MAUI and some other Visual Studio component to be installed. 3 GB download and 17 GB space on disk.
.NET Multi-platform App UI (.NET MAUI) is a cross-platform framework for creating native mobile and desktop apps with C# and XAML.
Using .NET MAUI, you can develop apps that can run on Android, iOS, macOS, and Windows from a single shared code-base.
----
Perhaps the backend may not need MAUI. Let me check that out. ... In a copy of the solution, deleted the front-end part. Then built the solution which succeeded. Could also run the program which opened a Swagger UI window. Trying out the POST /Message then gave some Google Apis auth error but that's to be expected as I have not set up required key info (json file having private_key and other stuff). I will do that now.
...
I had to follow instructions of the associated above article about generating private key from Firebase console (for Firebase Admin SDK), copying the generated JSON file into the project and using its filename in project code instead of what the repo code had. I think those are the only changes I made to the project.
On running the program and testing it through Swagger, it worked! I could send a notification from above .NET backend (through FCM) to ReactJS front-end app I had done earlier (from a tutorial) which consumes the notification. The notification appeared on Windows desktop. I had to specify the device token (FCM Registration token) received by front-end app. from FCM, IIRC, which the app. prints out in console as a parameter to the backend POST API call (through Swagger).
==============
Comments
Post a Comment