Menambahkan pemberitahuan push ke aplikasi Apache Cordova Anda

Artikel
06/25/2019

Gambaran Umum

Dalam tutorial ini, Anda menambahkan pemberitahuan push ke proyek mulai cepat Apache Cordova sehingga pemberitahuan push dikirim ke perangkat setiap kali rekaman dimasukkan.

Jika Anda tidak menggunakan proyek server mulai cepat yang diunduh, Anda memerlukan paket ekstensi pemberitahuan push. Untuk informasi selengkapnya, lihat Bekerja dengan SDK server back-end .NET untuk Aplikasi Seluler.

Prasyarat

Tutorial ini mengasumsikan bahwa Anda memiliki aplikasi Apache Cordova yang dikembangkan dengan Visual Studio 2015. Perangkat ini harus berjalan di Google Android Emulator, perangkat Android, perangkat Windows, atau perangkat iOS.

Untuk menyelesaikan tutorial ini, Anda perlu:

PC dengan Visual Studio Community 2015 atau yang lebih baru
Visual Studio Tools for Apache Cordova
Akun Azure aktif
Proyek mulai cepat Apache Cordova yang telah selesai
(Android) Akun Google dengan alamat email terverifikasi
(iOS) Keanggotaan Program Pengembang Apple dan perangkat iOS (Simulator iOS tidak mendukung pemberitahuan push)
(Windows) Akun Pengembang Microsoft Store dan perangkat Windows 10

Mengonfigurasi hub pemberitahuan

Fitur Mobile Apps Azure App Service menggunakan Azure Notification Hubs untuk mengirim push, sehingga Anda akan mengonfigurasi hub pemberitahuan untuk aplikasi seluler Anda.

Di portal Azure, buka App Services, lalu pilih back end aplikasi Anda. Di bawah Pengaturan, pilih Dorong.
Untuk menambahkan sumber daya hub pemberitahuan ke aplikasi, pilih Koneksi. Anda dapat membuat hub atau menyambungkan ke hub yang sudah ada.

Sekarang Anda telah menyambungkan hub pemberitahuan ke proyek back-end Mobile Apps Anda. Nantinya Anda mengonfigurasi hub pemberitahuan ini untuk terhubung ke sistem pemberitahuan platform (PNS) untuk mendorong ke perangkat.

Tonton video yang memperlihatkan langkah-langkah di bagian ini.

Memperbarui proyek server

Di bagian ini, Anda memperbarui kode di proyek back-end Mobile Apps yang ada untuk mengirim pemberitahuan push setiap kali item baru ditambahkan. Proses ini didukung oleh fitur templat Azure Notification Hubs, yang memungkinkan pendorongan lintas platform. Berbagai klien terdaftar untuk pemberitahuan push menggunakan templat, dan satu push universal dapat masuk ke semua platform klien.

Pilih salah satu prosedur berikut yang cocok dengan jenis proyek back-end Anda—baik back end .NET atau back endNode.js.

Proyek back-end .NET

Di Visual Studio, klik kanan proyek server. Lalu pilih Kelola Paket NuGet. Cari Microsoft.Azure.NotificationHubs, kemudian pilih Instal. Proses ini menginstal pustaka Notification Hubs untuk mengirim pemberitahuan dari ujung belakang.

Dalam proyek server, buka Pengontrol>TodoItemController.cs. Kemudian tambahkan pernyataan penggunaan berikut:

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

Dalam metode PostTodoItem , tambahkan kode berikut setelah panggilan ke 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");
}

Proses ini mengirimkan pemberitahuan templat yang berisi item. Teks saat item baru disisipkan.

Menerbitkan ulang proyek server.

Node.js proyek back-end

Siapkan proyek backend Anda.

Ganti kode yang ada di todoitem.js dengan kode berikut:

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;

Proses ini mengirimkan pemberitahuan templat yang berisi item.text saat item baru disisipkan.

Saat Anda mengedit file di komputer lokal Anda, terbitkan ulang proyek server.

Mengubah aplikasi Cordova Anda

Untuk memastikan bahwa proyek aplikasi Apache Cordova Anda siap untuk menangani pemberitahuan push, instal plugin push Cordova ditambah layanan push khusus platform apa pun.

Perbarui versi Cordova di proyek Anda.

