Dodawanie powiadomień wypychanych do aplikacji Apache Cordova

• Android
• Cordova
• iOS
• Windows
• Xamarin.Android
• Xamarin.iOS
• Xamarin.Forms

Omówienie

W tym samouczku dodasz powiadomienia wypychane do projektu szybkiego startu Apache Cordova, aby powiadomienie wypychane było wysyłane do urządzenia za każdym razem, gdy rekord zostanie wstawiony.

Jeśli nie używasz pobranego projektu serwera szybkiego startu, potrzebujesz pakietu rozszerzenia powiadomień wypychanych. Aby uzyskać więcej informacji, zobacz Praca z zestawem SDK serwera zaplecza platformy .NET dla usługi Mobile Apps.

Wymagania wstępne

W tym samouczku założono, że masz aplikację Apache Cordova, która została opracowana z Visual Studio 2015 r. To urządzenie powinno działać w usłudze Google Emulator systemu Android, urządzeniu Android, urządzeniu Windows lub urządzeniu iOS.

Do ukończenia tego samouczka niezbędne są następujące elementy:

• Komputer z Visual Studio Community 2015 lub nowszym
• Visual Studio Tools dla Apache Cordova
• Aktywne konto platformy Azure
• Ukończony projekt szybki start Apache Cordova
• (Android) Konto Google z zweryfikowanym adresem e-mail
• (iOS) Członkostwo w programie Apple Developer Program i urządzenie iOS (symulator iOS nie obsługuje powiadomień wypychanych)
• (Windows) Konto dewelopera Microsoft Store i urządzenie Windows 10

Konfigurowanie centrum powiadomień

Funkcja Mobile Apps Azure App Service używa usługi Azure Notification Hubs do wysyłania wypychań, dlatego skonfigurujesz centrum powiadomień dla aplikacji mobilnej.

1. W Azure Portal przejdź do usługi App Services, a następnie wybierz zaplecze aplikacji. W obszarze Ustawienia wybierz pozycję Wypychanie.

2. Aby dodać zasób centrum powiadomień do aplikacji, wybierz pozycję Połączenie. Możesz utworzyć koncentrator lub połączyć się z istniejącym.

   

Teraz połączono centrum powiadomień z projektem zaplecza usługi Mobile Apps. Później skonfigurujesz to centrum powiadomień, aby nawiązać połączenie z systemem powiadomień platformy (PNS) w celu wypychania do urządzeń.

Obejrzyj film wideo przedstawiający kroki opisane w tej sekcji.

Aktualizowanie projektu serwera

W tej sekcji zaktualizujesz kod w istniejącym projekcie zaplecza usługi Mobile Apps, aby wysyłać powiadomienie wypychane za każdym razem, gdy zostanie dodany nowy element. Ten proces jest obsługiwany przez funkcję szablonu usługi Azure Notification Hubs, która umożliwia wypychanie międzyplatformowe. Różni klienci są zarejestrowani pod kątem powiadomień wypychanych przy użyciu szablonów, a pojedyncze uniwersalne wypychanie może zostać wyświetlone na wszystkich platformach klienckich.

Wybierz jedną z poniższych procedur pasujących do typu projektu zaplecza — zaplecza platformy .NET lub Node.js zaplecza.

Projekt zaplecza platformy .NET

1. W Visual Studio kliknij prawym przyciskiem myszy projekt serwera. Następnie wybierz pozycję Zarządzaj pakietami NuGet. Wyszukaj ciąg Microsoft.Azure.NotificationHubs, a następnie wybierz pozycję Zainstaluj. Ten proces instaluje bibliotekę usługi Notification Hubs na potrzeby wysyłania powiadomień z zaplecza.

2. W projekcie serwera otwórz plik Controllers>TodoItemController.cs. Następnie dodaj następujące instrukcje using:

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

3. W metodzie PostTodoItem dodaj następujący kod po wywołaniu metody 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");
   }
   

   Ten proces wysyła powiadomienie o szablonie zawierające element. Tekst po wstawieniu nowego elementu.

4. Opublikuj ponownie projekt serwera.

Node.js projekt zaplecza

1. Skonfiguruj projekt zaplecza.

2. Zastąp istniejący kod w todoitem.js następującym kodem:

   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;  
   

   Ten proces wysyła powiadomienie o szablonie zawierające element.text po wstawieniu nowego elementu.

