使用 PhoneGap 和 Firebase 云消息传递 (FCM) 的简单推送通知 Android 应用

Question

FCM 推送通知如何工作？

看看下面的图片，我通过互联网来解释自己，这是不言自明的。 首先，您需要在 Google 服务 (FCM) 中注册您的客户端 android 手机/应用程序，在那里您将获得唯一 ID 作为回报，您将发送自己的主服务器进行保存。 因此，每次您想将某些内容推送到安装了应用程序的 android 设备时，您的 Web 界面都需要它已经拥有的每部手机的手机/应用程序唯一 ID，以便您的服务器将通知推送到 Google 服务 (FCM)使用目标手机/应用程序的唯一 ID，Google（无论如何）会将通知发送到该手机，即使它没有在前面运行您的应用程序，他们也会收到通知。

我的问题/问题？

我尝试使用 Adob​​e PhoneGap Desktop 制作一个具有以下文件/文件夹级别的简单应用程序。

> 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

其他插件尝试：

1. 科尔多瓦插件-fcm
2. 科尔多瓦插件火库
3. 科尔多瓦插件推送通知

不言而喻，我在这里与您分享我的重要文件。

配置文件

<?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="info@exeideas.net" 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>

索引.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>

并通过 Adob​​e PhoneGap 桌面直接在我的 Android 中运行此代码，如下面的屏幕截图所示。 另外，我正在使用<preference name="android-minSdkVersion" value="14" /> android SDK 版本，您可以根据需要进行更改。

做完所有上层的事情后，我使用cordova-plugin-fcm tester发送测试通知但没有收到它，也没有在任何地方看到任何错误。 提到的链接警报Push notification sent successfully! .

因此，任何人都可以弄清楚我在哪里做错了，因为我没有像在index.html页面中那样在 Apps Desktop POPUP 中获取设备 ID？ 在一些博客上，我读到推送通知不能在 Adob​​e PhoneGap 桌面本地主机上工作，所以我必须构建一个最终的 APK 来测试，但我还没有这样做。 此外，如果您认为我在 FCM 设置中犯了任何错误，那么您也可以提及这些步骤，我会再次这样做。

注意：这个站点中有很多问题看起来像这样，但由于 Cordova、Android、FCM 等的更新，它们已经过时了，所以请不要在这里提及任何旧的答案。