Jika proyek Anda menggunakan versi Apache Cordova yang lebih lama dari versi 6.1.1, perbarui proyek klien. Untuk memperbarui proyek, lakukan langkah-langkah berikut:

Untuk membuka perancang konfigurasi, klik config.xmlkanan .
Pilih tab Platform .
Dalam kotak teks Cordova CLI , pilih 6.1.1.
Untuk memperbarui proyek, pilih Bangun, lalu pilih Bangun Solusi.

Menginstal plugin push

Aplikasi Apache Cordova tidak menangani kemampuan perangkat atau jaringan secara asli. Kemampuan ini disediakan oleh plugin yang diterbitkan baik di npm atau di GitHub. Plugin phonegap-plugin-push menangani pemberitahuan push jaringan.

Anda dapat menginstal plugin push dengan salah satu cara berikut:

Dari prompt perintah:

Jalankan perintah berikut:

cordova plugin add phonegap-plugin-push

Dari dalam Visual Studio:

Di Penjelajah Solusi, buka file config.xml. Selanjutnya, pilih Plugin Kustom>. Kemudian pilih Git sebagai sumber penginstalan.
Masukkan https://github.com/phonegap/phonegap-plugin-push sebagai sumber.
Pilih panah di samping sumber penginstalan.
Di SENDER_ID, jika Anda sudah memiliki ID proyek numerik untuk proyek Google Developer Console, Anda dapat menambahkannya di sini. Jika tidak, masukkan nilai tempat penampung, seperti 777777. Jika Anda menargetkan Android, Anda dapat memperbarui nilai ini dalam file config.xml nanti.

Catatan

Pada versi 2.0.0, google-services.json perlu diinstal di folder akar proyek Anda untuk mengonfigurasi ID pengirim. Untuk informasi selengkapnya, lihat dokumentasi penginstalan.
Pilih Tambahkan.

Plugin push sekarang diinstal.

Menginstal plugin perangkat

Ikuti prosedur yang sama dengan yang Anda gunakan untuk menginstal plugin push. Tambahkan plugin Perangkat dari daftar plugin Core. (Untuk menemukannya, pilih Plugin>Inti.) Anda memerlukan plugin ini untuk mendapatkan nama platform.

Daftarkan perangkat Anda saat aplikasi dimulai

Awalnya, kami menyertakan beberapa kode minimal untuk Android. Nantinya Anda dapat memodifikasi aplikasi untuk dijalankan di iOS atau Windows 10.

Tambahkan panggilan ke registerForPushNotifications selama panggilan balik untuk proses masuk. Atau, Anda dapat menambahkannya di bagian bawah metode 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);

Contoh ini menunjukkan panggilan registerForPushNotifications setelah autentikasi berhasil. Anda dapat memanggil registerForPushNotifications() sesering yang diperlukan.

Tambahkan metode registerForPushNotifications baru sebagai berikut:

// 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) Dalam kode sebelumnya, ganti Your_Project_ID dengan ID proyek numerik untuk aplikasi Anda dari Google Developer Console.

(Opsional) Mengonfigurasi dan menjalankan aplikasi di Android

Lengkapi bagian ini untuk mengaktifkan pemberitahuan push untuk Android.

Mengaktifkan Firebase Cloud Messaging

Karena Anda menargetkan platform Google Android pada awalnya, Anda harus mengaktifkan Firebase Cloud Messaging.