3. Podczas edytowania pliku na komputerze lokalnym ponownie opublikuj projekt serwera.

Modyfikowanie aplikacji Cordova

Aby upewnić się, że projekt aplikacji Apache Cordova jest gotowy do obsługi powiadomień wypychanych, zainstaluj wtyczkę push Cordova oraz wszystkie usługi wypychania specyficzne dla platformy.

Zaktualizuj wersję cordova w projekcie.

Jeśli projekt używa wersji Apache Cordova starszej niż wersja 6.1.1, zaktualizuj projekt klienta. Aby zaktualizować projekt, wykonaj następujące kroki:

• Aby otworzyć projektanta konfiguracji, kliknij prawym przyciskiem myszy pozycję config.xml.
• Wybierz kartę Platformy .
• W polu tekstowym Interfejs wiersza polecenia cordova wybierz pozycję 6.1.1.
• Aby zaktualizować projekt, wybierz pozycję Kompiluj, a następnie wybierz pozycję Kompiluj rozwiązanie.

Instalowanie wtyczki wypychania

Apache Cordova aplikacje nie obsługują natywnie możliwości urządzeń ani sieci. Te możliwości są udostępniane przez wtyczki opublikowane w npm lub w GitHub. Wtyczka phonegap-plugin-push obsługuje powiadomienia wypychane w sieci.

Wtyczkę wypychania można zainstalować na jeden z następujących sposobów:

W wierszu polecenia:

Uruchom następujące polecenie:

cordova plugin add phonegap-plugin-push

Z poziomu Visual Studio:

1. W Eksplorator rozwiązań otwórz config.xml plik. Następnie wybierz pozycję Wtyczki>Niestandardowe. Następnie wybierz pozycję Git jako źródło instalacji.

2. Wprowadź https://github.com/phonegap/phonegap-plugin-push jako źródło.

   

3. Wybierz strzałkę obok źródła instalacji.

4. Jeśli w SENDER_ID masz już identyfikator projektu liczbowego dla projektu Konsoli deweloperów Google, możesz dodać go tutaj. W przeciwnym razie wprowadź wartość symbolu zastępczego, taką jak 777777. Jeśli celujesz Android, możesz zaktualizować tę wartość w pliku config.xml później.

   Uwaga

   W wersji 2.0.0 plik google-services.json musi być zainstalowany w folderze głównym projektu, aby skonfigurować identyfikator nadawcy. Aby uzyskać więcej informacji, zobacz dokumentację instalacji.

5. Wybierz pozycję Dodaj.

Wtyczka wypychania jest teraz zainstalowana.

Instalowanie wtyczki urządzenia

Wykonaj tę samą procedurę użytą do zainstalowania wtyczki wypychania. Dodaj wtyczkę Urządzenie z listy wtyczki Core. (Aby go znaleźć, wybierz pozycję Wtyczki>Core.) Ta wtyczka jest potrzebna do uzyskania nazwy platformy.

Rejestrowanie urządzenia po uruchomieniu aplikacji

Początkowo dołączamy minimalny kod dla Android. Później możesz zmodyfikować aplikację do uruchamiania w iOS lub Windows 10.

1. Dodaj wywołanie do rejestracjiForPushNotifications podczas wywołania zwrotnego dla procesu logowania. Alternatywnie możesz dodać ją w dolnej części metody 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);
   

   W tym przykładzie pokazano wywołanie metody registerForPushNotifications po pomyślnym uwierzytelnieniu. Możesz dzwonić registerForPushNotifications() tak często, jak jest to wymagane.

2. Dodaj nową metodę registerForPushNotifications w następujący sposób:

   // 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) W poprzednim kodzie zastąp Your_Project_ID ciąg identyfikatorem projektu liczbowego aplikacji z konsoli deweloperów Google.

(Opcjonalnie) Konfigurowanie i uruchamianie aplikacji w Android

Ukończ tę sekcję, aby włączyć powiadomienia wypychane dla Android.

Włączanie usługi Firebase Cloud Messaging

Ponieważ początkowo jest przeznaczona dla platformy Google Android, musisz włączyć usługę Firebase Cloud Messaging.

1. Zaloguj się do konsoli Firebase. Utwórz nowy projekt Firebase, jeśli jeszcze go nie masz.

2. Po utworzeniu projektu wybierz pozycję Dodaj Firebase do swojej aplikacji dla systemu Android.

   

3. Na stronie Dodawanie aplikacji Firebase do aplikacji Android wykonaj następujące kroki:

   1. W przypadku nazwy pakietu Android skopiuj wartość identyfikatora applicationId w pliku build.gradle aplikacji. W tym przykładzie jest com.fabrikam.fcmtutorial1appto .

      

   2. Wybierz pozycję Zarejestruj aplikację.

4. Wybierz pozycję Pobierz plik google-services.json, zapisz plik w folderze aplikacji projektu, a następnie wybierz pozycję Dalej.

   

5. Wprowadź następujące zmiany konfiguracji w projekcie w Android Studio.

   1. W pliku build.gradle na poziomie projektu (<project>/build.gradle) dodaj następującą instrukcję do sekcji zależności .

      classpath 'com.google.gms:google-services:4.0.1'
      

   2. W pliku build.gradle na poziomie aplikacji (<project>/<app-module>/build.gradle) dodaj następujące instrukcje do sekcji zależności.

      implementation 'com.google.firebase:firebase-core:16.0.8'
      implementation 'com.google.firebase:firebase-messaging:17.3.4'
      

   3. Dodaj następujący wiersz na końcu pliku build.gradle na poziomie aplikacji po sekcji zależności.

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

   4. Wybierz pozycję Synchronizuj teraz na pasku narzędzi.

      

6. Wybierz opcję Dalej.

7. Wybierz pozycję Pomiń ten krok.

   

8. W konsoli usługi Firebase wybierz koło zębate dla projektu. Następnie wybierz pozycję Ustawienia projektu.

   

9. Jeśli plik google-services.json nie został pobrany do folderu aplikacji projektu Android Studio, możesz to zrobić na tej stronie.

10. Przejdź do karty Cloud Messaging (Obsługa komunikatów w chmurze ) u góry.

11. Skopiuj i zapisz klucz serwera do późniejszego użycia. Ta wartość służy do konfigurowania centrum.

Konfigurowanie zaplecza aplikacji mobilnej w celu wysyłania żądań wypychania przy użyciu usługi FCM

1. W Azure Portal wybierz pozycję Przeglądaj wszystkie>usługi App Services. Następnie wybierz zaplecze usługi Mobile Apps.
2. W obszarze Ustawienia wybierz pozycję Wypychanie. Następnie wybierz pozycję Konfiguruj usługi powiadomień wypychanych.
3. Przejdź do pozycji Google (GCM). Wprowadź starszy klucz serwera FCM uzyskany z konsoli Firebase, a następnie wybierz pozycję Zapisz.

Twoja usługa jest teraz skonfigurowana do pracy z usługą Firebase Cloud Messaging.

Konfigurowanie aplikacji Cordova dla Android

W aplikacji Cordova otwórz config.xml. Następnie zastąp ciąg Your_Project_ID identyfikatorem projektu liczbowego dla aplikacji z konsoli deweloperów Google.

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

Otwórz index.js. Następnie zaktualizuj kod, aby używał identyfikatora projektu liczbowego.

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

Konfigurowanie urządzenia Android na potrzeby debugowania USB

Przed wdrożeniem aplikacji na urządzeniu Android należy włączyć debugowanie USB. Wykonaj następujące kroki na telefonie Android:

1. Przejdź do Ustawienia>Informacje o telefonie. Następnie naciśnij numer kompilacji do momentu włączenia trybu dewelopera (około siedmiu razy).
2. Po powrocie do opcji Ustawienia>Opcje programu , włącz debugowanie USB. Następnie połącz Android telefon z komputerem deweloperskich za pomocą kabla USB.

Przetestowaliśmy to przy użyciu urządzenia Google Nexus 5X z systemem Android 6.0 (Marshmallow). Jednak techniki są wspólne we wszystkich nowoczesnych wydaniach Android.

Instalowanie Usługi Google Play

Wtyczka wypychania opiera się na Android Usługi Google Play powiadomień wypychanych.

1. W Visual Studio wybierz pozycję Narzędzia>Android>Android Menedżer zestawu SDK. Następnie rozwiń folder Dodatki . Zaznacz odpowiednie pola, aby upewnić się, że każdy z następujących zestawów SDK jest zainstalowany:

   • Android 2.3 lub nowszy
   • Wersja repozytorium Google 27 lub nowsza
   • Usługi Google Play 9.0.2 lub nowszy

