共用方式為

將推播通知新增至 Apache Cordova 應用程式

概觀

在本教學課程中，您會將推播通知新增至 Apache Cordova 快速入門 專案，以便在每次插入記錄時將推播通知傳送至裝置。

如果您未使用下載的快速入門伺服器專案，則需要推播通知擴充功能套件。 如需詳細資訊，請參閱 使用適用於Mobile Apps 的 .NET 後端伺服器 SDK。

先決條件

本教學課程假設您有使用 Visual Studio 2015 開發的 Apache Cordova 應用程式。 此裝置應在Google Android 模擬器、Android裝置、Windows 裝置或iOS裝置上執行。

若要完成本教學課程，您需要：

設定通知中樞

Azure App Service 的 Mobile Apps 功能會使用 Azure 通知中樞 來傳送推播，因此您將設定行動應用程式的通知中樞。

  1. 在 azure 入口網站的 中，移至 App Services，然後選取您的應用程式後端。 在 [設定]中，選取 [推送]。

  2. 若要將通知中樞資源新增至應用程式，請選取 [Connect]。 您可以建立集線器或連接到現有的集線器。

    設定一個中樞

現在您已將通知中樞連線到Mobile Apps 後端專案。 稍後您會將此通知中樞設定為連線到平臺通知系統 （PNS） 以推送至裝置。

觀看影片，其中顯示本節中的步驟。

更新伺服器專案

在本節中，您會更新現有Mobile Apps 後端專案中的程式代碼，以在每次新增專案時傳送推播通知。 此過程得益於 Azure 通知中樞的 範本 功能，可啟用跨平臺推送。 各種客戶端會使用範本註冊推播通知，而單一通用推播可以到達所有客戶端平臺。

選擇下列符合您後端項目類型的程序——.NET 後端 或 Node.js 後端。

.NET 後端專案

  1. 在 Visual Studio 中，以滑鼠右鍵按兩下伺服器專案。 然後選取 [管理 NuGet 套件]。 搜尋 Microsoft.Azure.NotificationHubs，然後選取 安裝。 此程式會安裝通知中樞連結庫，以便從後端傳送通知。

  2. 在伺服器專案中，開啟 Controllers>TodoItemController.cs。 然後新增下列 using 語句：

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

  3. 在 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");
}

    此過程會在插入新項目時傳送一個包含項目文字的範本通知。

  4. 重新發佈伺服器專案。

Node.js 後端專案

  1. 設定後端專案。

  2. 以下列程式代碼取代 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的範本通知。

  3. 當您在本機計算機上編輯檔案時，請重新發佈伺服器專案。

修改 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 中：

  1. 在方案總管中開啟 config.xml 檔案。 接下來，選取 [ 外掛程式>自定義]。 然後選取 [Git ] 作為安裝來源。

  2. 輸入 https://github.com/phonegap/phonegap-plugin-push 作為來源。

    在方案總管中開啟 config.xml 檔案

  3. 選取安裝來源旁的箭號。

  4. 在 SENDER_ID中，如果您已經有 Google Developer Console 項目的數值項目識別碼，您可以在這裡新增它。 否則，請輸入一個預設值，例如777777。 如果您的目標是 Android，您可以在稍後的 config.xml 檔案中更新此值。

    備註

    從 2.0.0 版開始，google-services.json 必須安裝在專案的根資料夾中，才能設定寄件者標識碼。 如需詳細資訊，請參閱 安裝檔。

  5. 選取 ，然後新增。

現在已安裝推送外掛程式。

安裝裝置外掛程式

遵循您用來安裝推送外掛程式的相同程式。 從核心外掛程式清單中新增裝置外掛程式。 （若要尋找它，請選取 [外掛程式]>Core.）您需要此外掛程式才能取得平台名稱。

應用程式啟動時註冊您的裝置

一開始，我們會包含Android的一些最低程序代碼。 稍後您可以修改應用程式以在 iOS 或 Windows 10 上執行。

  1. 在登入程序的回呼函式中新增對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()。

  2. 新增 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);
}

  3. （Android）在上述程式代碼中，將 Your_Project_ID 替換為 Google Developer Console 中應用程式的數字專案 ID。

（選擇性）在Android上設定和執行應用程式

完成本節以啟用 Android 的推播通知。

啟用 Firebase 雲端通訊

由於您一開始的目標是Google Android平臺，因此您必須啟用Firebase雲端通訊。

  1. 登入 Firebase 主控台。 建立新的 Firebase 專案 (如果您還沒有 Firebase 專案的話)。

  2. 建立專案之後，請選取 [將 Firebase 新增至 Android 應用程式]。

    將 Firebase 新增至 Android 應用程式

  3. 在 [將 Firebase 新增至 Android 應用程式] 頁面上，採取下列步驟：

    1. 對於 [Android 套件名稱]，複製應用程式 build.gradle 檔案的 applicationId 值。 在此範例中為 com.fabrikam.fcmtutorial1app。

      指定套件名稱

    2. 選取 註冊應用程式。

  4. 選取 [下載 google-services.json]，將檔案儲存到專案的應用程式資料夾，然後選取 [下一步]。

    下載 google-services.json

  5. 在 Android Studio 中對於專案進行下列設定變更。

    1. 在專案層級 build.gradle 檔案 (<project>/build.gradle) 中，將下列陳述式新增至 [相依性] 區段。

      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 檔案的結尾，於相依性區段之後。

      apply plugin: 'com.google.gms.google-services'

    4. 在工具列上選取 [立即同步]。

      build.gradle 組態變更

  6. 選取 下一步。

  7. 選取 [略過此步驟]。

    略過最後一個步驟

  8. 在 Firebase 主控台中，選取您專案的齒輪圖示。 然後選取 [專案設定]。

    選取專案設定

  9. 如果您尚未將 google-services.json 檔案下載到 Android Studio 專案的 app 資料夾，可以在此頁面下載。

  10. 切換到頂端的 [雲端通訊] 索引標籤。

  11. 複製並儲存伺服器金鑰以供稍後使用。 您可以使用此值來設定您的中樞。