Masuk ke Konsol Firebase. Buat proyek Firebase baru jika Anda belum memilikinya.
Setelah membuat proyek, pilih Tambahkan Firebase ke aplikasi Android Anda.
Di halaman Tambahkan Firebase ke aplikasi Android Anda, lakukan langkah-langkah berikut:
1. Untuk nama paket Android, salin nilai applicationId Anda di file build.gradle aplikasi. Contohnya, com.fabrikam.fcmtutorial1app.
2. Pilih Daftarkan aplikasi.
Pilih Unduh google-services.jsanda, simpan file ke folder aplikasi proyek Anda, lalu pilih Berikutnya.
Buat perubahan konfigurasi berikut ke proyek Anda di Android Studio.
1. Di file build.gradle tingkat proyek Anda (<project>/build.gradle), tambahkan pernyataan berikut ke bagian dependensi.
```
classpath 'com.google.gms:google-services:4.0.1'
```
2. Di file gradle build tingkat aplikasi Anda (<project>/<app-module>/build.gradle), tambahkan pernyataan berikut ke bagian dependensi.
```
implementation 'com.google.firebase:firebase-core:16.0.8'
implementation 'com.google.firebase:firebase-messaging:17.3.4'
```
3. Tambahkan baris berikut ke bagian akhir file build.gradle tingkat aplikasi setelah bagian dependensi.
```
apply plugin: 'com.google.gms.google-services'
```
4. Pilih Sinkronkan sekarang pada toolbar.
Pilih Selanjutnya.
Pilih Lompati langkah ini.
Di konsol Firebase, pilih cog untuk proyek Anda. Pilih Pengaturan Proyek.
Jika belum mengunduh file google-services.json ke dalam folder aplikasi proyek Android Studio Anda, Anda dapat melakukannya di halaman ini.
Alihkan ke tab Perpesanan Cloud di bagian atas.
Salin dan simpan Kunci Server untuk digunakan nanti. Gunakan nilai ini untuk mengonfigurasi hub Anda.

Mengonfigurasi back end Aplikasi Seluler untuk mengirim permintaan push menggunakan FCM

Di portal Azure, pilih Telusuri Semua>App Services. Kemudian pilih back end Mobile Apps Anda.
Di bawah Pengaturan, pilih Dorong. Lalu pilih Konfigurasikan layanan pemberitahuan push.
Buka Google (GCM). Masukkan kunci server warisan FCM yang Anda peroleh dari konsol Firebase, lalu pilih Simpan.

Layanan Anda sekarang dikonfigurasi untuk bekerja dengan Firebase Cloud Messaging.

Mengonfigurasi aplikasi Cordova Anda untuk Android

Di aplikasi Cordova Anda, buka config.xml. Kemudian ganti Your_Project_ID dengan ID proyek numerik untuk aplikasi Anda dari Google Developer Console.

<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>

Buka index.js. Kemudian perbarui kode untuk menggunakan ID proyek numerik Anda.

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

Mengonfigurasi perangkat Android Anda untuk penelusuran kesalahan USB

Sebelum dapat menyebarkan aplikasi ke Perangkat Android, Anda perlu mengaktifkan penelusuran kesalahan USB. Ikuti langkah-langkah berikut di ponsel Android Anda:

Buka Pengaturan>Tentang telepon. Kemudian ketuk nomor Build hingga mode pengembang diaktifkan (sekitar tujuh kali).
Kembali ke opsi Pengaturan>Developer, aktifkan penelusuran kesalahan USB. Kemudian sambungkan ponsel Android Anda ke PC pengembangan Anda dengan kabel USB.

Kami menguji ini menggunakan perangkat Google Nexus 5X yang menjalankan Android 6.0 (Marshmallow). Namun, teknik ini umum di semua rilis Android modern.

Menginstal Layanan Google Play

Plugin push bergantung pada Layanan Google Play Android untuk pemberitahuan push.

Di Visual Studio, pilih Alat>Android>Android SDK Manager. Kemudian perluas folder Extras . Centang kotak yang sesuai untuk memastikan bahwa masing-masing SDK berikut diinstal:
- Android 2.3 atau yang lebih tinggi
- Revisi Repositori Google 27 atau lebih tinggi
- Google Play Services 9.0.2 atau yang lebih tinggi
Pilih Instal Paket. Kemudian tunggu hingga penginstalan selesai.

Pustaka yang diperlukan saat ini tercantum dalam dokumentasi penginstalan phonegap-plugin-push.

Menguji pemberitahuan push di aplikasi di Android

Sekarang Anda dapat menguji pemberitahuan push dengan menjalankan aplikasi dan menyisipkan item dalam tabel TodoItem. Anda dapat menguji dari perangkat yang sama atau dari perangkat kedua, selama Anda menggunakan back end yang sama. Uji aplikasi Cordova Anda di platform Android dengan salah satu cara berikut:

Pada perangkat fisik: Pasang perangkat Android anda ke komputer pengembangan anda dengan kabel USB. Alih-alih Google Android Emulator, pilih Perangkat. Visual Studio menyebarkan aplikasi ke perangkat dan menjalankan aplikasi. Anda kemudian dapat berinteraksi dengan aplikasi di perangkat.

