Menambahkan pemberitahuan push ke aplikasi Windows Anda

Gambaran Umum

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

Jika Anda tidak menggunakan proyek server mulai cepat yang diunduh, Anda akan memerlukan paket ekstensi pemberitahuan push. Lihat Bekerja dengan SDK server backend .NET untuk Azure Mobile Apps untuk informasi selengkapnya.

Mengonfigurasi Notification Hub

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

  1. Di portal Azure, buka App Services, lalu pilih back end aplikasi Anda. Di bawah Pengaturan, pilih Dorong.

  2. Untuk menambahkan sumber daya hub pemberitahuan ke aplikasi, pilih Sambungkan. Anda dapat membuat hub atau menyambungkan ke hub yang sudah ada.

    Mengonfigurasi hub

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.

Daftarkan aplikasi Anda untuk pemberitahuan push

Anda perlu mengirimkan aplikasi ke Microsoft Store, lalu mengonfigurasi proyek server Anda untuk diintegrasikan dengan Windows Push Notification Services (WNS) untuk mengirim push.

  1. Di Visual Studio Penjelajah Solusi, klik kanan proyek aplikasi UWP, klik Simpan>Kaitkan Aplikasi dengan Toko....

    Mengaitkan aplikasi dengan Microsoft Store

  2. Di wizard, klik Berikutnya, masuk dengan akun Microsoft Anda, ketik nama untuk aplikasi Anda di Pesan nama aplikasi baru, lalu klik Pesan.

  3. Setelah pendaftaran aplikasi berhasil dibuat, pilih nama aplikasi baru, klik Berikutnya, lalu klik Kaitkan. Ini menambahkan informasi pendaftaran Microsoft Store yang diperlukan ke manifes aplikasi.

  4. Navigasi ke Portal Pendaftaran Aplikasi dan masuk dengan akun Microsoft Anda. Klik aplikasi Bursa Windows yang Anda kaitkan di langkah sebelumnya.

  5. Di halaman pendaftaran, catat nilai di bawah Rahasia aplikasi dan SID Paket, yang selanjutnya akan Anda gunakan untuk mengonfigurasi backend aplikasi seluler Anda.

    Mengaitkan aplikasi dengan Microsoft Store

    Penting

    Rahasia klien dan SID paket adalah kredensial keamanan penting. Jangan bagikan nilai-nilai ini dengan siapa pun atau distribusikan dengan aplikasi Anda. Id Aplikasi digunakan dengan rahasia untuk mengonfigurasi autentikasi Akun Microsoft.

App Center juga memiliki instruksi untuk mengonfigurasi aplikasi UWP untuk pemberitahuan push.

Mengonfigurasi backend untuk mengirim pemberitahuan push

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

  2. Buka Windows (WNS). Kemudian masukkan Kunci keamanan (rahasia klien) dan SID Paket yang Anda peroleh dari situs Layanan Langsung. Selanjutnya, pilih Simpan.

    Mengatur kunci WNS di portal

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

Memperbarui server untuk mengirim pemberitahuan push

Gunakan prosedur di bawah ini yang cocok dengan jenis proyek backend Anda— backend .NET atau backendNode.js.

Proyek backend .NET

  1. Di Visual Studio, klik kanan proyek server dan klik Kelola Paket NuGet, cari Microsoft.Azure.NotificationHubs, lalu klik Instal. Ini menginstal pustaka klien Notification Hubs.

  2. Perluas Pengontrol, buka TodoItemController.cs, dan tambahkan pernyataan berikut:

    using System.Collections.Generic;
    using Microsoft.Azure.NotificationHubs;
    using Microsoft.Azure.Mobile.Server.Config;
    
  3. 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 the notification hub client.
    NotificationHubClient hub = NotificationHubClient
        .CreateClientFromConnectionString(notificationHubConnection, notificationHubName);
    
    // Define a WNS payload
    var windowsToastPayload = @"<toast><visual><binding template=""ToastText01""><text id=""1"">"
                            + item.Text + @"</text></binding></visual></toast>";
    try
    {
        // Send the push notification.
        var result = await hub.SendWindowsNativeNotificationAsync(windowsToastPayload);
    
        // 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");
    }
    

    Kode ini memberi tahu hub pemberitahuan untuk mengirim pemberitahuan push setelah item baru dimasukkan.

  4. Menerbitkan ulang proyek server.

