将推送通知添加到 Apache Cordova 应用

2019-06-25

概述

在本教程中，将推送通知添加到 Apache Cordova 快速入门项目，以便每次插入记录时都会向设备发送推送通知。

如果不使用下载的快速启动服务器项目，则需要推送通知扩展包。有关详细信息，请参阅使用适用于移动应用的 .NET 后端服务器 SDK。

先决条件

本教程假定你有一个使用 Visual Studio 2015 开发的 Apache Cordova 应用程序。此设备应在 Google Android Emulator、Android 设备、Windows 设备或 iOS 设备上运行。

若要完成本教程，需要：

Visual Studio Community 2015 或更高版本的电脑
Visual Studio Tools for Apache Cordova
活动 Azure 帐户
已完成 Apache Cordova 快速入门项目
（Android）具有已验证电子邮件地址的 Google 帐户
（iOS）Apple 开发者计划会员身份和 iOS 设备（iOS 模拟器不支持推送通知）
（Windows）Microsoft 应用商店开发人员帐户和 Windows 10 设备

配置通知中心

Azure 应用服务的移动应用功能使用 Azure 通知中心发送推送，因此你将为移动应用配置通知中心。

在 Azure 门户中，转到 应用服务，然后选择应用后端。在设置中，选择推送。
若要向应用添加通知中心资源，请选择连接。可以创建中心或连接到现有中心。

现在，已将通知中心连接到移动应用后端项目。稍后，请将此通知中心配置为连接到平台通知系统（PNS），以推送到设备。

观看视频，其中显示了本部分中的步骤。

更新服务器项目

在本部分中，将更新现有移动应用后端项目中的代码，以每次添加新项时发送推送通知。此过程由 Azure 通知中心的模板功能提供支持，该功能支持跨平台推送。各种客户端都使用模板注册推送通知，单个通用推送可以访问所有客户端平台。

选择以下过程之一，该过程应与您的后端项目类型匹配：.NET 后端或 Node.js 后端。

.NET 后端项目

在 Visual Studio 中，右键单击服务器项目。然后选择 管理 NuGet 包。搜索 Microsoft.Azure.NotificationHubs，然后选择安装。此过程安装通知中心库，用于从后端发送通知。

在服务器项目中，打开 控制器>TodoItemController.cs。然后添加以下使用语句：

using System.Collections.Generic;
using Microsoft.Azure.NotificationHubs;
using Microsoft.Azure.Mobile.Server.Config;

在 PostTodoItem 方法中，在调用 insertAsync后添加以下代码：

// Get the settings for the server project.
HttpConfiguration config = this.Configuration;
MobileAppSettingsDictionary settings =
    this.Configuration.GetMobileAppSettingsProvider().GetMobileAppSettings();

// Get the Notification Hubs credentials for the mobile app.
string notificationHubName = settings.NotificationHubName;
string notificationHubConnection = settings
    .Connections[MobileAppSettingsKeys.NotificationHubConnectionString].ConnectionString;

// Create a new Notification Hub client.
NotificationHubClient hub = NotificationHubClient
.CreateClientFromConnectionString(notificationHubConnection, notificationHubName);

// Send the message so that all template registrations that contain "messageParam"
// receive the notifications. This includes APNS, GCM, WNS, and MPNS template registrations.
Dictionary<string,string> templateParams = new Dictionary<string,string>();
templateParams["messageParam"] = item.Text + " was added to the list.";

try
{
    // Send the push notification and log the results.
    var result = await hub.SendTemplateNotificationAsync(templateParams);

    // Write the success result to the logs.
    config.Services.GetTraceWriter().Info(result.State.ToString());
}
catch (System.Exception ex)
{
    // Write the failure result to the logs.
    config.Services.GetTraceWriter()
        .Error(ex.Message, null, "Push.SendAsync Error");
}

此过程发送包含项的模板通知。插入新项时的文本。

重新发布服务器项目。

Node.js 后端项目

搭建你的后端项目。

将 todoitem.js 中的现有代码替换为以下代码：

var azureMobileApps = require('azure-mobile-apps'),
promises = require('azure-mobile-apps/src/utilities/promises'),
logger = require('azure-mobile-apps/src/logger');

var table = azureMobileApps.table();

table.insert(function (context) {
// For more information about the Notification Hubs JavaScript SDK,
// see https://aka.ms/nodejshubs.
logger.info('Running TodoItem.insert');

// Define the template payload.
var payload = '{"messageParam": "' + context.item.text + '" }';  

// Execute the insert. The insert returns the results as a promise.
// Do the push as a post-execute action within the promise flow.
return context.execute()
    .then(function (results) {
        // Only do the push if configured.
        if (context.push) {
            // Send a template notification.
            context.push.send(null, payload, function (error) {
                if (error) {
                    logger.error('Error while sending push notification: ', error);
                } else {
                    logger.info('Push notification sent successfully!');
                }
            });
        }
        // Don't forget to return the results from the context.execute().
        return results;
    })
    .catch(function (error) {
        logger.error('Error while running context.execute: ', error);
    });
});

module.exports = table;

此过程在插入新项时发送包含 item.text 的模板通知。

在本地计算机上编辑该文件时，请重新发布服务器项目。

修改 Cordova 应用

若要确保 Apache Cordova 应用项目已准备好处理推送通知，请安装 Cordova 推送插件以及任何特定于平台的推送服务。

更新项目中的 Cordova 版本。

如果项目使用低于版本 6.1.1 的 Apache Cordova 版本，请更新客户端项目。若要更新项目，请执行以下步骤：

若要打开配置设计器，请右键单击 config.xml。
选择“平台”选项卡。
在 Cordova CLI 文本框中，选择 6.1.1。
若要更新项目，请选择生成，然后选择 生成解决方案。

安装推送插件

Apache Cordova 应用程序不会原生处理设备或网络的各种功能。这些功能由 npm 或 GitHub 上发布的插件提供。 phonegap-plugin-push 插件处理网络推送通知。

可以通过以下方式之一安装推送插件：

在命令提示符中：

运行下面的命令：

cordova plugin add phonegap-plugin-push

在 Visual Studio 中：

在“解决方案资源管理器”中，打开 config.xml 文件。接下来，选择插件>自定义。然后选择 Git 作为安装源。
输入 https://github.com/phonegap/phonegap-plugin-push 作为源。
选择安装源旁边的箭头。
在 SENDER_ID中，如果已有 Google 开发人员控制台项目的数值项目 ID，则可以在此处添加它。否则，请输入占位符值，例如777777。如果面向 Android，则可以稍后在 config.xml 文件中更新此值。

注释

从版本 2.0.0 开始，需要在项目的根文件夹中安装 google-services.json 才能配置发件人 ID。有关详细信息，请参阅安装文档。
选择 并添加。

推送插件现已安装。

安装设备插件

请按照安装推送插件的相同过程进行操作。从核心插件列表中添加设备插件。（若要找到它，请选择插件>Core。）需要此插件才能获取平台名称。

应用程序启动时注册设备

最初，我们包含了一些适用于 Android 的最小代码。稍后，可以修改应用以在 iOS 或 Windows 10 上运行。

在登录过程的回调函数中，添加对 registerForPushNotifications 的调用。或者，可以在 onDeviceReady 方法的底部添加它：

// Log in to the service.
client.login('google')
    .then(function () {
        // Create a table reference.
        todoItemTable = client.getTable('todoitem');

        // Refresh the todoItems.
        refreshDisplay();

        // Wire up the UI Event Handler for the Add Item.
        $('#add-item').submit(addItemHandler);
        $('#refresh').on('click', refreshDisplay);

            // Added to register for push notifications.
        registerForPushNotifications();

    }, handleError);

此示例演示如何在身份验证成功后调用 registerForPushNotifications。可以根据需要尽可能频繁地调用 registerForPushNotifications()。

添加新的 registerForPushNotifications 方法，如下所示：