Aplikasi berbagi layar seperti Mobizen dapat membantu Anda dalam mengembangkan aplikasi Android. Mobizen memproyeksikan layar Android Anda ke browser web di PC Anda.
Pada emulator Android: Ada langkah-langkah konfigurasi tambahan yang diperlukan saat Anda menggunakan emulator.

Pastikan Anda menyebarkan ke perangkat virtual yang memiliki Google API yang ditetapkan sebagai target, seperti yang ditunjukkan di manajer Perangkat Virtual Android (AVD).

Jika Anda ingin menggunakan emulator x86 yang lebih cepat, instal driver HAXM, lalu konfigurasikan emulator untuk menggunakannya.

Tambahkan akun Google ke perangkat Android dengan memilih Aplikasi>Pengaturan>Tambahkan akun. Ikuti prompt perintah.

Jalankan aplikasi todolist seperti sebelumnya dan sisipkan item todo baru. Kali ini, ikon pemberitahuan ditampilkan di area pemberitahuan. Anda dapat membuka laci pemberitahuan untuk melihat teks lengkap pemberitahuan.

(Opsional) Mengonfigurasi dan menjalankan di iOS

Bagian ini untuk menjalankan proyek Cordova di perangkat iOS. Jika Anda tidak bekerja dengan perangkat iOS, Anda dapat melewati bagian ini.

Menginstal dan menjalankan agen build jarak jauh iOS di Mac atau layanan cloud

Sebelum Anda dapat menjalankan aplikasi Cordova di iOS menggunakan Visual Studio, ikuti langkah-langkah dalam panduan penyiapan iOS untuk menginstal dan menjalankan agen build jarak jauh.

Pastikan Anda dapat membuat aplikasi untuk iOS. Langkah-langkah dalam panduan penyiapan diperlukan untuk membangun aplikasi untuk iOS dari Visual Studio. Jika Anda tidak memiliki Mac, Anda dapat membuat untuk iOS dengan menggunakan agen build jarak jauh pada layanan seperti MacInCloud. Untuk informasi selengkapnya, lihat Menjalankan aplikasi iOS Anda di cloud.

Catatan

Xcode 7 atau yang lebih tinggi diperlukan untuk menggunakan plugin push di iOS.

Temukan ID yang akan digunakan sebagai ID Aplikasi Anda

Sebelum Mendaftarkan aplikasi untuk pemberitahuan push, buka config.xml di aplikasi Cordova Anda, temukan id nilai atribut di elemen widget, lalu salin untuk digunakan nanti. Dalam XML berikut, ID adalah 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">

Nantinya, gunakan pengidentifikasi ini saat Anda membuat ID Aplikasi di portal pengembang Apple. Jika Anda membuat ID Aplikasi yang berbeda di portal pengembang, Anda harus mengambil beberapa langkah tambahan nanti dalam tutorial ini. ID di elemen widget harus cocok dengan ID Aplikasi di portal pengembang.

Mendaftarkan aplikasi untuk pemberitahuan push di portal pengembang Apple

Daftarkan ID aplikasi untuk aplikasi Anda. Buat ID aplikasi eksplisit (bukan ID aplikasi kartubebas) dan, untuk ID Bundel, gunakan ID bundel yang tepat yang ada di proyek mulai cepat Xcode Anda. Sangat penting juga bahwa Anda memilih opsi Pemberitahuan Push .
Selanjutnya, untuk mempersiapkan konfigurasi pemberitahuan push, buat sertifikat SSL "Pengembangan" atau "Distribusi".

Tonton video yang menunjukkan langkah-langkah serupa

Mengonfigurasi Azure untuk mengirim pemberitahuan push

Di Mac Anda, luncurkan Akses Rantai Kunci. Di bilah navigasi kiri, di bawah Kategori, buka Sertifikat Saya. Temukan sertifikat SSL yang Anda unduh di bagian sebelumnya, lalu ungkapkan kontennya. Pilih hanya sertifikat (jangan pilih kunci privat). Kemudian ekspor.
Di portal Azure, pilih Telusuri Semua>App Services. Kemudian pilih back end Mobile Apps Anda.
Di bawah Pengaturan, pilih App Service Push. Kemudian pilih nama hub pemberitahuan Anda.
Buka Apple Push Notification Services>Upload Certificate. Upload file .p12, memilih Mode yang benar (tergantung pada apakah sertifikat SSL klien Anda dari sebelumnya adalah produksi atau kotak pasir). Simpan perubahan apa pun.

