Help us understand the problem. What is going on with this article?

AWS SNS と Cordova を使って iOS10 で Push通知 最短手順

More than 3 years have passed since last update.

はじめに

とにかく最も簡単に、Push通知を出す手順をまとめる(iOS10版)

参考サイト

前提条件

手順

証明書

  1. CSR (証明書署名要求) を作成

    Mac で「キーチェーンアクセス」を起動し、「証明書アシスタント」から「認証局に証明書を要求」を選択します。

    スクリーンショット 2016-09-25 14.59.52.png

    「Apple Developer Program」に登録されているアカウント(メールアドレス)を指定します。
    また、「通称」には分かり易い任意の名前をつけますが日本語はダメです(以降のAWSでエラーになるため)。
    「ディスクに保存」します。あとで二回使用します。
    スクリーンショット_2016-09-25_11_47_08.png

  2. App ID を作成
    App ID を作成します。
    「Explicit App ID」を選択し、明示的に Bundle ID を指定します。(ワイルドカードは不可)
    「Push Notifications」 にチェックします。
    https://developer.apple.com/account/ios/identifier/bundle
    AppID.png

  3. 実機の開発機登録
    まず、UDID を調べるために、デバイスとMacを接続し、iTunesを起動します。
    UDID取得.png
    入手したUDIDを、Devicesに登録します。
    https://developer.apple.com/account/ios/device/
    Devices.png

  4. 証明書作成
    今回は、以下の二種類の証明書が必要です。

    1. iOSアプリを作成するための証明書(iOS App Development)
    2. Push通知をするための証明書(Apple Push Notification service SSL)

    https://developer.apple.com/account/ios/certificate/
    Certificate作成.png

    それぞれ、Development(開発用) と Production(本番用) があります。
    本記事では Development(開発用) を扱います。

    上記で生成した
    - CSR(証明書署名要求)
    - App ID
    - Device
    を指定すると、証明書が生成されます。

    証明書はMacにダウンロードし、キーチェーンアクセスに登録 (ダブルクリックでOK) しておきます。

  5. Push通知用証明書のエクスポート(P12形式)
    再びキーチェーンアクセスを起動し、上記で取り込んだPush通知用証明書を選択し、右クリックして「書き出す」を選択します。
    P12Export.png
    「P12形式」を選択して保存します。(以降AWS設定で使用します)
    p12エクスポート2.png

cordova

  1. cordova 本体 インストール

    $ npm install -g cordova
    
  2. アプリ作成
    create コマンド

    • 第一引数 : ディレクトリ名称
    • 第二引数 : App ID 【重要】 (証明書の Bundle ID と一致のこと)
    • 第三引数 : 表示名称
    $ cordova create CordovaPushNotification jp.co.xxxxxxxx.CordovaPushNotification CordovaPushNotification
    $ cd CordovaPushNotification
    
  3. iOS プラットフォーム 追加

    $ cordova platform add ios
    
  4. プラグイン 追加
    SENDER_ID は Android用ですが、ここで指定しておかないとエラーになる。何でも良い。

    $ cordova plugin add cordova-plugin-console --save
    $ cordova plugin add phonegap-plugin-push --variable SENDER_ID=XXXXXXXX --save
    

    プラグインについての詳細は、プラットフォームのサポートを参照して下さい。

  5. プログラム修正
    www/js/index.js に以下の二箇所を追記します

    index.js
        onDeviceReady: function() {
            this.receivedEvent('deviceready');
            this.initPushNotification();         // ← これ追加
        },
    
    index.js
        // Initialize push notification
        initPushNotification: function(){
            var push = PushNotification.init({
                "ios": {"alert": "true", "badge": "true", "sound": "true"} } );
    
            push.on('registration', function(data) {
                // data.registrationId
                console.log(data);
            });
    
            push.on('notification', function(data) {
                // data.message,
                // data.title,
                // data.count,
                // data.sound,
                // data.image,
                // data.additionalData
            });
    
            push.on('error', function(e) {
                // e.message
            });
        }
    
    • 起動直後に、Push通知が使用可能であれば、'registration' が呼ばれる
    • Push通知を受信時、'notification' が呼ばれる
  6. Xcode 起動

    $ cordova build ios
    $ open platforms/ios/CordovaPushNotification.xcodeproj
    

Xcode

bundle ID が正しければ、適切な証明書を自動で選択してくれているはずです。

以下 4箇所を Xcode上で設定します。

  1. 自動でワーニングをフィックスしてくれるので、「Perform Changes」を押下。
    スクリーンショット_2016-09-25_10_12_50.png

  2. 「development team」の設定が必要です。
    スクリーンショット_2016-09-25_10_13_30.png

  3. Capabilitiesで 「Push Notification」をONにします。
    スクリーンショット_2016-09-25_10_14_25.png

  4. Capabilitiesで 「Background Modes」の「Background Fetch」と「Remote Notifications」をONにします。
    backgroundMode.png

実機で実行し、Push通知用のID(registration ID)が取得できていれば成功です。
この値は以下で使用しますので、メモしておいて下さい。
スクリーンショット_2016-09-25_10_14_53.png

AWS SNS

  1. AWS コンソールにログインし、SNS を選択します。
  2. Applications を選択し、「Create Platform application」を押下します。 SNS_Application作成.png
  3. Push通知用証明書を設定します

    1. 「Push notification platform」では、「Apple production」と「Apple development」がありますが、先に作成した証明書と同じ方(ここではdevelopment)を選択します。間違わないように。
    2. 「Push certificate type」では、「iOS push certificate」を選択。
    3. 「Choose file」で、先に作成した証明書をP12形式で書き出したファイルを指定します。
    4. パスワードを入力し、「Load credentials from file」を押下すれば、「Certificate」と「Private key」が自動で読み込まれます。 P12選択.png
  4. Endpointを作成します
    作成したApplicationのARNをクリックすると、Endpoints登録画面に進みます。
    endpoint作成.png
    先にメモしたPush通知用のID(registration ID)を「Device token」に設定します。
    「User data」は任意の値を格納できます。
    endpoint作成2.png

  5. Push通知の実行
    作成したEndpointを選択して、「Publish to endpoint」を押下
    push1.png
    適当にメッセージを書いて、「Publish message」を押下すると、、、
    push2.png

  6. キタ~
    (アプリは閉じた状態にしておく)
    IMG_3192.PNG

おわりに

  • AWS SNS と Cordova を使って Push通知 の雛形を作成しました。
  • ちゃんとしたアプリにするためには、ログイン後に「Device token」をサーバに送信し、ログインユーザとの関連を管理して、SNSに登録する必要があります。
  • 今後は、Cognito との連携を調査していきます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした