Tutorial: Mengirim pemberitahuan push yang dilokalkan ke aplikasi Windows menggunakan Microsoft Azure Notification Hubs

Artikel
06/01/2023

Gambaran Umum

Catatan

Microsoft Push Notification Service (MPNS) tidak lagi digunakan dan tidak lagi didukung.

Tutorial ini menunjukkan cara mengirim pemberitahuan push yang dilokalkan ke perangkat seluler yang terdaftar dengan layanan Notification Hubs. Dalam tutorial ini, Anda akan memperbarui aplikasi yang dibuat dalam Tutorial: Mengirim pemberitahuan ke perangkat tertentu (Universal Windows Platform) untuk mendukung skenario berikut:

Aplikasi Microsoft Store Windows memungkinkan perangkat klien menentukan bahasa, dan berlangganan ke kategori berita terkini yang berbeda.
Aplikasi back-end menyiarkan pemberitahuan, menggunakan fitur tag dan templat dari Microsoft Azure Notification Hubs.

Ketika menyelesaikan tutorial, aplikasi seluler memungkinkan Anda mendaftar pada kategori yang Anda minati, serta menentukan bahasa yang digunakan untuk menerima pemberitahuan. Aplikasi backend mengirimkan pemberitahuan yang dilokalkan berdasarkan bahasa dan perangkat.

Dalam tutorial ini, Anda akan mempelajari cara:

Memperbarui aplikasi Windows untuk mendukung informasi lokal
Memperbarui aplikasi back-end untuk mengirim pemberitahuan yang dilokalkan
Menguji aplikasi

Prasyarat

Selesaikan Tutorial: Mengirim pemberitahuan ke perangkat tertentu (Universal Windows Platform).

Dalam Tutorial: Mengirim pemberitahuan ke perangkat tertentu (Universal Windows Platform), Anda membangun aplikasi yang menggunakan tag untuk berlangganan pemberitahuan kategori berita yang berbeda. Dalam tutorial ini, Anda menggunakan fitur templat Notification Hubs untuk dengan mudah mengirimkan pemberitahuan berita terkini yang dilokalkan.

Pada tingkat tinggi, templat adalah cara untuk menentukan format di mana perangkat tertentu harus menerima pemberitahuan. Templat menentukan format payload yang tepat dengan merujuk ke properti yang merupakan bagian dari pesan yang dikirim oleh back-end aplikasi Anda. Dalam tutorial ini, aplikasi backend mengirim pesan lokal-agnostik yang berisi semua bahasa yang didukung:

{
    "News_English": "...",
    "News_French": "...",
    "News_Mandarin": "..."
}

Perangkat mendaftar dengan templat yang mengacu pada properti yang benar. Misalnya, aplikasi Microsoft Store Windows yang ingin menerima pesan toast dalam bahasa Inggris mendaftar templat berikut dengan tag yang sesuai:

<toast>
    <visual>
    <binding template=\"ToastText01\">
        <text id=\"1\">$(News_English)</text>
    </binding>
    </visual>
</toast>

Untuk mempelajari selengkapnya tentang templat, lihat Templat Push.

Memperbarui aplikasi Windows untuk mendukung informasi lokal

Buka solusi Visual Studio yang Anda buat untuk Tutorial: Mengirim pemberitahuan ke perangkat tertentu (Universal Windows Platform).

Perbarui file MainPage.xaml solusi untuk menyertakan kotak kombo lokal:

<Grid Margin="120, 58, 120, 80"  
        Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"  TextWrapping="Wrap" Text="Breaking News" FontSize="42" VerticalAlignment="Top"/>
    <ComboBox Name="Locale" HorizontalAlignment="Left" VerticalAlignment="Center" Width="200" Grid.Row="1" Grid.Column="0">
        <x:String>English</x:String>
        <x:String>French</x:String>
        <x:String>Mandarin</x:String>
    </ComboBox>
    <ToggleSwitch Header="World" Name="WorldToggle" Grid.Row="2" Grid.Column="0"/>
    <ToggleSwitch Header="Politics" Name="PoliticsToggle" Grid.Row="3" Grid.Column="0"/>
    <ToggleSwitch Header="Business" Name="BusinessToggle" Grid.Row="4" Grid.Column="0"/>
    <ToggleSwitch Header="Technology" Name="TechnologyToggle" Grid.Row="2" Grid.Column="1"/>
    <ToggleSwitch Header="Science" Name="ScienceToggle" Grid.Row="3" Grid.Column="1"/>
    <ToggleSwitch Header="Sports" Name="SportsToggle" Grid.Row="4" Grid.Column="1"/>
    <Button Content="Subscribe" HorizontalAlignment="Center" Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="2" Click="SubscribeButton_Click" />
</Grid>

Di kelas Notifications, tambahkan parameter lokal ke metode StoreCategoriesAndSubscribe dan SubscribeToCategories.

public async Task<Registration> StoreCategoriesAndSubscribe(string locale, IEnumerable<string> categories)
{
    ApplicationData.Current.LocalSettings.Values["categories"] = string.Join(",", categories);
    ApplicationData.Current.LocalSettings.Values["locale"] = locale;
    return await SubscribeToCategories(locale, categories);
}

public async Task<Registration> SubscribeToCategories(string locale, IEnumerable<string> categories = null)
{
    var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();

    if (categories == null)
    {
        categories = RetrieveCategories();
    }

    // Using a template registration. This makes supporting notifications across other platforms much easier.
    // Using the localized tags based on locale selected.
    string templateBodyWNS = String.Format("<toast><visual><binding template=\"ToastText01\"><text id=\"1\">$(News_{0})</text></binding></visual></toast>", locale);

    return await hub.RegisterTemplateAsync(channel.Uri, templateBodyWNS, "localizedWNSTemplateExample", categories);
}

Alih-alih memanggil metode RegisterNativeAsync, panggil RegisterTemplateAsync. Anda mendaftarkan format pemberitahuan tertentu yang mana templatnya bergantung pada format lokal. Anda juga menyediakan nama untuk templat ("localizedWNSTemplateExample"), karena Anda mungkin ingin mendaftarkan lebih dari satu templat (misalnya satu untuk pemberitahuan toast dan satu untuk petak peta). Anda juga perlu memberi nama templat tersebut untuk memperbarui atau menghapusnya.

Jika perangkat mendaftarkan beberapa templat dengan tag yang sama, pesan yang masuk menargetkan tag tersebut menghasilkan beberapa pemberitahuan yang dikirimkan ke perangkat (satu untuk setiap templat). Perilaku ini berguna ketika pesan logika yang sama harus menghasilkan beberapa pemberitahuan kontrol, misalnya menunjukkan lencana dan toast pada aplikasi Microsoft Store Windows.

Tambahkan metode berikut untuk mengambil lokal yang tersimpan:

public string RetrieveLocale()
{
    var locale = (string) ApplicationData.Current.LocalSettings.Values["locale"];
    return locale != null ? locale : "English";
}

Dalam file MainPage.xaml.cs, perbarui handler klik tombol untuk mengambil nilai kotak kombo Lokal saat ini dan berikan kepada panggilan ke kelas Notifications:

private async void SubscribeButton_Click(object sender, RoutedEventArgs e)
{
    var locale = (string)Locale.SelectedItem;

    var categories = new HashSet<string>();
    if (WorldToggle.IsOn) categories.Add("World");
    if (PoliticsToggle.IsOn) categories.Add("Politics");
    if (BusinessToggle.IsOn) categories.Add("Business");
    if (TechnologyToggle.IsOn) categories.Add("Technology");
    if (ScienceToggle.IsOn) categories.Add("Science");
    if (SportsToggle.IsOn) categories.Add("Sports");

    var result = await ((App)Application.Current).notifications.StoreCategoriesAndSubscribe(locale,
            categories);

    var dialog = new MessageDialog("Locale: " + locale + " Subscribed to: " + 
        string.Join(",", categories) + " on registration Id: " + result.RegistrationId);
    dialog.Commands.Add(new UICommand("OK"));
    await dialog.ShowAsync();
}

Terakhir, dalam file App.xaml.cs, perbarui metode InitNotificationsAsync untuk mengambil lokal dan menggunakannya saat berlangganan:

private async void InitNotificationsAsync()
{
    var result = await notifications.SubscribeToCategories(notifications.RetrieveLocale());

    // Displays the registration ID so you know it was successful
    if (result.RegistrationId != null)
    {
        var dialog = new MessageDialog("Registration successful: " + result.RegistrationId);
        dialog.Commands.Add(new UICommand("OK"));
        await dialog.ShowAsync();
    }
}

Jalankan aplikasi UWP

Jalankan aplikasi Universal Windows Platform. Tunggu hingga Anda melihat pesan Pendaftaran berhasil.
Pilih kategori dan lokal, dan klik Berlangganan. Aplikasi ini mengonversi kategori yang dipilih menjadi tag dan meminta pendaftaran perangkat baru untuk tag yang dipilih dari hub pemberitahuan.
Anda akan melihat pesan konfirmasi tentang langganantersebut.

Memperbarui aplikasi konsol untuk mengirim pemberitahuan yang dilokalkan

Ketika Anda mengirim pemberitahuan templat, Anda hanya perlu menyediakan set properti, dalam tutorial ini, aplikasi backend mengirimkan set properti yang berisi versi berita saat ini yang dilokalkan, misalnya:

{
    "News_English": "World News in English!",
    "News_French": "World News in French!",
    "News_Mandarin": "World News in Mandarin!"
}

Di bagian ini, Anda memperbarui proyek aplikasi konsol dalam solusi. Ubah metode SendTemplateNotificationAsync di aplikasi konsol yang sebelumnya Anda buat dengan kode berikut:

Penting

Tentukan nama dan string koneksi dengan akses penuh untuk hub pemberitahuan Anda dalam kode.

private static async void SendTemplateNotificationAsync()
{
    // Define the notification hub.
    NotificationHubClient hub = NotificationHubClient.CreateClientFromConnectionString(
        "<connection string with full access>", "<hub name>");

    // Sending the notification as a template notification. All template registrations that contain
    // "messageParam" or "News_<local selected>" and the proper tags will receive the notifications.
    // This includes APNS, FCM, WNS, and MPNS template registrations.
    Dictionary<string, string> templateParams = new Dictionary<string, string>();

    // Create an array of breaking news categories.
    var categories = new string[] { "World", "Politics", "Business", "Technology", "Science", "Sports"};
    var locales = new string[] { "English", "French", "Mandarin" };

    foreach (var category in categories)
    {
        templateParams["messageParam"] = "Breaking " + category + " News!";

        // Sending localized News for each tag too...
        foreach( var locale in locales)
        {
            string key = "News_" + locale;

            // Your real localized news content would go here.
            templateParams[key] = "Breaking " + category + " News in " + locale + "!";
        }

        await hub.SendTemplateNotificationAsync(templateParams, category);
    }
}

Panggilan sederhana ini memberikan berita yang dilokalkan ke semua perangkat, terlepas dari platformnya, saat Microsoft Azure Notification Hub Anda membangun dan memberikan payload asli yang benar ke semua perangkat yang berlangganan ke tag tertentu.

Jalankan aplikasi konsol untuk mengirim pemberitahuan yang dilokalkan

Jalankan aplikasi konsol untuk mengirim pemberitahuan pada setiap kategori dan dalam setiap bahasa yang didukung. Verifikasi bahwa Anda hanya menerima pemberitahuan untuk kategori langganan Anda dan pesan tersebut merupakan pesan untuk lokal yang Anda pilih.

Pesan pemberitahuan

Langkah berikutnya

Dalam tutorial ini, Anda akan mempelajari cara mengirim pemberitahuan push kepada perangkat tertentu yang memiliki tag terkait dengan pendaftaran mereka. Untuk mempelajari cara mengirim pemberitahuan push kepada pengguna tertentu yang mungkin menggunakan lebih dari satu perangkat, lanjutkan ke tutorial berikut:

Pemberitahuan push ke pengguna tertentu