Layanan Anda sekarang dikonfigurasi untuk bekerja dengan pemberitahuan push di iOS.

Verifikasi bahwa ID Aplikasi Anda cocok dengan aplikasi Cordova Anda

Jika ID Aplikasi yang Anda buat di Akun Pengembang Apple sudah cocok dengan ID elemen widget di file config.xml, Anda dapat melewati langkah ini. Namun, jika ID tidak cocok, lakukan langkah-langkah berikut:

Hapus folder platform dari proyek Anda.
Hapus folder plugin dari proyek Anda.
Hapus folder node_modules dari proyek Anda.
Perbarui atribut id elemen widget di file config.xml untuk menggunakan ID aplikasi yang Anda buat di akun pengembang Apple Anda.
Membangun kembali proyek Anda.

Menguji pemberitahuan push di aplikasi iOS Anda

Di Visual Studio, pastikan iOS dipilih sebagai target penyebaran. Lalu pilih Perangkat untuk menjalankan pemberitahuan push di perangkat iOS yang terhubung.

Anda dapat menjalankan pemberitahuan push di perangkat iOS yang tersambung ke PC dengan iTunes. Simulator iOS tidak mendukung pemberitahuan push.
Pilih tombol Jalankan atau F5 di Visual Studio untuk membangun proyek dan memulai aplikasi di perangkat iOS. Lalu pilih OK untuk menerima pemberitahuan push.

Catatan

Aplikasi ini meminta konfirmasi untuk pemberitahuan push selama eksekusi pertama.
Di aplikasi, ketik tugas, lalu pilih ikon plus (+).
Verifikasi bahwa pemberitahuan telah diterima. Lalu pilih OK untuk menutup pemberitahuan.

(Opsional) Mengonfigurasi dan menjalankan Windows

Bagian ini menjelaskan cara menjalankan proyek aplikasi Apache Cordova pada perangkat Windows 10 (plugin push PhoneGap didukung pada Windows 10). Jika Anda tidak bekerja dengan perangkat Windows, Anda dapat melewati bagian ini.

Daftarkan aplikasi Windows Anda untuk pemberitahuan push dengan WNS

Untuk menggunakan opsi Simpan di Visual Studio, pilih target Windows dari daftar Platform Solusi, seperti Windows-x64 atau Windows-x86. (Hindari Windows-AnyCPU untuk pemberitahuan push.)

Di Visual Studio Penjelajah Solusi, klik kanan proyek aplikasi Windows Store. Lalu pilih Simpan>Kaitkan Aplikasi dengan Toko.
Di wizard, pilih Berikutnya. Kemudian masuk dengan akun Microsoft Anda. Di Pesan nama aplikasi baru, ketik nama untuk aplikasi Anda, lalu pilih Pesan.
Setelah pendaftaran aplikasi berhasil dibuat, pilih nama aplikasi baru. Pilih Berikutnya, lalu pilih Kaitkan. Proses ini menambahkan informasi pendaftaran Windows Store yang diperlukan ke manifes aplikasi.
Ulangi langkah 1 dan 3 untuk proyek aplikasi Windows Phone Store dengan menggunakan pendaftaran yang sama dengan yang sebelumnya Anda buat untuk aplikasi Windows Store.
Buka Windows Dev Center, lalu masuk dengan akun Microsoft Anda. Di Aplikasi saya, pilih pendaftaran aplikasi baru. Kemudian perluaspemberitahuan PushLayanan>.
Pada halaman Pemberitahuan push, di bawah Windows Push Notification Services (WNS) dan Microsoft Azure Mobile Apps, pilih situs Layanan Langsung. Catat nilai SID Paket dan nilai saat ini di Rahasia Aplikasi.

Penting

Rahasia aplikasi dan paket SID adalah kredensial keamanan yang penting. Jangan bagikan nilai-nilai ini dengan siapa pun atau distribusikan dengan aplikasi Anda.

Tonton video yang menunjukkan langkah-langkah serupa