2. Wybierz pozycję Zainstaluj pakiety. Następnie poczekaj na zakończenie instalacji.

Bieżące wymagane biblioteki są wymienione w dokumentacji instalacji phonegap-plugin-push.

Testowanie powiadomień wypychanych w aplikacji na Android

Teraz możesz przetestować powiadomienia wypychane, uruchamiając aplikację i wstawiając elementy w tabeli TodoItem. Możesz przetestować z tego samego urządzenia lub z drugiego urządzenia, o ile używasz tego samego zaplecza. Przetestuj aplikację Cordova na platformie Android w jeden z następujących sposobów:

• Na urządzeniu fizycznym: Podłącz urządzenie Android do komputera programistycznego za pomocą kabla USB. Zamiast google Emulator systemu Android wybierz pozycję Urządzenie. Visual Studio wdraża aplikację na urządzeniu i uruchamia aplikację. Następnie możesz korzystać z aplikacji na urządzeniu.

  Aplikacje do udostępniania ekranu, takie jak Mobizen, mogą pomóc w tworzeniu aplikacji Android. Aplikacja Mobizen projektuje ekran Android do przeglądarki internetowej na komputerze.

• W emulatorze Android: w przypadku korzystania z emulatora są wymagane dodatkowe kroki konfiguracji.

  Upewnij się, że wdrażasz na urządzeniu wirtualnym, które ma interfejsy API Google ustawione jako element docelowy, jak pokazano w menedżerze Android virtual device (AVD).

  

  Jeśli chcesz użyć szybszego emulatora x86, zainstaluj sterownik HAXM, a następnie skonfiguruj emulator do użycia.

  Dodaj konto Google do urządzenia Android, wybierając pozycję Aplikacje>Ustawienia>Dodaj konto. Następnie postępuj zgodnie z monitami.

  

  Uruchom aplikację todolist tak jak poprzednio i wstaw nowy element do wykonania. Tym razem w obszarze powiadomień jest wyświetlana ikona powiadomienia. Możesz otworzyć szufladę powiadomień, aby wyświetlić pełny tekst powiadomienia.

  

(Opcjonalnie) Konfigurowanie i uruchamianie w iOS

Ta sekcja dotyczy uruchamiania projektu Cordova na urządzeniach iOS. Jeśli nie pracujesz z urządzeniami iOS, możesz pominąć tę sekcję.

Instalowanie i uruchamianie agenta kompilacji zdalnej iOS na komputerze Mac lub usłudze w chmurze

Aby można było uruchomić aplikację Cordova na iOS przy użyciu Visual Studio, wykonaj kroki opisane w przewodniku konfiguracji iOS, aby zainstalować i uruchomić agenta kompilacji zdalnej.

Upewnij się, że możesz skompilować aplikację dla iOS. Kroki opisane w przewodniku konfiguracji są wymagane do kompilowania aplikacji dla iOS z Visual Studio. Jeśli nie masz komputera Mac, możesz skompilować dla iOS przy użyciu zdalnego agenta kompilacji w usłudze, takiej jak MacInCloud. Aby uzyskać więcej informacji, zobacz Uruchamianie aplikacji iOS w chmurze.

Uwaga

Xcode 7 lub nowszych jest wymagane do korzystania z wtyczki wypychania w iOS.

Znajdź identyfikator, który ma być używany jako identyfikator aplikacji

Przed zarejestrowaniem aplikacji pod kątem powiadomień wypychanych otwórz config.xml w aplikacji Cordova, znajdź id wartość atrybutu w elemecie widżetu, a następnie skopiuj ją do późniejszego użycia. W poniższym pliku XML identyfikator to 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">

Później użyj tego identyfikatora podczas tworzenia identyfikatora aplikacji w portalu deweloperów firmy Apple. Jeśli utworzysz inny identyfikator aplikacji w portalu dla deweloperów, musisz wykonać kilka dodatkowych kroków w dalszej części tego samouczka. Identyfikator w elemecie widget musi być zgodny z identyfikatorem aplikacji w portalu deweloperów.

Rejestrowanie aplikacji pod kątem powiadomień wypychanych w portalu deweloperów firmy Apple

• Zarejestruj identyfikator aplikacji dla aplikacji. Utwórz jawny identyfikator aplikacji (nie identyfikator aplikacji z symbolami wieloznacznymi) i w polu Identyfikator pakietu użyj dokładnego identyfikatora pakietu, który znajduje się w projekcie przewodnika Szybki start Xcode. Ważne jest również, aby wybrać opcję Powiadomienia wypychane .
• Następnie , aby przygotować się do konfigurowania powiadomień wypychanych, utwórz certyfikat SSL "Programowanie" lub "Dystrybucja".

Obejrzyj wideo przedstawiające podobne kroki

Konfigurowanie platformy Azure do wysyłania powiadomień wypychanych

1. Na komputerze Mac uruchom program Keychain Access. Na pasku nawigacyjnym po lewej stronie w obszarze Kategoria otwórz pozycję Moje certyfikaty. Znajdź certyfikat SSL pobrany w poprzedniej sekcji, a następnie ujawnij jego zawartość. Wybierz tylko certyfikat (nie wybieraj klucza prywatnego). Następnie wyeksportuj go.
2. W Azure Portal wybierz pozycję Przeglądaj wszystkie>usługi App Services. Następnie wybierz zaplecze usługi Mobile Apps.
3. W obszarze Ustawienia wybierz pozycję App Service Wypchnij. Następnie wybierz nazwę centrum powiadomień.
4. Przejdź do pozycji Apple Push Notification ServicesUpload Certificate (Przekazywanie certyfikatuusług> powiadomień wypychanych firmy Apple). Przekaż plik .p12, wybierając prawidłowy tryb (w zależności od tego, czy certyfikat SSL klienta z wcześniejszej wersji jest produkcyjny, czy piaskownica). Zapisz wszelkie zmiany.

Usługa jest teraz skonfigurowana do pracy z powiadomieniami wypychanymi na iOS.

Sprawdź, czy identyfikator aplikacji jest zgodny z aplikacją Cordova

Jeśli identyfikator aplikacji utworzony na koncie dewelopera firmy Apple jest już zgodny z identyfikatorem elementu widżetu w pliku config.xml, możesz pominąć ten krok. Jeśli jednak identyfikatory nie są zgodne, wykonaj następujące czynności:

1. Usuń folder platform z projektu.
2. Usuń folder wtyczek z projektu.
3. Usuń folder node_modules z projektu.
4. Zaktualizuj atrybut id elementu widget w pliku config.xml, aby użyć identyfikatora aplikacji utworzonego na koncie dewelopera firmy Apple.
5. Ponownie skompiluj projekt.

Testowanie powiadomień wypychanych w aplikacji iOS

1. W Visual Studio upewnij się, że wybrano iOS jako cel wdrożenia. Następnie wybierz pozycję Urządzenie, aby uruchomić powiadomienia wypychane na połączonym urządzeniu iOS.

   Powiadomienia wypychane można uruchamiać na urządzeniu iOS połączonym z komputerem za pomocą programu iTunes. Symulator iOS nie obsługuje powiadomień wypychanych.

2. Wybierz przycisk Uruchom lub klawisz F5 w Visual Studio, aby skompilować projekt i uruchomić aplikację na urządzeniu iOS. Następnie wybierz przycisk OK , aby zaakceptować powiadomienia wypychane.

   Uwaga

   Aplikacja żąda potwierdzenia powiadomień wypychanych podczas pierwszego uruchomienia.

3. W aplikacji wpisz zadanie, a następnie wybierz ikonę znaku plus (+).

4. Sprawdź, czy odebrano powiadomienie. Następnie wybierz przycisk OK , aby odrzucić powiadomienie.

(Opcjonalnie) Konfigurowanie i uruchamianie w usłudze Windows

W tej sekcji opisano sposób uruchamiania projektu aplikacji Apache Cordova na urządzeniach Windows 10 (wtyczka wypychania PhoneGap jest obsługiwana na Windows 10). Jeśli nie pracujesz z urządzeniami Windows, możesz pominąć tę sekcję.

Rejestrowanie aplikacji Windows na potrzeby powiadomień wypychanych przy użyciu usługi WNS

Aby użyć opcji Sklep w Visual Studio, wybierz element docelowy Windows z listy Platformy rozwiązań, na przykład Windows-x64 lub Windows-x86. (Unikaj Windows-AnyCPU na potrzeby powiadomień wypychanych).

1. W Visual Studio Eksplorator rozwiązań kliknij prawym przyciskiem myszy projekt aplikacji Windows Store. Następnie wybierz pozycjęStore Associate App with the Store (Skojarz aplikację ze sklepem>) ze sklepem.

   

2. W kreatorze wybierz pozycję Dalej. Następnie zaloguj się przy użyciu konta Microsoft. W obszarze Zarezerwuj nową nazwę aplikacji wpisz nazwę aplikacji, a następnie wybierz pozycję Zarezerwuj.

3. Po pomyślnym utworzeniu rejestracji aplikacji wybierz nową nazwę aplikacji. Wybierz przycisk Dalej, a następnie wybierz pozycję Skojarz. Ten proces dodaje wymagane informacje o rejestracji Windows Store do manifestu aplikacji.

4. Powtórz kroki 1 i 3 dla projektu aplikacji Windows Phone Store przy użyciu tej samej rejestracji, która została wcześniej utworzona dla aplikacji Windows Store.

5. Przejdź do Windows Centrum deweloperów, a następnie zaloguj się przy użyciu konta Microsoft. W obszarze Moje aplikacje wybierz nową rejestrację aplikacji. Następnie rozwiń węzeł Powiadomieniawypychaneusług>.

6. Na stronie Powiadomienia wypychane w obszarze Windows Usług powiadomień wypychanych (WNS) i Microsoft Azure Mobile Apps wybierz pozycję Witryna usług Live Services. Zanotuj wartości identyfikatora SID pakietu i bieżącą wartość w kluczu tajnym aplikacji.

   

   Ważne

   Klucz tajny aplikacji i identyfikator SID pakietu są ważnymi poświadczeniami zabezpieczeń. Nie udostępniaj tych wartości nikomu ani nie rozpowszechniaj ich w aplikacji.

Obejrzyj wideo przedstawiające podobne kroki

Konfigurowanie centrum powiadomień dla usługi WNS

1. W Azure Portal wybierz pozycję Przeglądaj wszystkie>usługi App Services. Następnie wybierz zaplecze usługi Mobile Apps. W obszarze Ustawienia wybierz pozycję App Service Wypchnij. Następnie wybierz nazwę centrum powiadomień.

2. Przejdź do Windows (WNS). Następnie wprowadź klucz zabezpieczeń (klucz tajny klienta) i identyfikator SID pakietu uzyskany z lokacji usług live. Następnie wybierz pozycję Zapisz.

   

Zaplecze jest teraz skonfigurowane do wysyłania powiadomień wypychanych przy użyciu usługi WNS.

Konfigurowanie aplikacji Cordova do obsługi Windows powiadomień wypychanych

Otwórz projektanta konfiguracji, klikając prawym przyciskiem myszy config.xml. Następnie wybierz pozycję Projektant widoków. Następnie wybierz kartę Windows, a następnie wybierz pozycję Windows 10 w obszarze Windows Wersja docelowa.

Aby obsługiwać powiadomienia wypychane w domyślnych kompilacjach (debugowanie), otwórz plik build.json . Następnie skopiuj konfigurację "release" do konfiguracji debugowania.

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

Po aktualizacji plik build.json powinien zawierać następujący kod:

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

Skompiluj aplikację i sprawdź, czy nie masz żadnych błędów. Aplikacja kliencka powinna teraz zarejestrować się w celu otrzymywania powiadomień z zaplecza usługi Mobile Apps. Powtórz tę sekcję dla każdego projektu Windows w rozwiązaniu.

Testowanie powiadomień wypychanych w aplikacji Windows

W Visual Studio upewnij się, że jako obiekt docelowy wdrożenia wybrano platformę Windows, taką jak Windows-x64 lub Windows-x86. Aby uruchomić aplikację na komputerze Windows 10 hostujący Visual Studio, wybierz pozycję Komputer lokalny.

1. Wybierz przycisk Uruchom , aby skompilować projekt i uruchomić aplikację.

2. W aplikacji wpisz nazwę nowego dokumentu, a następnie wybierz ikonę plusa (+), aby ją dodać.

Sprawdź, czy po dodaniu elementu otrzymano powiadomienie.

Następne kroki

• Przeczytaj o usłudze Notification Hubs , aby dowiedzieć się więcej o powiadomieniach wypychanych.
• Jeśli jeszcze tego nie zrobiono, kontynuuj samouczek, dodając uwierzytelnianie do aplikacji Apache Cordova.

Dowiedz się, jak używać następujących zestawów SDK:

• Zestaw Apache Cordova SDK
• Zestaw ASP.NET Server SDK
• Zestaw Node.js Server SDK