Démarrage rapide : ajout de notifications Push pour un service mobile (JavaScript)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Ce guide de démarrage rapide explique comment activer les notifications Push dans une application à l’aide d’Azure Mobile Services. Mobile Services simplifie l’envoi de notifications Push à votre application à l’aide des services de notifications Push Windows (WNS). Pour en savoir plus, voir le Centre de développement Mobile Services. Microsoft Visual Studio 2013 simplifie l’activation des notifications Push dans votre application Mobile Services. Cette rubrique fait suite à la précédente intitulée Démarrage rapide : ajout d’un service mobile. Une fois terminé, vous aurez ajouté les notifications Push à votre nouveau service mobile et testé l’application en envoyant une nouvelle notification.

Prérequis

Visual Studio 2013 Update 3**
Un compte Windows Store actif.
Vous devez avoir effectué les étapes de la rubrique précédente, Démarrage rapide : ajout d’un service mobile.

Ajouter et configurer les notifications Push dans l’application

Tout d’abord, vous devez utiliser l’Assistant Ajouter une notification d’émission dans Visual Studio 2013 pour enregistrer votre application auprès du Windows Store, configurer votre service mobile pour activer les notifications Push et ajouter du code à votre application pour enregistrer un canal d’appareil.

Remarque Cette rubrique part du principe qu’une connexion à un service mobile a déjà été ajoutée au projet, car cette opération est décrite dans la rubrique précédente. Quand aucun service mobile n’a été connecté, l’Assistant Ajouter une notification d’émission crée cette connexion pour vous.

Dans Visual Studio 2013, ouvrez l’Explorateur de solutions, cliquez avec le bouton droit sur le projet, cliquez sur Ajouter, puis sur Notification d’émission. L’Assistant Ajouter une notification d’émission démarre.
Cliquez sur Suivant, connectez-vous à votre compte Windows Store, puis spécifiez un nom dans Réserver un nouveau nom et cliquez sur Réserver. Un nouvel enregistrement d’application est créé dans le Windows Store.
Cliquez sur le nouvel enregistrement dans la liste Nom de l’application, puis cliquez sur Suivant.
Sélectionnez le service mobile que vous avez créé dans le cadre de la rubrique Démarrage rapide : ajout d’un service mobile ou Démarrage rapide : ajout d’un service mobile en C++, cliquez sur Suivant, puis sur Terminer. Votre service mobile est alors configuré pour fonctionner avec les services WNS, ce qui lui permet d’envoyer des notifications à votre application.Remarque Quand votre application n’est pas encore configurée pour se connecter au service mobile, l’Assistant effectue aussi les mêmes étapes de configuration que celles décrites dans Démarrage rapide : ajout d’un service mobile.
(Facultatif) Ouvrez le fichier de code YourMobileService.push.register.js généré et inspectez le code. Ce code permet de s’assurer qu’une tentative d’inscription de l’appareil est effectuée chaque fois que l’application est activée et il inclut un appel à l’API personnalisée notifyallusers.
(Facultatif) Dans l’Explorateur de serveurs, développez Mobile Services, le nom de votre service, puis ouvrez le fichier notifyallusers.js. Ce fichier, qui est stocké dans votre service mobile, contient le code JavaScript qui envoie des notifications Push à tous les utilisateurs inscrits.
Appuyez sur la touche F5 pour exécuter l’application et vérifier qu’une notification en provenance du service mobile est reçue immédiatement.

Mettre à jour le code de notification Push généré

L’Assistant Ajout d’une notification Push ajoute du code qui déclenche une notification de test pour tous les utilisateurs inscrits. Bien que cela soit pratique pour illustrer le fonctionnement d’une notification lors de l’exécution d’une application, il ne s’agit généralement pas d’un scénario significatif. Vous allez supprimer l’appel à notifyallusers et le remplacer, avec quelques modifications, par du code qui envoie une notification à tous les appareils inscrits lorsqu’une insertion est effectuée dans la table TodoItem.

Dans l’Explorateur de serveurs, développez Mobile Services, le nom de votre service, puis notifyallusers.js. Il contient également du code qui envoie une notification Push. Remarque Le code qui envoie une notification Push peut être inclus dans n’importe quel fichier de script enregistré. L’emplacement de ce script dépend de la façon dont la notification est déclenchée. Les scripts peuvent être enregistrés pour une opération d’insertion, de mise à jour, de suppression ou de lecture dans une table, mais également en tant que travail planifié ou API personnalisée. Pour plus d’informations, voir Utiliser des scripts serveur dans Mobile Services. Dans ce cas, ce code est déplacé vers le fichier de script enregistré pour l’opération d’insertion dans la table TodoItem.

Développez la table TodoItem, ouvrez le fichier insert.js et remplacez la fonction d’insertion actuelle par le code suivant, puis enregistrez vos modifications :

function insert(item, user, request) {
// Define a payload for the Windows Store toast notification.
var payload = '<?xml version="1.0" encoding="utf-8"?><toast><visual>' +    
    '<binding template="ToastText01">  <text id="1">' +
    item.text + '</text></binding></visual></toast>';

request.execute({
    success: function() {
        // If the insert succeeds, send a notification.
        push.wns.send(null, payload, 'wns/toast', {
            success: function(pushResponse) {
                console.log("Sent push:", pushResponse);
                request.respond();
                },              
                error: function (pushResponse) {
                    console.log("Error Sending push:", pushResponse);
                    request.respond(500, { error: pushResponse });
                    }
                });
            }
        });
}

Lorsque vous enregistrez des modifications dans le fichier insert.js, une nouvelle version du script est chargée sur votre service mobile.

Maintenant, lorsque vous insérez un nouveau TodoItem, une nouvelle notification Push est renvoyée immédiatement vers l’appareil qui a effectué la demande d’insertion.

Dans Visual Studio, appuyez sur la touche F5 pour exécuter l’application.
Dans l’application, tapez du texte dans Insert a TodoItem, puis cliquez sur Save. Notez qu’une notification est renvoyée immédiatement à l’appareil une fois l’insertion effectuée dans la table dans Azure.
(Facultatif) Exécutez l’application sur deux ordinateurs en même temps et répétez l’étape précédente. Vérifiez que la notification est envoyée à toutes les instances d’application en cours d’exécution.

Récapitulatif et étapes suivantes

Vous savez désormais comment utiliser Mobile Services pour ajouter des fonctionnalités de notification Push à votre application du Windows Store.

Maintenant, nous vous proposons de découvrir comment utiliser Mobile Services pour authentifier les utilisateurs à l’aide de fournisseurs d’identité Microsoft Account, Facebook, Twitter ou Google. Pour plus d’informations, voir Prise en main de l’authentification.

Rubriques associées

Planifier des travaux périodiques dans Mobile Services

Utiliser des scripts serveur dans Mobile Services

Share via