Expo と mBaaSを組み合わせてプッシュ通知を送信する

React Nativeの開発環境を提供するExpoというサービスがあります。その一機能としてプッシュ通知が使えるのですが、トークンを保存しておく場所がありません。そこでNCMBをトークン保存場所として利用し、プッシュ通知を手軽に送信できるようにしましょう。

利用するのはReact Native用のJavaScript SDKになります（コミュニティSDKです）。

ライブラリのインポート

プッシュ通知用のライブラリを読み込みます。あらかじめ expo install expo-permissions でライブラリをインストールしておきます。

import * as Permissions from 'expo-permissions'
import Expo, { Notifications } from 'expo'

デバイストークンを取得する

デバイストークンを取得する処理です。 status はプッシュ通知の許可状態であり、 granted はプッシュ通知を許可した場合のステータスになります。そして Notifications.getExpoPushTokenAsync() でトークン文字列が取得できますので、それをmBaaSのデータストアに保存します。

const { status } = await Permissions.askAsync(Permissions.NOTIFICATIONS);
if (status === 'granted') {
  const string = await Notifications.getExpoPushTokenAsync();
  const Token = ncmb.DataStore('Token');
  const token = new Token();
  const acl = new ncmb.Acl();
  acl
    .setPublicReadAccess(true)
    .setPublicWriteAccess(false);
  await token
    .set('token', string)
    .set('acl', acl)
    .save();
}

プッシュ通知を開封した時の処理

開封処理は Notifications.addListener が発火するので、そこに処理を書きます。

componentWillMount() {
  Notifications.addListener((notification) => {
    console.log(notification);
  });
}

プッシュ通知送信処理

プッシュ通知は別途Node.jsから配信します。データストアを検索し、そのトークンを使って送信処理を行います。

const request = require('superagent');
const NCMB = require('ncmb');
const applicationKey = 'b34...01e';
const clientKey = '489...462';
const ncmb = new NCMB(applicationKey, clientKey);

(async () => {
  const Token = ncmb.DataStore('Token');
  const token = await Token.fetch();
  try {
    const response = await request
      .post('https://exp.host/--/api/v2/push/send')
      .send([{
        to: token.token,
        body: 'Hello',
        badge: 1,
        data: {'a': 'b'}
      }])
      .set('Accept', 'application/json');
    console.log(response.body);
  } catch (e) {
    console.log(e);
  }
})();

送信がうまくいくと次のようなレスポンスが得られます。

{
  data: [ { status: 'ok', id: 'defc0644-6131-4ac4-b484-6e9b6881d25c' } ]
}

そのプッシュ通知を開封すると、React Native側では以下のようなデータが得られます。この中のdata以下を使って処理分けを行えば良さそうです。

Object {
  "actionId": null,
  "data": Object {
    "a": "b",
  },
  "origin": "received",
  "remote": true,
  "userText": null,
}

コード

SDKのコードはNCMBMania/ncmb-react-native: NCMB SDK for React Nativeにて公開しています。ライセンスはMIT Licenseです。

まとめ

Expoアプリを使うことで手軽にプッシュ通知の実装が実現できます。iOSなどで証明書を用意する必要もありません。トークンはNCMBに保存して、手軽にプッシュ通知を試してみたい時に使えるでしょう。

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。