FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

プッシュ通知を承認制にする【プッシュ通知の一覧機能を作る】

プッシュ通知は従来のマーケティング手法で言えばメールマーケティングに相当します。つまり一度配信してしまうと、後から取り消すのが難しい拡散方法ということです。そのため企業によっては一旦承認フローを経てからプッシュ通知を送りたいという要望も聞かれます。

そこで独自のプッシュ通知管理画面を作成して、承認フローを経るようにしてみたいと思います。作成していく過程をステップを踏んで説明していきますので、自社のフローに合わせてカスタマイズしてみてください。

今回はプッシュ通知一覧画面を作ります。

実際の機能について

画面は次のようになります。配信履歴、要承認、下書きのそれぞれについてプッシュ通知の一覧を表示します。

ルーティングの追加

各一覧について、次のようにパスを指定しています。

  • 配信履歴
    /list/history
  • 要承認
    /list/auth
  • 下書き
    /list/draft

各URLをルーティング化します。注意点として、メタ情報を追加しておきます。

{
  path: `${path}list`, component: mainContent,
  children: [
    {
      path: '', 
      component: listPageMain
    },
    {
      path: `${path}list/history`,
      component: listPage,
      meta: {
        type: 'history'
      }
    },
      :
    {
      path: `${path}list/draft`,
      component: listPage,
      meta: {
        type: 'draft'
      }
    }
  ]
}

メニューもこの設定に従って記述します。例えば次のようになります。

<li>
  <router-link to="/list/history" active-class="stay">
    <span>配信履歴</span>
  </router-link>
</li>

一覧表示する

そして表示処理を作ります。この時注意するのはルーティングが変わった時に呼ばれるイベントです。watchとして$routeが変わったタイミングを監視します。

module.exports = {
  watch: {
    '$route': 'fetchData'
  },
  methods: {
    fetchData: function() {
      let me = this;
      me.pushes = [];
      switch (this.$route.meta.type) {
      case 'draft':
        // ドラフトの場合
        break;
      case 'auth':
        // 要承認の場合
        break;
      case 'history':
        // 配信履歴の場合
        break;
      }
    }
  }
}

例えばドラフトを選んだ場合、次のようになります。

let prePush = this.ncmb.DataStore('prePush');
prePush
  .fetchAll()
  .then(function(results) {
    me.pushes = results;
  })

このようにすることでリンクを切り替えた場合に一覧の内容を書き換えられるようになります。


今回のコードはNCMBMania/pushManagerにアップロードされています。実装方法などの参考にしてください。

プッシュ通知を複数人の目を通さなければ送信できないようにすることでミスを大幅に軽減できます。参考にしてください。

f:id:mbaasblog:20180927171608p:plain