// Register for push notifications. Requires that phonegap-plugin-push be installed.
var pushRegistration = null;
function registerForPushNotifications() {
    pushRegistration = PushNotification.init({
        android: { senderID: 'Your_Project_ID' },
        ios: { alert: 'true', badge: 'true', sound: 'true' },
        wns: {}
    });

// Handle the registration event.
pushRegistration.on('registration', function (data) {
    // Get the native platform of the device.
    var platform = device.platform;
    // Get the handle returned during registration.
    var handle = data.registrationId;
    // Set the device-specific message template.
    if (platform == 'android' || platform == 'Android') {
        // Register for GCM notifications.
        client.push.register('gcm', handle, {
            mytemplate: { body: { data: { message: "{$(messageParam)}" } } }
        });
    } else if (device.platform === 'iOS') {
        // Register for notifications.
        client.push.register('apns', handle, {
            mytemplate: { body: { aps: { alert: "{$(messageParam)}" } } }
        });
    } else if (device.platform === 'windows') {
        // Register for WNS notifications.
        client.push.register('wns', handle, {
            myTemplate: {
                body: '<toast><visual><binding template="ToastText01"><text id="1">$(messageParam)</text></binding></visual></toast>',
                headers: { 'X-WNS-Type': 'wns/toast' } }
        });
    }
});

pushRegistration.on('notification', function (data, d2) {
    alert('Push Received: ' + data.message);
});

pushRegistration.on('error', handleError);
}

（Android）在前面的代码中，将 Your_Project_ID 替换为来自 Google 开发人员控制台的应用的数字项目 ID。

（可选）在 Android 上配置和运行应用

完成本部分，为 Android 启用推送通知。

启用 Firebase Cloud Messaging

因为您最初是针对 Google Android 平台，所以必须启用 Firebase Cloud Messaging。

登录到 Firebase 控制台。如果还没有 Firebase 项目，创建一个新项目。
创建项目后，选择“向 Android 应用添加 Firebase”。
在“将 Firebase 添加到 Android 应用”页上，执行以下步骤：
1. 对于“Android 程序包名称”，请在应用程序的 build.gradle 文件中复制 applicationId 的值。在此示例中，它是 com.fabrikam.fcmtutorial1app。
2. 选择“注册应用”。
选择“下载 google-services.json”，将该文件保存到项目的 app 文件夹中，然后选择“下一步”。
在 Android Studio 中对你的项目进行以下配置更改。
1. 在项目级 build.gradle 文件 (<project>/build.gradle) 中，向 dependencies 部分中添加以下语句。
```
classpath 'com.google.gms:google-services:4.0.1'
```
2. 在应用级 build.gradle 文件 (<project>/<app-module>/build.gradle) 中，向 dependencies 部分中添加以下语句。
```
implementation 'com.google.firebase:firebase-core:16.0.8'
implementation 'com.google.firebase:firebase-messaging:17.3.4'
```
3. 在应用级 build.gradle 文件的末尾，在 dependencies 部分后面添加以下行。
```
apply plugin: 'com.google.gms.google-services'
```
4. 在工具栏上选择“立即同步”。
选择“下一步”。
选择“跳过此步骤”。
在 Firebase 控制台中，选择与项目相对应的齿轮图标。然后，选择“项目设置”。
如果尚未将 google-services.json 文件下载到你的 Android Studio 项目的 app 文件夹中，则可以在此页面上执行此操作。
切换到顶部的“Cloud Messaging”选项卡。
复制并保存服务器密钥以供将来使用。您可以使用此值来配置集线器。

配置移动应用后端以使用 FCM 发送推送请求

在 Azure 门户中，选择“”浏览所有>应用服务。然后选择移动应用后端。
在设置中，选择推送。然后选择 配置推送通知服务。
前往 谷歌（GCM）。输入从 Firebase 控制台获取的 FCM 旧版服务器密钥，然后选择保存。

服务现已配置为使用 Firebase Cloud Messaging。

为 Android 配置 Cordova 应用

在 Cordova 应用中，打开 config.xml。然后，从 Your_Project_ID将替换为应用的数字项目 ID。

<plugin name="phonegap-plugin-push" version="1.7.1" src="https://github.com/phonegap/phonegap-plugin-push.git">
    <variable name="SENDER_ID" value="Your_Project_ID" />
