言語: HTML | XAML

クイック スタート: モバイル サービスでのプッシュ通知の追加 (JavaScript バックエンド)

このクイック スタートでは、Azure モバイル サービスを使用する Windows ストア アプリでプッシュ通知を有効にする方法について説明します。 モバイル サービスでは、Windows プッシュ通知サービス (WNS) を使用することによって、簡単にアプリにプッシュ通知を送信できます。詳しくは、モバイル サービスのデベロッパー センターをご覧ください。Microsoft Visual Studio 2013 を使用して、モバイル サービス アプリで簡単にプッシュ通知を有効にすることができます。このトピックは、前のトピック「クイック スタート: モバイル サービスの追加」(C++ の場合は、「クイック スタート: C++ を使ったモバイル サービスの追加」) に基づいています。作業が終了すると、新しいモバイル サービスにプッシュ通知が追加され、新しい通知を送信することによってアプリがテストされます。

このクイック スタートは、JavaScript のバックエンドを使うモバイル サービスに適用されます。.NET バックエンドを使用している場合は、モバイル サービスでのプッシュ通知の概要に関するページをご覧ください。

必要条件

アプリでプッシュ通知を追加および構成する

まず、Visual Studio 2013 のプッシュ通知の追加ウィザードを使用して、Windows ストアでのアプリの登録、プッシュ通知を有効にするモバイル サービスの構成、デバイス チャネルを登録するコードのアプリへの追加を行います。

  このトピックでは、前のトピックでの作業を完了し、モバイル サービスの接続が既にプロジェクトに追加されていることを前提としています。 モバイル サービスが接続されていない場合、プッシュ通知の追加ウィザードによってこの接続が作成されます。
  1. Visual Studio 2013 で、ソリューション エクスプローラーを開き、プロジェクトを右クリックして、[追加][プッシュ通知] の順にクリックします。これにより、プッシュ通知の追加ウィザードが開始されます。
  2. [次へ] をクリックし、Windows ストア アカウントにサインインします。次に、[新しい名前の予約] に名前を入力し、[予約] をクリックします。これによって、Windows ストアで新しいアプリの登録が作成されます。
  3. [アプリ名] の一覧で新しい登録をクリックし、[次へ] をクリックします。
  4. クイック スタート: モバイル サービスの追加」または「クイック スタート: C++ を使ったモバイル サービスの追加」を完了したときに作成したモバイル サービスを選択し、[次へ][完了] の順にクリックします。これにより、モバイル サービスは、Windows プッシュ通知サービス (WNS) と連携して、アプリに通知を送信できるように構成されます。
      アプリがモバイル サービスに接続するようにまだ構成されていない場合、ウィザードによって、「クイック スタート: モバイル サービスの追加」で示されている構成タスクも実行されます。
  5. (省略可能) サービスモバイル サービス、サービス名の順に展開し、生成されたコードのファイルを開きます (C++ プロジェクトでは、このファイルの名前は PushRegister.cpp です)。デバイスのインストール ID とチャネルを取得し、このデータを新しい channels テーブルに挿入する UploadChannel メソッド (C++ では、AcquireAndUpdatePushChannel メンバー関数) を調べます。このテーブルは、プッシュ通知の追加ウィザードによって、モバイル サービス内で作成されたものです。このメソッドの呼び出しは、ウィザードによって、App.xaml.cs、App.xaml.vb、App.xaml.cpp コード ファイル内の OnLaunched イベント ハンドラーにも追加されました。これによって、アプリが起動されるたびにデバイス登録が試行されるようになります。
  6. (省略可能) notifyallusers.js ファイル内のコードを調べます。notifyallusers.js はモバイル サービス バックエンドの一部であるため、Visual Studio によってプロジェクトに追加されません。このファイルは、サーバー エクスプローラーで、モバイル サービスのノードに表示されます。このコードはモバイル サービスに関連付けられたカスタム API であり、実行すると、プッシュ通知に登録されているクライアント アプリにプッシュ通知を送信します。

    
    exports.post = function(request, response) {
        response.send(statusCodes.OK,{ message : 'Hello World!' })
        
        // The following call is for illustration purpose only
        // The call and function body should be moved to a script in your app
        // where you want to send a notification
        sendNotifications(request);
    };
    
    // The following code should be moved to appropriate script in your app where notification is sent
    function sendNotifications(request) {
        var payload = '<?xml version="1.0" encoding="utf-8"?><toast><visual><binding template="ToastText01">' +
            '<text id="1">Sample Toast</text></binding></visual></toast>';
        var push = request.service.push; 
        push.wns.send(null,
            payload,
            'wns/toast', {
                success: function (pushResponse) {
                    console.log("Sent push:", pushResponse);
                }
            });
    }
    
    
    

    payload 変数は、Windows ストア アプリで使用される特定の種類のトースト通知の XML を表します。トースト通知テンプレートの詳しい説明については、「トースト テンプレート カタログ」をご覧ください。

  7. キーボードの Ctrl + F5 キーを押すか、メニューの [デバッグ]、[デバッグなしで開始] を選択してアプリを実行し、通知がモバイル サービスからすぐに受信されることを確認します。
  8. (省略可能) アプリを終了することなく Visual Studio に戻るには、Alt + Tab キーを使います。Visual Studio から対話形式で通知を送信することによって、プッシュ通知に対するアプリの応答をテストする場合は、「Visual Studio からプッシュ通知を送信する方法」の手順に従ってください。

要約と次のステップ

ここでは、モバイル サービスを使用して、Windows ストア アプリにプッシュ通知機能を追加する方法について説明しました。

次に、モバイル サービスを使って、アプリに次の機能の追加する方法について説明します。

関連トピック

モバイル サービスでの定期的なジョブのスケジュールに関するページ
モバイル サービスでのサーバー スクリプトの操作に関するページ

 

 

表示:
© 2015 Microsoft