設定手機應用程式後端以使用 FCM 發送推送通知请求

  1. 在 Azure 入口網站的 中，選取 瀏覽所有>App Services。 然後選取您的行動應用程式的後端。
  2. 在 [設定]中，選取 [推送]。 然後選取 [設定推播通知服務。
  3. 移至 Google （GCM）。 輸入您從 Firebase 控制台取得的 FCM 舊版伺服器金鑰，然後選取 [儲存]。

您的服務現在已設定為使用 Firebase 雲端通訊。

設定 Android 版 Cordova 應用程式

在您的 Cordova 應用程式中，開啟 config.xml。 然後，將 Your_Project_ID 取代為 Google Developer Console 中您應用程式的數字專案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。 然後更新程式代碼以使用您的數值項目標識碼。

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

設定 Android 裝置以進行 USB 偵錯

您必須先啟用 USB 偵錯，才能將應用程式部署至 Android 裝置。 在 Android 手機上執行下列步驟：

  1. 移至 \[關於電話\] 的 \[設定>\]。 然後點選 [組建編號 ]，直到啟用開發人員模式為止（大約七次）。
  2. 回到 [設定>開發人員選項]，啟用 USB偵錯。 然後使用 USB 纜線將 Android 手機連線到您的開發電腦。

我們使用執行 Android 6.0 （Marshmallow） 的 Google Nexus 5X 裝置進行測試。 不過，這些技術在任何新式 Android 版本中都是常見的。

安裝Google Play服務

推播外掛程式依賴 Android Google Play Services 進行推播通知。

  1. 在 Visual Studio 中，選取 [工具>Android>Android SDK 管理員]。 然後展開 [Extras] 資料夾。 勾選適當的框框，以確保已安裝下列 SDK：

    • Android 2.3 或更高版本
    • Google 存放庫修訂 27 或更高版本
    • Google Play Services 9.0.2 或更高版本

  2. 選取「安裝套件」。 然後等候安裝完成。

目前的必要函式庫會列在 phonegap-plugin-push 安裝文件中。

在Android上的應用程式中測試推播通知

您現在可以執行應用程式並在 TodoItem 資料表中插入專案，以測試推播通知。 只要您使用相同的後端，您就可以從相同的裝置或第二個裝置進行測試。 在 Android 平台上測試您的 Cordova 應用程式，可以採用以下方法之一：

  • 在實體裝置上： 使用 USB 纜線將 Android 裝置連接到開發電腦。 而不是 Google Android 模擬器，請選取 [裝置]。 Visual Studio 會將應用程式部署至裝置並執行應用程式。 然後，您可以與裝置上的應用程式互動。

    Mobizen 之類的螢幕共用應用程式可協助您開發 Android 應用程式。 Mobizen 將 Android 畫面投影到電腦上的網頁瀏覽器。

  • 在Android模擬器上： 當您使用模擬器時，需要額外的設定步驟。

    請確定您部署至已將 Google API 設定為目標的虛擬設備，如 Android 虛擬設備 （AVD） 管理員所示。

    Android 虛擬設備管理員

    如果您想要使用更快的 x86 模擬器， 請安裝 HAXM 驅動程式，然後將模擬器設定為使用它。

    選取 [ 應用程式>設定>] [新增帳戶]，將Google帳戶新增至Android裝置。 然後遵循提示。

    將 Google 帳戶新增至 Android 裝置

    像之前一樣執行 todolist 應用程式，並插入新的 Todo 專案。 這次，通知圖示會顯示在通知區域中。 您可以開啟通知選單，以檢視通知的全文。

    檢視通知

（選擇性）在 iOS 上設定和執行

本節適用於在 iOS 裝置上執行 Cordova 專案。 如果您未使用 iOS 裝置，您可以略過本節。

在 Mac 或雲端服務上安裝並執行 iOS 遠端建置代理程式

在使用 Visual Studio 在 iOS 上執行 Cordova 應用程式之前，請先完成 iOS 安裝指南 中的步驟，以安裝和執行遠端建置代理程式。

請確定您可以建置適用於 iOS 的應用程式。 從 Visual Studio 建置 iOS 應用程式時，需要安裝指南中的步驟。 如果您沒有 Mac，您可以在 MacInCloud 等服務上使用遠端建置代理程式來建置 iOS。 如需詳細資訊，請參閱 在雲端中執行iOS應用程式。

備註

需要 Xcode 7 或更高版本，才能在 iOS 上使用推播外掛程式。

尋找要作為應用程式識別碼使用的識別碼

在註冊應用程式以取得推播通知之前，請在 Cordova 應用程式中開啟 config.xml，在 Widget 元素中尋找 id 屬性值，然後複製它以供稍後使用。 在下列 XML 中，識別碼為 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開發人員入口網站上建立應用程式識別碼時，請使用此識別碼。 如果您在開發人員入口網站上建立不同的應用程式識別碼，您稍後必須在本教學課程中採取一些額外的步驟。 Widget 元素中的標識碼必須符合開發人員入口網站上的應用程式識別碼。

在 Apple 開發人員入口網站上註冊應用程式以取得推播通知

  • 為您的應用程式註冊應用程式識別碼，。 建立明確的應用程式識別碼（不是通配符應用程式識別符），針對 套件組合標識元，請使用 Xcode 快速入門專案中的確切套件組合識別碼。 也很重要的是您要選擇 [推播通知] 選項。
  • 接下來，為了準備 設定推播通知，請建立「開發」或「發行」SSL 憑證。

觀看顯示類似步驟的影片

設定 Azure 以傳送推播通知

  1. 在您的 Mac 上，啟動 Keychain Access。 在左側導覽列的 [類別目錄]下，開啟 [我的憑證] 。 尋找您在上一節下載的 SSL 憑證，然後揭露其內容。 只選取憑證（請勿選取私鑰）。 然後 匯出它。
  2. 在 Azure 入口網站的 中，選取 瀏覽所有>App Services。 然後選取您的行動應用程式的後端。
  3. 在 [設定]下，選取 [App Service 推送]。 然後選取您的通知中樞名稱。
  4. 移至 Apple Push Notification Services>上傳憑證。 上傳 .p12 檔案，選取正確的 模式（視您先前的用戶端 SSL 憑證為生產環境或沙箱而定）。 儲存任何變更。

您的服務現在已設定為使用 iOS 上的推播通知。

確認您的應用程式識別碼符合 Cordova 應用程式

如果您在 Apple 開發人員帳戶中建立的應用程式識別碼已經符合 config.xml 檔案中小工具專案的識別碼，您可以略過此步驟。 不過，如果標識符不相符，請執行下列步驟：

  1. 從您的「項目」中刪除 platforms 資料夾。
  2. 從您的項目刪除 plugins 資料夾。
  3. 從您的項目刪除node_modules資料夾。
  4. 更新 config.xml 檔案中 Widget 元素的 id 屬性，以使用您在 Apple 開發人員帳戶中建立的應用程式識別碼。
  5. 重建您的專案。
在您的 iOS 應用程式中測試推播通知

  1. 在Visual Studio中，確定已選取 iOS 作為部署目標。 然後選取 [裝置 ] 以在連線的 iOS 裝置上執行推播通知。

    您可以在使用 iTunes 連線到電腦的 iOS 裝置上執行推播通知。 iOS 模擬器不支援推播通知。

  2. 選取 Visual Studio 中的 [ 執行 ] 按鈕或 F5 來建置專案，並在 iOS 裝置中啟動應用程式。 然後選取 [確定 ] 以接受推播通知。

    備註

    應用程式在首次啟動時會要求確認推播通知。

  3. 在應用程式中輸入任務，然後選取加號圖示 （+）。

  4. 確認已收到通知。 然後選取 [確定 ] 以關閉通知。

（選擇性）在 Windows 上設定和執行

本節說明如何在 Windows 10 裝置上執行 Apache Cordova 應用程式專案（Windows 10 支援 PhoneGap 推送外掛程式）。 如果您未使用 Windows 裝置，您可以略過本節。

向 WNS 註冊您的 Windows 應用程式以取得推播通知

若要在 Visual Studio 中使用市集選項，請從 [方案平臺] 清單中選取 Windows 目標，例如 Windows-x64 或 Windows-x86。 請避免使用 Windows-AnyCPU 來推送通知。

  1. 在 Visual Studio 方案總管中，以滑鼠右鍵按兩下 Windows 市集應用程式專案。 然後選取 市集>將應用程式與市集關聯。

    將應用程式與 Windows 市集建立關聯

  2. 在精靈中，選取 [下一步]。 然後使用您的Microsoft帳戶登入。 在[保留新的應用程式名稱]中，輸入應用程式的名稱，然後選取[保留]。

  3. 成功建立應用程式註冊之後，請選取新的應用程式名稱。 選取 [下一步]，然後選取 [關聯]。 此程式會將必要的 Windows 市集註冊資訊新增至應用程式指令清單。

  4. 使用您先前為 Windows 市集應用程式建立的相同註冊，針對 Windows Phone 市集應用程式專案重複步驟 1 和 3。

  5. 移至 windows 開發人員中心 ，然後使用您的 Microsoft 帳戶登入。 在 [我的應用程式]中，選取新的應用程式註冊。 然後展開 服務>推播通知。

  6. 在 [推播通知] 頁面上，於 [Windows 推播通知服務 ][WNS] 和 [Microsoft Azure Mobile Apps] 底下，選取 [Live Services 網站]。 記下 套件 SID 的值，以及 Application Secret中的 當前 值。

    開發人員中心 應用程式設定

    這很重要

    應用程式秘密和套件 SID 是重要的安全性認證。 請勿與任何人共用這些值，或與您的應用程式一起散發這些值。

觀看顯示類似步驟的影片

設定 WNS 的通知中樞

  1. 在 Azure 入口網站的 中，選取 瀏覽所有>App Services。 然後選取您的行動應用程式的後端。 在 [設定]下，選取 [App Service 推送]。 然後選取您的通知中樞名稱。

  2. 移至 Windows（WNS）。 然後輸入您從 Live Services 網站取得 安全性密鑰（客戶端密碼）和 套件 SID。 接下來，選取 儲存。

    在入口網站中設定 WNS 金鑰

您的後端現在已設定為使用WNS來傳送推播通知。

設定 Cordova 應用程式以支援 Windows 推播通知

以滑鼠右鍵點擊 config.xml 開啟設定設計器。 然後選取 [檢視設計工具]。 接下來，選取 [Windows] 索引標籤，然後在 [Windows 目標版本] 下選取 [Windows 10]。

若要支持預設 （debug） 組建中的推播通知，請開啟 build.json 檔案。 然後將「發布」組態複製到偵錯組態。

"windows": {
    "release": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
    }
}

更新之後， build.json 檔案應該包含下列程序代碼：

"windows": {
    "release": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
        },
    "debug": {
        "packageCertificateKeyFile": "res\\native\\windows\\CordovaApp.pfx",
        "publisherId": "CN=yourpublisherID"
        }
    }

建置應用程式並確認您沒有任何錯誤。 您的用戶端應用程式現在應該註冊來自Mobile Apps 後端的通知。 針對解決方案中的每個 Windows 項目重複本節。

在 Windows 應用程式中測試推播通知

在 Visual Studio 中，確定已選取 Windows 平台作為部署目標，例如 Windows-x64 或 Windows-x86。 若要在裝載 Visual Studio 的 Windows 10 計算機上執行應用程式，請選擇 [ 本機計算機]。

  1. 選取 [ 執行] 按鈕以建置項目並啟動應用程式。

  2. 在應用程式中，輸入新 todoitem 的名稱，然後選取加號 （+） 圖示來新增它。

確認新增項目時是否收到通知。

後續步驟

  • 閱讀 通知中樞 以瞭解推播通知。
  • 如果您尚未這麼做，請透過 新增身份驗證 至 Apache Cordova 應用程式來繼續教程。

瞭解如何使用下列 SDK：

  • Last updated on