</plugin>

打开 index.js。然后更新代码以使用数字项目 ID。

pushRegistration = PushNotification.init({
    android: { senderID: 'Your_Project_ID' },
    ios: { alert: 'true', badge: 'true', sound: 'true' },
    wns: {}
});

配置 Android 设备以便进行 USB 调试

在将应用程序部署到 Android 设备之前，需要启用 USB 调试。在 Android 手机上执行以下步骤：

转到“设置”>“关于手机”。然后轻点 版本号，直到启用开发人员模式（大约七次）。
返回设置>开发人员选项，启用 USB 调试。然后使用 USB 电缆将 Android 手机连接到开发电脑。

我们使用运行 Android 6.0（Marshmallow）的 Google Nexus 5X 设备对此进行了测试。但是，这些技术在任何新式 Android 版本中都是常见的。

安装 Google Play Services

推送插件依赖于 Android Google Play Services 进行推送通知。

在 Visual Studio 中，选择工具>Android>Android SDK 管理器。然后展开“Extras”文件夹。选中相应的框，确保已安装以下每个 SDK：
- Android 2.3 或更高版本
- Google 代码库版本 27 或更新版本
- Google Play Services 9.0.2 或更高版本
选择 安装包。然后等待安装完成。

phonegap-plugin-push 安装文档中列出了当前所需的库。

在 Android 上的应用中测试推送通知

现在，可以通过运行应用并在 TodoItem 表中插入项来测试推送通知。只要使用相同的后端，就可以从同一设备或第二台设备进行测试。通过以下方式之一在 Android 平台上测试 Cordova 应用：

物理设备上： 使用 USB 电缆将 Android 设备连接到开发计算机。选择设备，而不是 Google Android Emulator。 Visual Studio 将应用程序部署到设备并运行应用程序。然后，可以在设备上与应用程序进行交互。

屏幕共享应用程序（如 Mobizen）可以帮助你开发 Android 应用程序。 Mobizen 将 Android 屏幕投影到电脑上的 Web 浏览器。
在 Android 模拟器上 在使用模拟器时需要执行其他配置步骤。

请确保部署到已将 Google API 设置为目标的虚拟设备，如 Android 虚拟设备（AVD）管理器所示。

如果要使用更快的 x86 仿真器，安装 HAXM 驱动程序，然后将模拟器配置为使用它。

通过应用>设置>添加帐户，将 Google 帐户添加到 Android 设备。然后遵照提示操作。

像以前一样运行待办事项列表应用，并插入新的待办事项项。这一次，通知区域会显示一个通知图标。可以打开通知抽屉以查看通知的全文。

（可选）在 iOS 上配置和运行

本部分用于在 iOS 设备上运行 Cordova 项目。如果不使用 iOS 设备，可以跳过本部分。

在 Mac 或云服务上安装并运行 iOS 远程生成代理

在使用 Visual Studio 在 iOS 上运行 Cordova 应用之前，请先完成 iOS 安装指南中的步骤，安装并运行远程生成代理。

确保可以生成适用于 iOS 的应用。在 Visual Studio 中生成适用于 iOS 的应用时，需要安装指南中的步骤。如果你没有 Mac，可以使用 MacInCloud 等服务上的远程构建代理来构建 iOS 应用。有关详细信息，请参阅在云中运行 iOS 应用。

注释

需要 Xcode 7 或更高版本才能在 iOS 上使用推送插件。

查找要用作应用 ID 的 ID

在为推送通知注册应用之前，请在 Cordova 应用中打开 config.xml，在小组件元素中找到 id 属性值，然后复制它以供以后使用。在以下 XML 中，ID 是 io.cordova.myapp7777777。

<widget defaultlocale="en-US" id="io.cordova.myapp7777777"
    version="1.0.0" windows-packageVersion="1.1.0.0" xmlns="https://www.w3.org/ns/widgets"
    xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="https://schemas.microsoft.com/appx/2014/htmlapps">