Mengonfigurasi hub pemberitahuan untuk WNS

Di portal Azure, pilih Telusuri Semua>App Services. Kemudian pilih back end Mobile Apps Anda. Di bawah Pengaturan, pilih App Service Push. Kemudian pilih nama hub pemberitahuan Anda.
Buka Windows (WNS). Kemudian masukkan Kunci keamanan (rahasia klien) dan SID Paket yang Anda peroleh dari situs Layanan Langsung. Selanjutnya, pilih Simpan.

Back end Anda sekarang dikonfigurasi untuk menggunakan WNS untuk mengirim pemberitahuan push.

Mengonfigurasi aplikasi Cordova Anda untuk mendukung Windows pemberitahuan push

Buka perancang konfigurasi dengan mengklik kanan config.xml. Lalu pilih View Designer. Selanjutnya, pilih tab Windows, lalu pilih Windows 10 di bawah Versi Target Windows.

Untuk mendukung pemberitahuan push di build default (debug), buka file build.json . Kemudian salin konfigurasi "rilis" ke konfigurasi debug Anda.

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

Setelah pembaruan, file build.json harus berisi kode berikut:

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

Buat aplikasi dan verifikasi bahwa Anda tidak memiliki kesalahan. Aplikasi klien Anda sekarang harus mendaftar untuk pemberitahuan dari back end Mobile Apps. Ulangi bagian ini untuk setiap proyek Windows dalam solusi Anda.

Menguji pemberitahuan push di aplikasi Windows Anda

Dalam Visual Studio, pastikan bahwa platform Windows dipilih sebagai target penyebaran, seperti Windows-x64 atau Windows-x86. Untuk menjalankan aplikasi di PC Windows 10 yang menghosting Visual Studio, pilih Komputer Lokal.

Pilih tombol Jalankan untuk membangun proyek dan memulai aplikasi.
Di aplikasi, ketik nama untuk todoitem baru, lalu pilih ikon plus (+) untuk menambahkannya.

Verifikasi bahwa pemberitahuan diterima saat item ditambahkan.

Langkah berikutnya

Baca tentang Notification Hubs untuk mempelajari tentang pemberitahuan push.
Jika Anda belum melakukannya, lanjutkan tutorial dengan menambahkan autentikasi ke aplikasi Apache Cordova Anda.

Pelajari cara menggunakan SDK berikut:

Menambahkan pemberitahuan push ke aplikasi Apache Cordova Anda

Gambaran Umum

Prasyarat

Mengonfigurasi hub pemberitahuan

Memperbarui proyek server

Proyek back-end .NET

Node.js proyek back-end

Mengubah aplikasi Cordova Anda

Perbarui versi Cordova di proyek Anda.

Menginstal plugin push

Menginstal plugin perangkat

Daftarkan perangkat Anda saat aplikasi dimulai

(Opsional) Mengonfigurasi dan menjalankan aplikasi di Android

Mengaktifkan Firebase Cloud Messaging

Mengonfigurasi back end Aplikasi Seluler untuk mengirim permintaan push menggunakan FCM

Mengonfigurasi aplikasi Cordova Anda untuk Android

Mengonfigurasi perangkat Android Anda untuk penelusuran kesalahan USB

Menginstal Layanan Google Play

Menguji pemberitahuan push di aplikasi di Android

(Opsional) Mengonfigurasi dan menjalankan di iOS

Menginstal dan menjalankan agen build jarak jauh iOS di Mac atau layanan cloud

Temukan ID yang akan digunakan sebagai ID Aplikasi Anda

Mendaftarkan aplikasi untuk pemberitahuan push di portal pengembang Apple

Mengonfigurasi Azure untuk mengirim pemberitahuan push

Verifikasi bahwa ID Aplikasi Anda cocok dengan aplikasi Cordova Anda

Menguji pemberitahuan push di aplikasi iOS Anda

(Opsional) Mengonfigurasi dan menjalankan Windows

Daftarkan aplikasi Windows Anda untuk pemberitahuan push dengan WNS

Mengonfigurasi hub pemberitahuan untuk WNS

Mengonfigurasi aplikasi Cordova Anda untuk mendukung Windows pemberitahuan push

Menguji pemberitahuan push di aplikasi Windows Anda

Langkah berikutnya

Sumber Daya Tambahan: