How does Push Notification with FCM works?
Take a look at the image below that I got over the internet to explain myself that is self-explanatory. First, you need to register your client android phone/app in the Google Service (FCM) where you will get your unique ID in return that you will send your own main server to save. So every time you want to push something to the android devices where your application is installed, your web interface will need the phone/app unique ID of each phone that it has already so your server will push the notification to the Google Service (FCM) with the unique ID of the targeted phone/app, then Google (no matter how) will send the notification to that phone even if it's not running your apps on the front, they will get the notification.
My Question/Problem?
I tried to make a simple app using Adobe PhoneGap Desktop with the following files/folders level.
> My Project/
> platforms/
> browser/
> platforms.json
> plugins/
> cordova-plugin-fcm/
> cordova-plugin-whitelist/
> browser.json
> fetch.json
> www/
> res/
> icon/
> screen/
> index.html
> config.xml
> google-services.json
Other Plugings Tried:
Without explain in words, here I am sharing my important files with you.
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="net.exeideas.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>EXEIdeas Push Notification</name>
<description>
A Basic Adobe PhoneGap For Push Notification Via PHP And Firebase Cloud Messaging.
</description>
<author email="[email protected]" href="httpd://www.exeideas.net">
PhoneGap Team
</author>
<content src="index.html" />
<preference name="android-minSdkVersion" value="14" />
<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />
<plugin name="cordova-plugin-fcm" source="npm" spec="~2.1.2" />
<platform name="android">
<icon src="www/res/icon/android/fcm_push_icon.png" />
<icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" />
<icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" />
<icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" />
</platform>
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
</widget>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>EXEIdeas Push Notofocation</title>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var push = PushNotification.init({ "android": {"senderID": "my sender id"}});
push.on('registration', function(data) {
console.log(data.registrationId);
});
push.on('notification', function(data) {
console.log(data.title + " Message: " + data.message);
});
push.on('error', function(e) {
console.log(e);
});
}
</script>
</head>
<body>
<h1>EXEIdeas Push Notification Example</h1>
<script type="text/javascript">
FCMPlugin.getToken(function(token) {
//this is the FCM token which can be used
//to send notification to specific device
alert(token);
FCMPlugin.onNotification( onNotificationCallback(data), successCallback(msg), errorCallback(err) )
//Here you define your application behaviour based on the notification data.
FCMPlugin.onNotification(function(data) {
alert(data);
//data.wasTapped == true means in Background : Notification was received on device tray and tapped by the user.
//data.wasTapped == false means in foreground : Notification was received in foreground. Maybe the user needs to be notified.
if (data.wasTapped) {
//Notification was received on device tray and tapped by the user.
alert(JSON.stringify(data));
} else {
//Notification was received in foreground. Maybe the user needs to be notified.
alert(JSON.stringify(data));
}
});
});
//FCMPlugin.onTokenRefresh( onTokenRefreshCallback(token) );
//Note that this callback will be fired every time a new token is generated, including the first time.
FCMPlugin.onTokenRefresh(function(token){
alert( token );
});
</script>
</body>
</html>
And running this code via Adobe PhoneGap Desktop and directly in my Android as shown in the below screenshot. Also, I am using <preference name="android-minSdkVersion" value="14" /> android SDK version that you can change if needed.
After doing all upper things, I am using cordova-plugin-fcm tester to send a test notification but not getting it and not seeing any error anywhere. The mentioned link alert Push notification sent successfully!.
So can anyone figure it out where I am doing a mistake because I am not getting Device ID in Apps Desktop POPUP as writing in the index.html page? On some blogs, I read that Push Notification cant work on Adobe PhoneGap Desktop Localhost so I have to build a final APK to test but I didn't do that yet. Also if you think that I am doing any mistake in FCM settings then you can mention that steps also, I will do that again.
Note: There are a lot of questions in this site that look like this but they are Old due to Updates in Cordova, Android, FCM etc so please do not mention any old answer here.
I have the same issue, firebase notification push no longer works for hybrid mobile app using JavaScript ( ionic, cordova, phonegap, ... )
I advice you to use Android Native app (Java or Kotlin)