稍后，在 Apple 开发人员门户中创建应用 ID 时使用此标识符。如果在开发人员门户中创建其他应用 ID，则必须在本教程后面执行几个额外的步骤。小组件元素中的 ID 必须与开发人员门户上的应用 ID 匹配。

在 Apple 开发人员门户中注册应用以推送通知

为您的应用注册一个应用 ID。创建显式应用 ID（而不是通配符应用 ID），对于 捆绑 ID，请使用 Xcode 快速入门项目中的确切捆绑 ID。选择 推送通知 选项也至关重要。
接下来，为了准备配置推送通知，请创建“开发”或“分发”SSL证书。

观看显示类似步骤的视频

配置 Azure 以发送推送通知

在 Mac 上，启动 密钥链访问。在左侧导航栏的类别下，打开“我的证书”。找到在上一部分下载的 SSL 证书，然后披露其内容。仅选择证书（不选择私钥）。然后进行导出。
在 Azure 门户中，选择“”浏览所有>应用服务。然后选择移动应用后端。
在设置中，选择 应用服务推送。然后选择通知中心名称。
转到 Apple Push Notification Services>上传证书。上传 .p12 文件，选择正确的模式（具体取决于先前的客户端 SSL 证书是生产证书还是沙盒证书）。保存任何更改。

服务现已配置为在 iOS 上使用推送通知。

验证应用 ID 是否与 Cordova 应用匹配

如果在 Apple 开发人员帐户中创建的应用 ID 已与 config.xml 文件中小组件元素的 ID 匹配，则可以跳过此步骤。但是，如果 ID 不匹配，请执行以下步骤：

从项目中删除平台文件夹。
从项目中删除插件文件夹。
从项目中删除node_modules文件夹。
更新 config.xml 文件中小组件元素的 ID 属性，以使用在 Apple 开发人员帐户中创建的应用 ID。
重新生成项目。

在 iOS 应用中测试推送通知

在 Visual Studio 中，确保选择 iOS 作为部署目标。然后选择设备，在连接的 iOS 设备上运行推送通知。

可以使用 iTunes 在连接到电脑的 iOS 设备上运行推送通知。 iOS 模拟器不支持推送通知。
在 Visual Studio 中选择“运行”按钮或 F5，以生成项目并在 iOS 设备中启动应用。然后选择 “确定” 接受推送通知。

注释

应用在首次运行时请求确认推送通知。
在应用中，输入任务，然后选择加号 (+) 图标。
验证是否已收到通知。然后选择确定来关闭通知。

（可选）在 Windows 上配置和运行

本部分介绍如何在 Windows 10 设备上运行 Apache Cordova 应用项目（Windows 10 支持 PhoneGap 推送插件）。如果不使用 Windows 设备，可以跳过本部分。

使用 WNS 注册 Windows 应用以推送通知

若要在 Visual Studio 中使用应用商店选项，请从解决方案平台列表中选择 Windows 目标，例如 Windows-x64 或 Windows-x86。（避免用于推送通知的 Windows-AnyCPU。）

在 Visual Studio 解决方案资源管理器中，右键单击 Windows 应用商店应用项目。然后选择 应用商店>将应用与应用商店关联。
在向导中，选择“下一步”。然后使用Microsoft帐户登录。在 保留新应用名称中，键入应用的名称，然后选择保留。
成功创建应用注册后，选择新的应用名称。选择 下一步，然后选择关联。此过程将所需的 Windows 应用商店注册信息添加到应用程序清单。
使用以前为 Windows 应用商店应用创建的相同注册，对 Windows Phone 应用商店应用项目重复步骤 1 和步骤 3。
转到 Windows 开发者中心，然后使用 Microsoft 帐户登录。在 “我的应用”中，选择新的应用注册。然后展开服务>推送通知。
在 推送通知 页上，在 Windows 推送通知服务（WNS）和Microsoft Azure 移动应用下，选择 Live Services 站点。记下 包 SID 的值，以及在 应用程序机密中当前的值。

开发人员中心应用设置

重要

应用程序机密和程序包 SID 是重要的安全凭据。不要与任何人共享这些值，也不会与应用分发这些值。