推送通知

17 Mar 2025 | 4 分钟阅读

在本节中，我们将学习推送通知。这些通知是指我们在运行应用程序时或只是浏览操作系统时在设备上收到的通知。它是我们应用程序使用的第一个，通常也是最重要的通信渠道之一。推送通知主要由应用程序用于交易和重新互动。推送信息技术正迅速从一个简单的消息传递系统发展成为一个丰富和交互的媒介。

对于推送通知，我们将首先设置命令行界面，在这里我们可以通过计算机的命令行与我们的设备进行交互。之后，我们将通过命令行连接设备并发送基本信息。推送通知允许我们将PhoneGap应用程序与操作系统集成。

设置 CLI

如果我们没有安装 CLI 或 PhoneGap 命令行界面，我们需要按以下方式安装它

1) 安装 nodejs

为了设置 CLI，我们首先需要安装 node.js。它是不相关的，但它基本上是 JavaScript 的一个版本，可以在我们的桌面上运行。我们将转到 https://node.org.cn/en/ 链接以下载 nodejs。

2) 安装 PhoneGap 命令行应用程序

安装 nodejs 之后，我们将安装 PhoneGap 命令行应用程序。现在，我们将使用我们的命令行并运行以下命令来安装 PhoneGap 命令行应用程序

我们将简单地运行命令 phonegap 来检查 PhoneGap 命令行应用程序是否已安装在我们的系统中。

3) 创建一个 PhoneGap 项目

现在，使用命令行，我们将创建一个 PhoneGap 项目。我们将使用 phonegap create 命令，如下所示

此命令将在提供的路径上创建 PhoneGap 项目。

现在，我们将使用以下命令为其指定名称和 ID

��phonegap create --name command-line example --id com.javatpoint.commandline_example

4) 连接到设备

安装 PhoneGap CLI 后，我们将它与实际应用程序连接起来。我们将使用命令行进入我们的应用程序，此时，我们必须确保我们的 PhoneGap 桌面应用程序没有运行，因为它一次只能在一个服务器上运行，而 PhoneGap 桌面应用程序有自己的服务器。所以我们将首先运行 dir 命令以确保我们是否在应用程序中，之后，我们将调用 PhoneGap 服务器。

现在，我们将使用以下命令来调用 PhoneGap 服务器

现在，我们将启动我们的 PhoneGap Developer App 或转到浏览器以在 192.168.43.63:3000 服务器上运行它。

5) 发送通知

我们使用以下命令创建了一个名为 Push Example 的新 PhoneGap 项目，其中包含推送通知模板

我们将在服务器上运行它，这次它也会给我们设备 ID。

现在，我们将向此应用程序发送推送通知。我们将打开一个新的命令提示符，并使用 cd www 命令转到我们的 Push 项目的 www 文件夹。此命令会将目录从 Push 更改为 www。

现在，我们将使用 phonegap push -deviceID "你的设备 ID" 推送通知，并在以下方式中添加 gcm 服务和有效负载

phonegap push --deviceID dEIbfPByp-A:APA91bH1XjOwUqRAh2bp-8aXml2YW9GnYVit77xSfzkhBEKPIGawAQ4HDMidN1qADufJgXafQWOPxrkYXKvFsgw0c82orAqhqdCjJQkxoXggGM21NvbmswewxeHB9XYNPFH4sQ5qfYB0 -service gcm --payload "{ \"data\": { \"title\": \"JavaTpoint\", \"message\": \"PhoneGap Push Notification\"} }"

当我们运行此完整命令时，我们将收到如下所示的推送通知

Index.js

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        console.log('Received Device Ready Event');
        console.log('calling setup push');
        app.setupPush();
    },
    setupPush: function() {
        console.log('calling push init');
        var push = PushNotification.init({
            "android": {
                "senderID": "XXXXXXXX"
            },
            "browser": {},
            "ios": {
                "sound": true,
                "vibration": true,
                "badge": true
            },
            "windows": {}
        });
        console.log('after init');

        push.on('registration', function(data) {
            console.log('registration event: ' + data.registrationId);

            var oldRegId = localStorage.getItem('registrationId');
            if (oldRegId !== data.registrationId) {
                // Save new registration ID
                localStorage.setItem('registrationId', data.registrationId);
                // Post registrationId to your app server as the value has changed
            }

            var parentElement = document.getElementById('registration');
            var listeningElement = parentElement.querySelector('.waiting');
            var receivedElement = parentElement.querySelector('.received');

            listeningElement.setAttribute('style', 'display:none;');
            receivedElement.setAttribute('style', 'display:block;');
        });

        push.on('error', function(e) {
            console.log("push error = " + e.message);
        });

        push.on('notification', function(data) {
            console.log('notification event');
            navigator.notification.alert(
                data.message,         // message
                null,                 // callback
                data.title,           // title
                'Ok'                  // buttonName
            );
       });
    }
};

输出