Node.js proyek backend

  1. Siapkan proyek backend Anda.

  2. Ganti kode yang ada di file todoitem.js dengan yang berikut ini:

    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 WNS payload that contains the new item Text.
    var payload = "<toast><visual><binding template=\ToastText01\><text id=\"1\">"
                                + context.item.text + "</text></binding></visual></toast>";
    
    // 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 WNS native toast notification.
                context.push.wns.sendToast(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;
    

    Ini mengirimkan pemberitahuan toast WNS yang berisi item.text saat item tugas baru disisipkan.

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

Menambahkan pemberitahuan push ke aplikasi Anda

Selanjutnya, aplikasi Anda harus mendaftar untuk pemberitahuan push saat start-up. Ketika Anda telah mengaktifkan autentikasi, pastikan pengguna masuk sebelum mencoba mendaftar pemberitahuan push.

  1. Buka file proyek App.xaml.cs dan tambahkan pernyataan berikut using :

    using System.Threading.Tasks;
    using Windows.Networking.PushNotifications;
    
  2. Dalam file yang sama, tambahkan definisi metode InitNotificationsAsync berikut ke kelas Aplikasi :

    private async Task InitNotificationsAsync()
    {
        // Get a channel URI from WNS.
        var channel = await PushNotificationChannelManager
            .CreatePushNotificationChannelForApplicationAsync();
    
        // Register the channel URI with Notification Hubs.
        await App.MobileService.GetPush().RegisterAsync(channel.Uri);
    }
    

    Kode ini mengambil ChannelURI untuk aplikasi dari WNS, lalu mendaftarkan ChannelURI tersebut dengan Aplikasi Seluler App Service Anda.

  3. Di bagian atas penanganan aktivitas OnLaunched di App.xaml.cs, tambahkan pengubah asinkron ke definisi metode dan tambahkan panggilan berikut ke metode InitNotificationsAsync baru, seperti dalam contoh berikut:

    protected async override void OnLaunched(LaunchActivatedEventArgs e)
    {
        await InitNotificationsAsync();
    
        // ...
    }
    

    Ini menjamin bahwa ChannelURI berumur pendek terdaftar setiap kali aplikasi diluncurkan.

  4. Bangun kembali proyek aplikasi UWP Anda. Aplikasi Anda kini siap menerima pemberitahuan toast.

Menguji pemberitahuan push di aplikasi Anda

  1. Klik kanan proyek Bursa Windows, klik Atur sebagai Proyek StartUp, lalu tekan tombol F5 untuk menjalankan aplikasi Bursa Windows.

    Setelah aplikasi dimulai, perangkat terdaftar untuk pemberitahuan push.

  2. Hentikan aplikasi Windows Store dan ulangi langkah sebelumnya untuk aplikasi Windows Phone Store.

    Pada titik ini, kedua perangkat terdaftar untuk menerima pemberitahuan push.

  3. Jalankan aplikasi Bursa Windows lagi, dan ketik teks di Sisipkan TodoItem, lalu klik Simpan.

    Perhatikan bahwa setelah penyisipan selesai, baik Windows Store maupun aplikasi Windows Phone menerima pemberitahuan push dari WNS. Pemberitahuan ditampilkan di Windows Phone bahkan saat aplikasi tidak berjalan.

Langkah berikutnya

Pelajari selengkapnya tentang pemberitahuan push:

Pertimbangkan untuk melanjutkan ke salah satu tutorial berikut: